Echarts:重写toolbox的还原工具并监听click事件

Echarts中的toolbox.feature提供了部分图标，比如

saveAsImage 保存图片

restore 配置项还原

dataView 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。

dataZoom 数据区域缩放，目前只支持直角坐标系的缩放。

magicType 动态类型切换

brush 选择组件的控制按钮等。

配置代码：

toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: "none"
      },
      dataView: {
        readOnly: false
      },
      magicType: {
        type: ["line", "bar"]
      },
      restore: {},
      saveAsImage: {}
    }
  },

配置效果：

但是在开发中我需要通过监听树图的还原事件来进行其他子组件的数据联动，而restore自身没有监听点击事件的属性。因此，可以通过自定义工具按钮，来重写restore。

注意，自定义的工具名字，只能以 my 开头，例如myTool1，myTool2。

 toolbox: {
          //工具栏
          show: true,
          iconStyle: {
            borderColor: "#03ceda",
          },
          feature: {
            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: () => {
                const chart = echarts.init((this.$refs as any).faultTree);
                // 还原
                chart.clear();
                chart.setOption(option);
                // 传值
                this.$emit("init");
                console.log('click');
              },
            },
          },
        },

通过自定义工具来得到一个点击事件，在onclick箭头函数中重新绘制echarts图实现还原功能，另外还可以通过传值监听工具的点击事件。

关于工具图标的路径：

在iconfont中，选择想要的图标样式，下载svg格式，用文本编辑器打开，将path d=xxx后的拼接在"path://“”后，就得到了我们想要的图标样式。