Echarts Toolbox Testing

by YeongCY

HTML

<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
    <button id="activate" onclick="activateZoom()">Activate Zoom</button>
    <button id="zoomout" onclick="zoomOut()" style="display:none">Back</button>
    <div id="main"></div>
  </body>
</html>

CSS

#main {
  width: 600px;
  height: 400px;
  border: 1px solid red;
}

.activate {
  background-color: #4CAF50; /* Green */
  color: white;
}

JavaScript

var container = document.getElementById('main');
var chart = echarts.init(container);

var isActiveZoom = false;
var isBackState = false;
var zoomState = [];

var option = {
    xAxis: {},
    yAxis: {},
    toolbox: {
    	height: 0,
      show: true,
       feature: {
         dataZoom: {
          show: true,
          icon: {
          	zoom: 'path://', // hack to remove zoom button
            back: 'path://' // hack to remove restore button
          },
          xAxisIndex: false
        }
      }
    },
/*     brush: {
      toolbox: ['rect', 'polygon', 'keep', 'clear']
    }, */
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.20],
            [11.5, 7.20],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68]
        ],
        type: 'scatter'
    }],
    
};

//plot chart
chart.setOption(option);

//append events
chart.on('dataZoom', (params)=>{
  if (isBackState) {
    isBackState = !isBackState;
  } else {
    //record zoomState
    var batch = [];
    for (var i in params.batch) {
    	batch.push({
      	type: 'dataZoom',
        dataZoomId: params.batch[i].dataZoomId,
        startValue: params.batch[i].startValue,
        endValue: params.batch[i].endValue
      });
    }
    zoomState.push({type: 'dataZoom', batch: batch});
  }
});


function zoomOut() {
	isBackState = true;
  
  if (zoomState.length > 0) {
    	if (zoomState.length > 1) {
     ...