Echarts 使用

官方文档：文档链接

一、安装

1、 npm

执行安装

npm install echarts --save

2、从 CDN 获取

1. 打开链接： https://www.jsdelivr.com/package/npm/echarts
2. 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
   

二、使用

2.1 React 项目中使用

2.1.1 使用 ts + echarts + axios 请求数据示例

import { useEffect, useRef, useState } from "react";
import * as echarts from "echarts";
import { barChartData } from "@/api/echarts/echartsApi";
import { ResChartData } from "@/api/types/charts.type";
import "./index.scss";

// React 使用 echarts

interface ChartOption extends echarts.EChartsOption{
  title: {
    text: string;
  };
  tooltip: {};
  xAxis: {
    data: string[];
  };
  yAxis: {};
  series: echarts.BarSeriesOption[];
}

const EchartsDemo = () => {
  const main = useRef<HTMLDivElement>(null);
  const [data, setData] = useState<ResChartData>([]); // ResChartData 是自定义的返回数据格式
  const [chart, setChart] = useState<echarts.ECharts>();

  useEffect(() => {
    if (main.current) {
      setChart(echarts.init(main.current));
    }

    // 请求柱状图数据数据
    const getBarChartData = async () => {
      try {
        const { data } = await barChartData();
        setData(data);
      } catch (error) {}
    };
    getBarChartData();

    // 模拟定时请求
    const barTimer = setInterval(() => {
      getBarChartData();
    }, 4000);

    return () => {
      clearInterval(barTimer);
    };
  }, []);

  useEffect(() => {
    if (chart) {
      const option: ChartOption = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: data.map((item) => item.name),
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: data.map((item) => item.value * Math.random() * 100),
          },
        ],
      };
      chart.setOption(option);
    }
  }, [data]);

  return <div ref={main} className="card echarts-contain"></div>;
};

export default EchartsDemo;

2.1.2 基于2.1.1改造自定义hooks版本

1、封装 echarts 的hooks
src/hooks/useEcharts.ts

import * as echarts from "echarts";
import { useEffect, useRef } from "react";

/**
* 封装 echarts 的hooks 
* @param options 配置
* @param data 数据
* @returns 
*/
export const useEcharts = (options: echarts.EChartsOption, data: any) => {
 // 创建一个ref，用于存储echarts的div
 const echartsRef = useRef<HTMLDivElement>(null);
 // 创建一个ref，用于存储echarts实例
 const myChart = useRef<echarts.EChartsType>();

 // 创建一个函数，用于重新计算echarts的尺寸
 const handleResize = () => {
   myChart.current?.resize();
 };

 // 使用useEffect，当data发生变化时，重新设置echarts的options
 useEffect(() => {
   if (data && data.length > 0) {
     myChart.current?.setOption(options);
   }
 }, [data]);

 // 使用useEffect，当echartsRef发生变化时，初始化echarts，并设置options
 useEffect(() => {
   if (echartsRef?.current) {
     myChart.current = echarts.init(echartsRef.current);
     myChart.current.setOption(options);
   }

   // 监听窗口大小变化，重新计算echarts的尺寸
   window.addEventListener("resize", handleResize, false);
   return () => {
     window.removeEventListener("resize", handleResize);
     myChart?.current?.dispose();
   };
 }, []);

 // 返回echartsRef
 return [echartsRef];
};

export default useEcharts;

2、使用自定义 hook useEcharts
组件中：

import { useEffect, useState } from "react";
import * as echarts from "echarts";
import { barChartData } from "@/api/echarts/echartsApi";
import { ResChartData } from "@/api/types/charts.type";
import useEchart from "@/hooks/useEcharts";
import "./index.scss";

// React 使用 echarts

interface ChartOption extends echarts.EChartsOption {
  title: {
    text: string;
  };
  tooltip: {};
  xAxis: {
    data: string[];
  };
  yAxis: {};
  series: echarts.BarSeriesOption[];
}

const EchartsDemo = () => {
  const [data, setData] = useState<ResChartData>([]); // ResChartData 是自定义的返回数据格式

  useEffect(() => {
    // 请求柱状图数据
    const getBarChartData = async () => {
      try {
        const { data } = await barChartData();
        setData(data);
      } catch (error) {}
    };
    getBarChartData();

    // 定时请求
    const barTimer = setInterval(() => {
      getBarChartData();
    }, 4000);

    return () => {
      clearInterval(barTimer);
    };
  }, []);

  // echarts 配置
  const option: ChartOption = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: data.map((item) => item.name), // x 轴数据
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: data.map((item) => item.value * Math.random() * 100), // 值数据 
      },
    ],
  };
  const [echartsRef] = useEchart(option, data);

  return <div ref={echartsRef} className="card echarts-contain"></div>;
};

export default EchartsDemo;

后续补充Vue中使用~