react使用echarts自定义还原事件

思路：

1.点击还原按钮的时候，对现有的echars进行清楚操作；

2.再将新的options配置数据放入图标里，

3.将自定义的图例按钮的状态更新为true（图例并没有跟echars图在一个容器里）

代码解释如下：

 yearLegendList: [
    {name: '收藏量', checked: true},
    {name: '下载量', checked: true},
  ],

const options = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            toolbox: {
                // ...config.toolbox,
                feature: {
                    magicType: {
                        ...config.magicType,
                        option: {
                            line: {
                                stack: ''
                            }
                        }
                    },
                    // restore: {
                    //     title: '还原', show: false,
                    //     onclick: () => {
                    //         // ...点击执行相应的代码
                    //         console.log(123123123)
                    //     },
                    // },
                    myTool1: {
                        show: true,
                        title: "还原",
                        icon:
                            "path://M512 981.333333c-209.866667 0-396.693333-126.026667-466.293333-314.08a35.52 35.52 0 0 1 23.626666-44.426666 38.613333 38.613333 0 0 1 48 20.693333c58.666667 158.933333 217.013333 265.493333 394.666667 265.6s336-106.666667 394.666667-266.133333a37.6 37.6 0 0 1 28.853333-23.626667 38.986667 38.986667 0 0 1 35.786667 11.946667 34.773333 34.773333 0 0 1 7.146666 35.36c-69.386667 188.373333-256.48 314.666667-466.453333 314.666666z m431.36-574.08a37.92 37.92 0 0 1-35.946667-24.266666C849.386667 222.56 690.613333 114.88 512 114.72S174.72 222.346667 116.746667 382.773333A38.72 38.72 0 0 1 69.333333 403.733333a35.786667 35.786667 0 0 1-24.106666-44.373333C113.333333 169.866667 301.013333 42.666667 512 42.666667s398.666667 127.306667 467.146667 316.96a34.56 34.56 0 0 1-4.906667 32.64 38.933333 38.933333 0 0 1-30.88 14.986666z",
                        onclick: () => {
                            this.echartsRestore()

                        },
                    },
                    saveAsImage: {
                        title: '保存为图片',
                        backgroundColor: 'rgba(0,0,0,0)',
                        pixelRatio: 5,
                        name: new Date().getTime(),
                        show: true,
                    },
                    // ...config.toolbox.feature,
                }
            },
            legend: {
                show: false,
                data: ['收藏量', '下载量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xData
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    minInterval: 1
                }
            ],
            series: [
                {
                    name: '访问量',
                    type: 'bar',
                    stack: 'one',
                    data: yData1,
                    barWidth: 20,
                    itemStyle: {
                        color: '#73A0FA'
                    },
                    label: {
                        show: true,
                        formatter: '{c}',
                        position: 'top'
                    },
                },
                {
                    name: '下载量',
                    type: 'bar',
                    stack: 'Total',
                    data: yData2,
                    barWidth: 20,
                    itemStyle: {
                        color: '#EB940A'
                    },
                    label: {
                        show: true,
                        formatter: '{c}',
                        position: 'top'
                    },
                }
            ]
        }
        this.setState({yearOptions: options})
        this.initCommonEChart('yearDataChart', options);

还原触发的事件

 echartsRestore() {
        let {yearLegendList, yearOptions} = this.state;
        let data = []
        for (const list of yearLegendList) {
            data.push({name: list.name, checked: true})
        }
        this.setState({yearLegendList: data})
        const chart = init(document.getElementById("yearDataChart"));
        // 还原
        chart.clear();
        chart.setOption(yearOptions);
    }

  <div className="charts_box">  <div className="charts" id="yearDataChart"/>  </div>