1.下载echarts

npm i echarts --save

2.react中引入echats

import * as echarts from 'echarts';

3.数据以及绑定dom节点

useEffect(() => {
    // 在组件挂载后初始化echarts，并绑定到容器元素
    const chart = echarts.init(document.getElementById('chart-container'));

    // 定义图表的配置项和数据
    const option = {
      title: {
        text: '柱状图示例',
      },
      tooltip: {},
      xAxis: {
        data: ['苹果', '香蕉', '橙子', '梨子', '葡萄'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10],
        },
      ],
    };

    // 使用配置项和数据绘制图表
    chart.setOption(option);

    // 在组件卸载前销毁图表
    return () => {
      chart.dispose();
    };
  }, []);

4.效果展示