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: '最高点'
            }]
          ]
        }
      }
    ]
  };
  // setoption
  var 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());
          },
        },
      }
    },