react+typescript項目使用echarts的按需加載流程

如果沒有使用typescript，只用了react
請去echarts-for-reacthttps://github.com/hustcc/echarts-for-react

如果沒有用typescript，也沒有用react，就去echarts官網
echarts官網https://www.echartsjs.com/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

如果用了typescript和react，想要使用echarts，請往下看步驟

第一步安裝echarts和echarts-for-react

使用yarn或者install安裝都可以

npm install --save echarts-for-react

或者

yarn add echarts-for-react --save

echarts-for-react依賴於echarts，可以自己選擇安裝一個版本的echarts

npm install --save echarts

或者

yarn add echarts --save

第二步 處理找不到模塊的編譯器異常

因爲echarts和echarts-for-react本身是js框架，結合typescript時，編譯器會報錯，找不到該模塊

在src的根目錄下創建一個types文件夾，在types文件夾下面創建模塊聲明文件

分別在裏面聲明模塊

declare module 'echarts-for-react';

declare module 'echarts/lib/echarts';

第三步通過echarts-for-react子組件來實現echarts圖表

導入需要的內容

import ReactEchartsCore from 'echarts-for-react/lib/core';

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

創建標籤ReactEchartsCore放入return或者render中

return (
    <ReactEchartsCore
      style={{ background: '#fff', height: '376px' }}
      echarts={echarts}
      option={getOption()}
    />
  );

設置echarts的配置

  const getOption = () => {
    return {
      title: {
        text: '熱門知識點統計圖',
        subtext: '統計前7名熱門知識點',
        ...PublicTitle, //這是我自己定義的title在另外一個文件
      },
      grid: {
        y: 70,
        x: 78,
      },
      xAxis: {
        type: 'value',
        show: false,
      },
      yAxis: {
        type: 'category',
        data: problemName, //這是我定義的y軸數據
        // ...SetyAxis, 這是我自己定義的縱軸，在另外一個文件
      },
      series: [
        {
          type: 'bar',
          barWidth: 20,
          data: hotValue, //這是我定義的渲染數據
          itemStyle: {
            normal: {
              color: '#5B8FF9',
            },
          },
          label: {
            color: '#f6f6f6',
            show: true,
            position: 'insideLeft',
          },
        },
      ],
      tooltip: {},
    };
  };

完整代碼

import React from 'react';
import ReactEchartsCore from 'echarts-for-react/lib/core';

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import PublicTitle from '../echartsOption/title';
import SetyAxis from '../echartsOption/yAxis';

type SourceDataType = {
  problemName: string;
  /** 熱門問題火熱度 */

  hotValue: number;
}[];

const Hotkownledge: React.FC = () => {
/** 爲了便於維護，將設置的數據進行處理，再轉爲echarts能用的數據 */
  /** 源數據 */
  const sourceData: SourceDataType = [
    { problemName: '問題一', hotValue: 164 },
    { problemName: '問題二', hotValue: 264 },
    { problemName: '問題三', hotValue: 1034 },
    { problemName: '問題四', hotValue: 412 },
    { problemName: '問題五', hotValue: 122 },
    { problemName: '問題六', hotValue: 697 },
    { problemName: '問題七', hotValue: 426 },
  ];
  /** 對數據進行排序，根據hotValue值的大小，由小到大進行排序 */
  sourceData.sort((a, b) => {
    return a.hotValue - b.hotValue;
  });

  /** 數據處理渲染echarts */
  const problemName: string[] = [];
  sourceData.forEach(item => {
    problemName.push(item.problemName);
  });
  const hotValue: number[] = [];
  sourceData.forEach(item => {
    hotValue.push(item.hotValue);
  });

  const getOption = () => {
    return {
      title: {
        text: '熱門知識點統計圖',
        subtext: '統計前7名熱門知識點',
        ...PublicTitle,
      },
      grid: {
        y: 70,
        x: 78,
      },
      xAxis: {
        type: 'value',
        show: false,
      },
      yAxis: {
        type: 'category',
        data: problemName,
        ...SetyAxis,
      },
      series: [
        {
          type: 'bar',
          barWidth: 20,
          data: hotValue,
          itemStyle: {
            normal: {
              color: '#5B8FF9',
            },
          },
          label: {
            color: '#f6f6f6',
            show: true,
            position: 'insideLeft',
          },
        },
      ],
      tooltip: {},
    };
  };
  return (
    <ReactEchartsCore
      style={{ background: '#fff', height: '376px' }}
      echarts={echarts}
      option={getOption()}
    />
  );
};
export default Hotkownledge;