ECharts自定義toolbox中增加自定義按鈕
阿新 • • 發佈:2019-02-18
今天想能不能在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'