feat: echarts按需引入

package.json

@@ -16,6 +16,7 @@
  "antd": "^5.6.0",
  "axios": "^1.4.0",
  "dayjs": "^1.11.8",
+ "echarts": "^5.4.2",
  "i18next": "^23.2.3",
  "js-cookie": "^3.0.5",
  "mobx": "^6.9.0",

src/libs/echarts.ts

@@ -0,0 +1,59 @@
+/*
+ * @Author: liuhua
+ * @Date: 2023-07-04 10:10:20
+ * @LastEditors: liuhua
+ * @LastEditTime: 2023-07-04 10:46:58
+ * @Description: echarts按需引入
+ */
+
+import * as echarts from 'echarts/core';
+import { BarChart, LineChart } from 'echarts/charts';
+import {
+ TitleComponent,
+ TooltipComponent,
+ GridComponent,
+ // 数据集组件
+ DatasetComponent,
+ // 内置数据转换器组件 (filter, sort)
+ TransformComponent
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import type {
+ // 系列类型的定义后缀都为 SeriesOption
+ BarSeriesOption,
+ LineSeriesOption
+} from 'echarts/charts';
+import type {
+ // 组件类型的定义后缀都为 ComponentOption
+ TitleComponentOption,
+ TooltipComponentOption,
+ GridComponentOption,
+ DatasetComponentOption
+} from 'echarts/components';
+import type { ComposeOption } from 'echarts/core';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+export type ECOption = ComposeOption<
+ | BarSeriesOption
+ | LineSeriesOption
+ | TitleComponentOption
+ | TooltipComponentOption
+ | GridComponentOption
+ | DatasetComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+ TitleComponent,
+ TooltipComponent,
+ GridComponent,
+ DatasetComponent,
+ TransformComponent,
+ BarChart,
+ LineChart,
+ LabelLayout,
+ UniversalTransition,
+ CanvasRenderer
+]);
+export default echarts;

src/views/home/index.tsx

@@ -1,14 +1,45 @@
-import { observer } from 'mobx-react';
+import { useRef, useEffect } from 'react';
 import { DatePicker, type DatePickerProps } from 'antd';
+import { observer } from 'mobx-react';
+import echarts, { type ECOption } from '@/libs/echarts';
+import rootStore from '@/store';
 
 function Home() {
+ const { theme } = rootStore;
  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
  console.log(date, dateString);
  };
 
+ const chartRef = useRef(null);
+ useEffect(() => {
+ if (chartRef.current) {
+ const chart = echarts.init(chartRef.current);
+ const options: ECOption = {
+ color: theme.primaryColor,
+ title: {
+ text: 'ECharts 入门示例'
+ },
+ tooltip: {},
+ xAxis: {
+ data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+ },
+ yAxis: {},
+ series: [
+ {
+ name: '销量',
+ type: 'bar',
+ data: [5, 20, 36, 10, 10, 20]
+ }
+ ]
+ };
+ chart.setOption(options);
+ }
+ }, [theme.primaryColor]);
+
  return (
  <>
  <DatePicker onChange={onChange} />
+ <div ref={chartRef} className="w-[500px] h-[300px]" />
  </>
  );
 }