React中使用Echarts图表

1.使用Echarts先安装包，从npm获取

npm install echarts

2.安装完成后在需要使用的项目文件中引入

import * as echarts from "echarts";

3.为组件定义一个状态变量 chart，用于存储和管理图表实例

const [chart, setChart] = useState<any>(null) // 图表实例

注意：所展示的图表元素需要加宽高，否则图表不显示

<div ref={chartRef} style={{ width: "500px", height: "350px" }}></div>

配置属性值和数据值

//属性值
const option = {
	title: {
	    text: "ECharts图标参数",
	},
    legend: {},
    tooltip: {},
    dataset: {
        // // 提供一份数据。
        source: chart,
    },
    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: {
        type: 'category',
    },
    // 声明一个 Y 轴，数值轴。
    yAxis: {},
    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [
        {
            type: 'bar',
            itemStyle: {
                color: 'rgb( 80,135,236)',
            },
        },
        {
            type: 'bar',
            itemStyle: {
                color: 'rgb( 104,187,196)',
            },
        },
    ],
}

//数据
const dataArray = {
	{time: '2024-10-30', usernum: 0, gamenum: 0}
	{time: '2024-10-31', usernum: 0, gamenum: 0}
	{time: '2024-11-01', usernum: 3, gamenum: 2}
	{time: '2024-11-02', usernum: 0, gamenum: 0}
}
//unshift 是一个 JavaScript 数组的方法，用于在数组的开头添加一个或多个元素，并返回新数组的长度。
dataArray.unshift([
    'product',
    '用户数',
    '游戏次数',
])
setChart(dataArray) // 确保 chart 状态被更新

使用，在挂载阶段渲染，关闭页面后销毁，以免内存泄漏

useEffect(() => {
  // 挂载阶段， 图表初始化生成图表实例对象
  const myChart = echarts.init(chartRef.current);
  //使用图表参数完成图表的渲染
  myChart.setOption(optionData);

  // 销毁
  return () => {
    myChart.dispose();
  };
}, [myChart]);