echarts在画布外自定义legend，控制图表

先定义按钮控制的变量 

  const [isvalue, setIsValue] = useState(true);
  const [isevent, setIsevent] = useState(true);

在画布外层自定义dom 

  <DataBox
            zhTitle="重点资源库预警走势"
            enTitle="BASE EVENT LIST"
            style={{ height: '30%' }}
            type="long"
          >
            <Chart {...rawTimeDistribute} height="80%"></Chart>
            <div className={styles.chartbtnbox}>
              <div className={styles.chartsBtn} onClick={() => setIsevent(!isevent)}>
                <span
                  className={styles.chartsreact}
                  style={{
                    background: isevent ? 'rgba(244, 207, 0, 1)' : '#cacdd3',
                  }}
                ></span>{' '}
                现有重点资源库预警走势
              </div>
              <div className={styles.chartsBtn} onClick={() => setIsValue(!isvalue)}>
                <span
                  className={styles.chartsreact}
                  style={{
                    background: isvalue ? 'rgba(0, 231, 147, 1)' : '#cacdd3',
                  }}
                ></span>
                新增重点资源库预警走势
              </div>
            </div>
          </DataBox>

控制chats数据

const getRawTimeDistributeData = async () => {
    const { data } = await getRawTimeDistribute(param);

    let xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    let ydata = [120, 132, 101, 134, 90, 230, 210];
    let gdata = [220, 182, 191, 234, 290, 330, 310];

    const orgData = { ...originalTimeConfig };
    // orgData.data = data;
    orgData.option.xAxis.data = xdata;
    orgData.option.series[0].data = isevent ? ydata : [];
    orgData.option.series[1].data = isvalue ? gdata : [];
    console.log(orgData, data);
    setRawTimeDistribute({ ...orgData });
  };
  useEffect(() => {
    getRawTimeDistributeData();
  }, [isvalue, isevent]);