函数式组件写Echart

/*
 * @Author: 作者
 * @Date: 2022-07-05 17:16:05
 * @LastEditors: 最后修改人
 * @LastEditTime: 2022-07-06 14:39:27
 * @Description: 描述
 */
import React, { useState, useEffect, useRef } from 'react
import * as echarts from 'echarts';
const FirstLacp = (props) => {
  // 基于准备好的dom，初始化echarts实例
  const myLcap = useRef(null);
  const { charts } = props.data;
  const myChart = useRef(null);
  // const [myChart, setMyChart] = useState();
  //useState的Set方法实际上是覆盖掉以前的数据  ，所以选择用useref存储，这样的话没有覆盖一说，更好理解。

  useEffect(() => {

      myChart.current = echarts.init(myLcap.current);
    }
  }, []);
//写两个useEffect有先后顺序。满足先创建Echart后再调用Echart中的方法控制样式和数据
  useEffect(() => {
//判断数据是否已经传过来 避免第一次初始化时。数据为空 下列方法获取不到对应参数而报错
    if (charts) {
      var color = ['rgba(23, 255, 243', 'rgba(119,61,190'];
      var lineY = [];
      for (var i = 0; i < charts.names.length; i++) {
        var x = i;
        if (x > color.length - 1) {
          x = color.length - 1;
        }
        var data = {
          name: charts.names[i],
          type: 'line',
          color: color[x] + ')',
          smooth: true,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: color[x] + ', 0.3)',
                  },
                  {
                    offset: 0.8,
                    color: color[x] + ', 0)',
                  },
                ],
                false,
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10,
            },
          },
          symbol: 'circle',
          symbolSize: 5,
          data: charts.value[i],
        };
        lineY.push(data);
      }
      // lineY[0].markLine = {
      //   silent: true,
      //   data: [
      //     {
      //       yAxis: 5,
      //     },
      //     {
      //       yAxis: 100,
      //     },
      //     {
      //       yAxis: 200,
      //     },
      //     {
      //       yAxis: 300,
      //     },
      //     {
      //       yAxis: 400,
      //     },
      //   ],
      // };
      // // 绘制图表
      myChart.current.setOption({
        backgroundColor: '#0d235e',
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: charts.names,
          textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)',
          },
          right: '4%',
        },
        grid: {
          top: '14%',
          left: '4%',
          right: '4%',
          bottom: '12%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: charts.lineX,
          axisLabel: {
            textStyle: {
              color: 'rgb(0,253,255,0.6)',
            },
            formatter: function (params) {
              return params.split(' ')[0];
            },
          },
        },
        yAxis: {
          name: charts.unit,
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: 'rgb(0,253,255,0.6)',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgb(23,255,243,0.3)',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(0,253,255,0.6)',
            },
          },
        },
        series: lineY,
      });
      setInterval(() => {
        myChart.current.setOption({
          legend: {
            selected: {
              出口: false,
              入口: false,
            },
          },
        });
        myChart.current.setOption({
          legend: {
            selected: {
              出口: true,
              入口: true,
            },
          },
        });
      }, 1000);
    }
  }, [charts]);
  return (
    <div
      ref={myLcap}
      id="lacpEchart"
      style={{
        width: '1200px',
        height: '500px',
        backgroundColor: 'white',
      }}
    ></div>
  );
};

export default FirstLacp;

 

优化完毕的函数式echart组件

/*
 * @Author: 作者
 * @Date: 2022-07-05 17:16:05
 * @LastEditors: 最后修改人
 * @LastEditTime: 2022-07-07 09:20:06
 * @Description: 描述
 */
import React, { useEffect, useRef, useMemo } from 'react';
import * as echarts from 'echarts';
const FirstLacp = (props) => {
  // 基于准备好的dom，初始化echarts实例
  const myLcap = useRef(null);
  const { data } = props;
  const myChart = useRef(null);

  useEffect(() => {
    if (myLcap.current) {
      myChart.current = echarts.init(myLcap.current);
    }
  }, []);

  const lineY = useMemo(() => {
    var color = ['rgba(23, 255, 243', 'rgba(119,61,190'];
    //如果data有值则执行&&后面的   如果data为空则不执行
    return (
      data.value &&
      data.value.map((item, index) => {
        return {
          name: item.name,
          type: 'line',
          color: color[index] + ')',
          smooth: true,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: color[index] + ', 0.3)',
                  },
                  {
                    offset: 0.8,
                    color: color[index] + ', 0)',
                  },
                ],
                false,
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10,
            },
          },
          symbol: 'circle',
          symbolSize: 5,
          data: item.data,
        };
      })
    );
  }, [data]);
  useEffect(() => {
    console.log('%%%%%%', data);
    if (data.length != 0) {
      myChart.current.setOption({
        backgroundColor: '#0d235e',
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: '',
          textStyle: {
            fontSize: 12,
            color: 'rgb(0,253,255,0.6)',
          },
          right: '4%',
        },
        grid: {
          top: '14%',
          left: '4%',
          right: '4%',
          bottom: '12%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.lineX,
          axisLabel: {
            textStyle: {
              color: 'rgb(0,253,255,0.6)',
            },
            formatter: function (params) {
              return params.split(' ')[0];
            },
          },
        },
        yAxis: {
          name: data.unit,
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: 'rgb(0,253,255,0.6)',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgb(23,255,243,0.3)',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(0,253,255,0.6)',
            },
          },
        },
        series: lineY,
      });
    }
  }, [data]);
  return (
    <div
      ref={myLcap}
      id="lacpEchart"
      style={{
        width: '1200px',
        height: '500px',
        backgroundColor: 'white',
      }}
    ></div>
  );
};

export default FirstLacp;