Echart自定义工具(toolbox) 修改数据后Echart没有立即变化

Preface

今天客户提出一个 在页面添加一个功能按钮, 用来切换echart图中数据显示. 的需求.
我想到 echarts 的配置项可以添加功能按钮, 就想自己来尝试解决一下(虽然任务不在我身上)

我的解决方案

翻阅官方文档配置项是有给到例子的.

要注意的是, 用户自定义的工具需要以 my 开头, 例如 myTool1 myTool2.

自定义工具 icon 属性是支持 http地址, svg… 由于是在echart 官网示例中测试, 没有测试本地文件路径的环境.

下面直接给大家看例子吧：

echarts 配置项中 toolbox 部分.

toolbox: {
   feature: {
     myShowvalue: {
       show: true,
       title: 'show num', // 自定义工具按钮标题, 鼠标移入显示
       status: true, // 我自己定义的字段, 用来标识当前切换状态.
       icon: icon1, // 这里icon我是使用的变量来保存, 当状态切换时 同时切换工具图标
       onclick: function(echart) {
         // 遍历option中series数据, 修改每一条数据中的lable属性
         echart.option.series.forEach(x => {
           Object.assign(x, { label: { show: !!!x.label.show } })
         })
         // 当前切换状态
         var status = this.model.option.status
         // this: 当前工具(myShowvalue)的配置实例等
         // 这里修改了工具的icon和标题.
         Object.assign(this.model.option, { icon: status ? icon2 : icon1, status: !status, title: status ? 'hide num' : 'show num'  })
         // 一开始修改完配置项之后, 没有立即变化, 我在 param 参数中找到了当前 echart 实例, 来进行 resize 操作, 来进行主动更新.
         echart.scheduler.ecInstance.resize()
       }
     }
   }
 }

以下分别是 自定义工具事件函数的回调参数, 和事件中 this 的指向

参数

this

注意项 (我遇到的坑)

1. 标题中写道的: 修改数据后 echart 没有立即变化

我也是投机取巧, 利用了 echart 的 resize 方法来解决.

2. 要把配置补全才能够显示自定义组件.

当我添加完 show、title、icon 属性之后, 满怀期待, 但是图标并没有出现, echart 图反倒坏掉了(如下图).
反复研究(浪费时间)几遍, 发现: 两个主要属性图标(icon), 事件函数(onclick) 是必要属性, 不能缺少.
加上之后果然正常显示了.