第一步：绘图

1、给定一个容器main
2、基于准备好的dom，初始化echarts实例(init)
3、绘制图表

//简略版 官网cv
//下载echarts
import * as echarts from 'echarts';
function index (){
    useEffect(()=>{
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          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'
            }
          ]
        };

        option && myChart.setOption(option);
    }
    ......
    return <div id="main" ref={chartRef}><div>
},[])

第二步 优化自适应

1、创建resize事件
2、监听echartsResize函数
3、销毁监听

 const chartRef = useRef();
// 创建一个resize事件
  const echartsResize = () => {
    echarts.init(chartRef.current).resize();
  };

  // 监听echartsResize函数，实现图表自适应
  window.addEventListener('resize', echartsResize);

  // 页面卸载，销毁监听
  useEffect(() => () => {
    window.removeEventListener('resize', echartsResize);
  }, []);
  
      //这里需要改变
      const myChart = echarts.init(chartRef.current,

本文纯粹是为了记录，如有问题欢迎指出