react+echarts实现图表展示的两种方法

前言：

        react+echarts实现图表展示。

1、直接用echarts的插件来实现

1）安装

npm install echarts

2）使用

1、useEffect是react中集合onload/watch监听等方法与一体的hook函数，他的第二个参数是空数组，则等同于onload，只执行一次，如果给他传入有内容的数据，则等同于watch，当参数发生改变就会实时调用数据。

2、useRef 是react中类似ref的 hook 函数，实现元素的获取

案例源码：

// 引入依赖插件
import React, { useEffect, useRef } from 'react';
import echarts from 'echarts';

// 输入js逻辑
const EchartsDemo = () => {
    // useRef = 我们的ref方法
    const chartRef = useRef(null);

    // 第二个参数为空的时候，等同于onload方法
    useEffect(() => {
        const chartDom = chartRef.current;
        
        // 传统的echarts.init+dom元素方法
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: '示例图表',
            },
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category',
                data: ['苹果', '香蕉', '橙子', '葡萄', '西瓜'],
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [100, 200, 150, 80, 90],
                },
            ],
        };
        myChart.setOption(option);


        return () => {
            myChart.dispose();
        };
    }, []);// 这里因为传入[]，所以只执行一次

    return (
        <div className="echarts-container">
            <div ref={chartRef} style={{ width: '100%', height: '400px' }} />
        </div>

    );
};

export default EchartsDemo;

1、使用useState 这个react的hook来实现变量的双休绑定，注意他的用法是两个参数，第一个是定义的变量，第二个是修改这个变量的方法，比如：

const [echartData, setData] = useState([12, 20, 15, 18, 18])

意思就是，定义了一个变量echartData ，默认值是 【12, 20, 15, 18, 18】

然后调用setData这个方法，就可以修改echartData变量的内容

2、将useEffect 的hook的第二个参数设置成echartData，那么echartData发生改变的时候，useEffect的逻辑会再次触发，实现数据监听改变逻辑

源码2

​
import React, { useEffect, useRef, useState } from 'react';
import echarts from 'echarts';

const EchartsDemo = () => {
    const chartRef = useRef(null);
    // 使用useState来修改数据
    const [echartData, setData] = useState([12, 20, 15, 18, 18]);

    useEffect(() => {
        const chartDom = chartRef.current;
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: '示例图表',
            },
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category',
                data: ['苹果', '香蕉', '橙子', '葡萄', '西瓜'],
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: data,
                },
            ],
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [echartData]);
    
    // 点击更新数据方法
    const updateData = () => {   
        // 可以在这里异步获取数据然后直接更改变量就行了
        let arr = [100, 200, 150, 80, 90]
        setData(arr);
    };


    return (
        <div className="echarts-container">
            <div ref={chartRef} style={{ width: '100%', height: '400px' }} />
            <button onClick={updateData}>更新数据</button>
        </div>
    );
};

export default EchartsDemo;

​

2、使用 echarts-for-react 插件来更好的实现

1）安装

npm install echarts echarts-for-react

2）使用

1、memo: 是一个高阶组件（Higher-Order Component，HOC），用于优化函数组件的性能。它的作用是阻止组件在父组件重新渲染时不必要的重新渲染，除非组件的 props 发生变化

2、useEffect就是onload+watch的hook函数

3、useState是定义变量，修改变量的hook函数

和第一种方法区别：

使用了ReactEChartsCore这个标签，还有像提示框，弹框等都可以单独引入，TooltipComponent, GridComponent 等等，还有canvas等

ReactEChartsCore

line/index.jsx源码：

import React, { memo, useEffect, useState } from "react";
import ReactEChartsCore from "echarts-for-react/lib/core";
import * as echarts from "echarts/core";
import { BarChart } from "echarts/charts";
import { TooltipComponent, GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);

function Line({ theme = "light", style = {}, option = {} }) {
  const [echartRef, setRef] = useState<ReactEChartsCore | null>(null);
  useEffect(() => {
    if (echartRef) {
      echartRef.getEchartsInstance().setOption(option);
    }
  }, [option]);
  return (
    <ReactEChartsCore
      key="echart"
      ref={setRef}
      echarts={echarts}
      option={option}
      theme={theme}
      style={style}
      notMerge={true}
      lazyUpdate={true}
    />
  );
}

export default memo(Line, (prev, next) => prev.option === next.option);

封装一个echarts/index.jsx来管理所有的图表，里面放个antd的loading效果

import loadable from "@loadable/component";
import { Spin } from "antd";

const loaddingCom = (
  <Spin
    style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      minHeight: 20,
      fontSize: 14,
    }}
    tip="组件加载中...."
  />
);


const Line = loadable(() => import("./line"), { fallback: loaddingCom });
export { Line};

界面中调用

// 引入echarts
import { Line as LineEchart } from "@/components/echarts";


const visitorOpt = {
    xAxis: {
        type: 'category', // 横轴类型
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 横轴数据
      },
      yAxis: {
        type: 'value' // 纵轴类型
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260], // 数据
          type: 'line' // 图表类型，折线图
        }
      ]
}
const echartStyle = {
  height: 50,
}


// 具体使用
<LineEchart option={visitorOpt} style={echartStyle} />