ECharts自定义toolbox中增加自定义按钮

本文介绍如何在ECharts的ToolBox中自定义按钮。通过阅读源码并实践,验证可以成功添加。文章展示了实现自定义按钮的效果图和相关代码,包括在toolbox中的配置方法。

今天想能不能在ECharts中的ToolBox增加自己的按钮,然后读了一下ToolBox代码,自己试了试,验证是可以的。

1、效果图


图片中红色框起来的按钮

2、代码

selfButtons:{//自定义按钮 danielinbiti,这里增加,selfbuttons可以随便取名字
                   show:true,//是否显示
                   title:'自定义', //鼠标移动上去显示的文字
                   icon:'test.png', //图标
                   option:{},
                   onclick:function(option1) {//点击事件,这里的option1是chart的option信息
                         alert('1');//这里可以加入自己的处理代码,切换不同的图形
                         }
                    }

在toolbox中的位置

toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            selfButtons:{//自定义按钮 danielinbiti,这里增加,selfbuttons可以随便取名字  
                   show:true,//是否显示  
                   title:'自定义', //鼠标移动上去显示的文字  
                   icon:'test.png', //图标  
                   option:{},  
                   onclick:function(option1) {//点击事件,这里的option1是chart的option信息  
                         alert('1');//这里可以加入自己的处理代码,切换不同的图形  
                         }  
                    },
            saveAsImage : {show: true}
        }
    }


当然,内置了很多图标,这些图标都是画出来的。

iconLibrary: {
            mark: _iconMark,
            markUndo: _iconMarkUndo,
            markClear: _iconMarkClear,
            dataZoom: _iconDataZoom,
            dataZoomReset: _iconDataZoomReset,
            restore: _iconRestore,
            lineChart: _iconLineChart,
            barChart: _iconBarChart,
            pieChart: _iconPieChart,
            funnelChart: _iconFunnelChart,
            forceChart: _iconForceChart,
            chordChart: _iconChordChart,
            stackChart: _iconStackChart,
            tiledChart: _iconTiledChart,
            dataView: _iconDataView,
            saveAsImage: _iconSave,
            cross: _iconCross,
            circle: _iconCircle,
            rectangle: _iconRectangle,
            triangle: _iconTriangle,
            diamond: _iconDiamond,
            arrow: _iconArrow,
            star: _iconStar,
            heart: _iconHeart,
            droplet: _iconDroplet,
            pin: _iconPin,
            image: _iconImage
        }

带chart后缀的都放在magicType的type中,同时后缀chart不用,程序里会自动拼接,比如lineChart,写'line'

评论 29
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值