echarts中toolbox的自定义工具

发表于 | 更新于

做excel2echarts项目的时候遇到的一个问题，当时还困扰了我好久都没做出满意的效果，最后在师傅的指点下顺利地完成了,也参考了挺多资料，所以记录一下。

效果

最后实现的效果是这样的，点击按钮能切换label的显示与隐藏状态：
image

参考代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
toolbox: {
    feature: {
        dataView: {show: true, readOnly: false},
        restore: {show: true},
        saveAsImage: {show: true},
        myTool1: {
            show: true,
            title: '标签显示',
            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
            onclick: function(a, obj) {
                var op = obj.getOption();

                var tmpSerise = [];
                for (var i = 0; i < op.series.length; i++) {
                    op.series[i].label.show = !op.series[i].label.show;
                    op.series[i].labelLine.show = !op.series[i].labelLine.show;
                    tmpSerise.push(op.series[i]);
                }
                that.chart.setOption({
                    series:tmpSerise
                });
            }

        },
    }
},

解析

echarts配置详情参考官方文档，此处就不再赘述
toolbox.feature中的前几项：dataView，saveAsImage等都是官方自带的工具，只要设置其属性为show:true即可使用。

自定义工具必须以my开头，这里我定义为myTool1。

工具内函数onclick触发setOption,将echarts图表的option.series[i].label.show，也就是所有数据的标签取反，从而实现显示隐藏标签。

但问题来了，我的echarts图表当初声明的时候为了调用方便，使用的写法是这样的：

1
this.chart = echarts.init(document.getElementById(this.id))

我将echarts赋值给了vue全局的chart属性，在外边都是直接通过this.chart直接访问的，而toolbox里的函数调用this的话是指向toolbox
内部的（具体是哪个我忘了），获取不到整个chart，无法实现setoption更新数据。

这咋整呢，我第一反应是找方法能让子函数获取到父函数属性，折腾了半天都没成功（也不知道为啥）。
image

另一种方法是onclick不触发函数，直接写个箭头函数，手动把this.chart的里面所有的series的label.show属性全取反，但这样写出来的代码又臭又长，而且变通性差，数据series个数不一样就会报错。

最后还是老老实实去请教了师傅，师傅拉开控制台一顿输出，看了下onclick接收的参数居然有4个（我好蠢）
image

而其中的第二个参数是api列表，其中的getOption可以直接获取到chart的option，
image

然后再在声明echarts的代码下加一句：

1
2
this.chart = echarts.init(document.getElementById(this.id))
                   var that = this;

这样就可以在onclick函数中使用that.chart.setOption来更新chart图表的option啦~真是简单呢（爪巴