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'

你可能感兴趣的:(ECharts,toolbox,自定义工具按钮,magicType)