How to Display DataZoomSelect as Disabled but Visible in ECharts Toolbox?

Question

I'm working with an ECharts chart and I want to configure the dataZoom option within the toolbox.feature to be visible but initially disabled. Here is the configuration snippet I am using:

toolbox = {
    feature: {
        dataZoom: {
            yAxisIndex: false,
        }
    }
}

Is there a way to achieve this in ECharts? Specifically, I want the dataZoom button to appear in the toolbox, but in a disabled state when the chart is first loaded.

Answer 1

You could display a user-defined tool without funcionality on first load and replace it with the real dataZoom tool when you want it to be ready.

Example:

option = {
  toolbox: {
    feature: {
      myDisabledZoom1: {
        title: 'disabled',
        icon: 'path://M0,13.5h26.9 M13.5,26.9V0 M32.1,13.5H58V58H13.5 V32.1',
        onclick: () => {},
        iconStyle: {borderColor: '#d1d1d1'},
        emphasis: {iconStyle: {borderColor: '#d1d1d1'}},
      },
      myDisabledZoom2: {
        title: 'disabled',
        icon: 'path://M22,1.4L9.9,13.5l12.3,12.3 M10.3,13.5H54.9v44.6 H10.3v-26',
        onclick: () => {},
        iconStyle: {borderColor: '#d1d1d1'},
        emphasis: {iconStyle: {borderColor: '#d1d1d1'}},
      },
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};


setTimeout(function() {
  myChart.setOption({toolbox: {feature: {dataZoom: {}}}}, {replaceMerge: ['toolbox']});
}, 5000);