echarts中toolbox的自定义工具 | 练习没满两年半的狒狒

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

效果

参考代码

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 更新数据。

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

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

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

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

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

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

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

推荐文章

非常酷的莴苣 · echarts中toolbox的自定义工具 | 练习没满两年半的狒狒

14 小时前

飘逸的黄瓜 · 事件与行为 - 概念篇 - 使用手册 - Apache ECharts

14 小时前

霸气的烈马 · Polar Area Chart | Chart.js

6 天前

冷静的山羊 · Does CPU Usage correlates with Firmware version - groov EPIC - OptoForums

6 天前

小眼睛的电梯 · QT的chart中怎样删除旧的series添加新的series - CSDN文库

1 周前

帅气的松球 · 北森校园招聘人才测评工具方法有哪些可以助力校招成功_人才测评 - 北森HRSaaS

1 周前

玩篮球的火锅 · ERROR @wdio/utils:shim: HTTPError: Response code 404 (Not Found) · Issue #5687 · webdriverio/webdriv

4 周前

豪情万千的小蝌蚪 · LdapConnection Class (System.DirectoryServices.Protocols) | Microsoft Learn

2 月前

才高八斗的香蕉 · 在RecycleView无法复用的问题太严重了,导致我们项目严重被耽误,求高手给在RecycleView使用的思路,java的 · Issue #320 · svga/SVGAPlayer-Andro

2 月前

暴走的钥匙 · 【区经委】提案答复丨加强统筹调研，推进智能工厂建设，形成新质生产力——区经委积极回应政协委员建议意见

2 月前