echarts

Is there a way to use zoom of type 'select' without showing the toolbar?


I want to use the 'zoom cursor' from the toolbar all of the time. And then use double click for zooming out. I have implemented all of this so far succesfully. The last thing I want to do is to just hide away the toolbar because it is of no use now.

But when i put the attribute show: 'false' to either the toolbar or directly to the dataZoom feature it does not show it in the corner, but it also removes all functionality that it offers

This is my toolbox code:

    toolbox: {
      feature: {
          dataZoom: {
              yAxisIndex: false,
              title: {zoom: 'Zoom in', back: 'Zoom out'}
          },
          saveAsImage: {
              pixelRatio: 2,
              title: "Save image"
          }
      },
      show: false
    },

And this is my code for using the zoom select:

  turnOnZoom(){
    this.echart.dispatchAction({
      type: 'takeGlobalCursor',
      key: 'dataZoomSelect',
      // Activate or inactivate.
      dataZoomSelectActive: true
    });

  }

Are there any workarounds I could use to solve this dilema?


Solution

  • As a workaround, I found that the data zoom feature can receive null as an icon. You can use it to remove the icon at the top-right corner and still gain the data zoom functionally.

    toolbox: {
      feature: {
        dataZoom: {
          icon: null
        }
      }
    },