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中增加自定义按钮相关推荐

android 实现自定义监听接口,Android在自定义类中实现自定义监听器方式
Android在自定义类中实现自定义监听器方式发布时间:2020-08-31 06:19:39 来源:脚本之家阅读:203 作者:Simon_Qi 监听器可以说是Android开发中最常用的东西之 ...
C语言：自定义函数中调用自定义函数的方法
自定义函数中调用自定义函数在我们编写C语言程序时,可以将要经常用到的或者有自己单独作用的那一部分代码独立成一个函数,不仅可以简化我们的程序,还可以使我们的程序更加可见话. 正文阿巴阿巴方法一:直接 ...
【SharePoint】SharePoint自定义页面中使用自定义母版页
前言 SharePoint自定义页面中使用自定义母版页详细步骤 1.新建自定义母版页:把母版页seattle.master复制一份,修改为自己所需的名字,如portalmmcustom.master ...
在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
SD--如何在输出控制中增加自定义字段
在sap的输出控制中,我们有时需要增加系统未定义的字段作为条件表的字段,为了实现该需求我们就需要修改增强. 输出控制用到的通讯结构 KOMKBK1 (Output Determination Comm ...
ListView自定义视图中对Button按钮实现仅允许一个按钮处于开启状态
2019独角兽企业重金招聘Python工程师标准>>> Android项目迭代,之前使用下拉框Spinner被替换成ListView,相应的实现也比之前更加复杂了,根据美工给出的界面 ...
ros自定义service消息.srv文件中增加自定义.msg消息
先制作msg文件 1. 在disinfect_msg包下创建 :testInfo.msg 文件 int32 Id string TargetName string X string Y string ...
layui 自定义request_layui中使用自定义数据格式对数据表格进行渲染
1.引入 2.页面代码编辑删除 layui.use('table', function(){ var table = layui.table; table.render({ elem: '[lay ...
自定义_Excel中的自定义函数（自定义函数的基础内容）
各位朋友,你们好. 最近和网友沟通交流Excel问题,好些问题都没法直接实现,因此用了很多自定义函数,也给头条里的朋友写过几个自定义函数(比如颜色计算的函数.提取不重复内容的函数.汉字转拼音的函数-- ...

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

ECharts自定义toolbox中增加自定义按钮相关推荐

最新文章

热门文章