javascriptecharts

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


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.


Solution

  • 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);