1. 程式人生 > >ECharts自定義toolbox中增加自定義按鈕

ECharts自定義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'