react+echarts实现图表展示的两种方法
前言：
react+echarts实现图表展示。
1、直接用echarts的插件来实现
1）安装
npm install echarts2）使用
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-react2）使用
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 (<ReactEChartsCorekey="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 = (<Spinstyle={{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} />