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