echarts中toolbox位置_ECharts自定义toolbox中增加自定义按钮

本文介绍如何在ECharts的ToolBox中添加自定义按钮,并提供了详细的实现步骤和代码示例,包括设置按钮的显示、文字、图标以及点击事件处理,帮助开发者扩展图表功能。
摘要由CSDN通过智能技术生成

今天想能不能在ECharts中的ToolBox增加自己的按钮,然后读了一下ToolBox代码,自己试了试,验证是可以的。

1、效果图

infodetail-759653.html

图片中红色框起来的按钮

2、代码

selfButtons:{//自定义按钮 danielinbiti,这里增加,selfbuttons可以随便取名字

show:true,//是否显示

title:'自定义', //鼠标移动上去显示的文字

icon:'test.png', //图标

option:{},

onclick:function(option1) {//点击事件,这里的option1是chart的option信息

alert('1');//这里可以加入自己的处理代码,切换不同的图形

}

}当然,内置了很多图标,这些图标都是画出来的。

iconLibrary: {

mark: _iconMark,

markUndo: _iconMarkUndo,

markClear: _iconMarkClear,

dataZoom: _iconDataZoom,

dataZoomReset: _iconDataZoomReset,

restore: _iconRestore,

lineChart: _iconLineChart,

barChart: _iconBar

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值