echarts工具栏增加自定义按钮显示隐藏其他按钮(更多操作)

项目中遇到一个需求，要求再echarts toolbox工具栏增加自定义按钮来隐藏显示其他按钮，因为此部分资料较少，耗了不少时间，这里分享给大家。

效果图：

其实关键的就是改变按钮属性后要重新渲染一次图表，否则是不会生效。

下面是代码：

// html中存放图表id
<div class="container"><div id="userTime" />
</div>

$(document).ready(function () {var option = {title: {text: '未来一周气温变化',subtext: '纯属虚构'},tooltip: {trigger: 'axis'},legend: {data: ['最高气温', '最低气温']},toolbox: {show: true,feature: {dataView: {readOnly: false,show: false,},restore: {show: false,},saveAsImage: {show: false,},myMore: {show: true,title: '更多',icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',onclick: (e) => {if (e.option.toolbox[0].feature.restore.show === true) {e.option.toolbox[0].feature.restore.show = false;e.option.toolbox[0].feature.saveAsImage.show = false;e.option.toolbox[0].feature.dataView.show = false;} else if (e.option.toolbox[0].feature.restore.show === false) {e.option.toolbox[0].feature.restore.show = true;e.option.toolbox[0].feature.saveAsImage.show = true;e.option.toolbox[0].feature.dataView.show = true;}// 重新渲染，必须词步骤，否则无效果var echartsItem = echarts.init(document.getElementById('userTime'));echartsItem.setOption(e.getOption());},},}},xAxis: {type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {type: 'value',axisLabel: {formatter: '{value} °C'}},series: [{name: '最高气温',type: 'line',data: [11, 11, 15, 13, 12, 13, 10],markPoint: {data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }]},markLine: {data: [{ type: 'average', name: '平均值' }]}},{name: '最低气温',type: 'line',data: [1, -2, 2, 5, 3, 2, 0],markPoint: {data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]},markLine: {data: [{ type: 'average', name: '平均值' },[{symbol: 'none',x: '90%',yAxis: 'max'}, {symbol: 'circle',label: {normal: {position: 'start',formatter: '最大值'}},type: 'max',name: '最高点'}]]}}]};// setoptionvar echartsItem = echarts.init(document.getElementById('userTime'));echartsItem.setOption(option);
});

大家有更好的想法希望分享分享！

补充： dataZoom类型的按钮通过改变show属性来实现显示隐藏会报错，具体原因不知道，可设置dataZoomopacity属性来实现显示隐藏：

toolbox: {show: true,feature: {dataZoom: {show: true,iconStyle: {opacity: 0,},},myFull: {show: true,title: '更多',icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',onclick: (e) => {if (e.option.toolbox[0].feature.dataZoom.iconStyle.opacity === 1) {e.option.toolbox[0].feature.dataZoom.iconStyle.opacity = 0;} else if (e.option.toolbox[0].feature.dataZoom.iconStyle.opacity === 0) {e.option.toolbox[0].feature.dataZoom.iconStyle.opacity = 1;}console.log(e.option);// 重新渲染，必须词步骤，否则无效果var echartsItem = echarts.init(document.getElementById('userTime'));echartsItem.setOption(e.getOption());},},}},

echarts工具栏增加自定义按钮显示隐藏其他按钮(更多操作)相关推荐

Eclipse自定义设置显示隐藏工具栏toolbar
Eclipse通过此方法可以自定义设置显示隐藏工具栏toolbar. 具体案例如下: 在Java Perspective界面解决消失的debug工具栏: 打开Window ->Customize ...
php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
jQuery能够简单快捷的实现很多功能,因此在前端开发中被广泛使用,正在学习jQuery的小伙伴,你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)?这篇文章就和大家讲讲 ...
SAP Fiori Lead应用中Accept按钮显示隐藏的逻辑
SAP Fiori应用里有的细节,有时候有点让人疑惑. 比如有的Lead明细页面打开之后, footerbar区域只有Edit和Followup两个按钮: 而有的Lead页面, 同样位置的区域,有Ac ...
Echarts工具栏（自定义按钮）
toolbox: { // 工具箱show: false,feature: {myTool1: { //必须要my开头show: true,title: '全市',iconStyle: {border ...
点击按钮显示隐藏的表格
需求描述:进入页面的时候,点击添加按钮,已添加列表才展示出来解决思路:对添加按钮加个监听,改变列表隐藏为显示代码: //html代码<div class="row" id ...
原生js实现点击按钮显示/隐藏图片
目录结构: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
jqgrid控制多选按钮显示隐藏
function setOptBtn(){ var ids = jQuery(grid_selector).jqGrid('getDataIDs'); var mbe ='', mse ...
SystemUI导航键显示隐藏某个按钮（Recent Home Back)
SystemUI导航键控制显示流程: 导航键控制显示流程
微信小程序复杂条件判断按钮显示隐藏
背景概述: 第二个和第三个view根据条件判断显示,第一个view根据条件判断是否在任一页面显示. <view class="root"><view wx:if= ...

echarts工具栏增加自定义按钮显示隐藏其他按钮(更多操作)

echarts工具栏增加自定义按钮显示隐藏其他按钮(更多操作)相关推荐

最新文章

热门文章