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

来源：互联网发布：极致物业软件编辑：程序博客网时间：2024/05/29 04:30

今天想能不能在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'

1 1