About the scroll bar dataZoom below echarts

Due to the large amount of data, a small area cannot expand so much data, so I want to make a histogram with a selectable range

Take the official website for this case

This is the specific address of the official website:    Examples - Apache ECharts

In fact, adding a

  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 20
    },
    {
      start: 0,
      end: 20
    }
  ],

There are two types of dataZoom, one is inside, and the other is slider. The inside is used here. The inside can directly zoom the data in the histogram with the mouse. The slider cannot use the mouse to zoom the content of the histogram.

The position of the scroll bar can be set like this

       dataZoom: [
          {
            type: "slider",
            show: true,
            left: "9%",
            bottom: 24,
            start: 0,
            end: 20, //初始化滚动条
          },
        ],

I actually just want to adjust the position of the scroll bar, this is my rendering

 Because the slider is used, it can only be realized by manually dragging the two sides

If using inside,

       dataZoom: [
          {
            type: "inside",
            show: true,
            // xAxisIndex: [0],
            left: "9%",
            bottom: 24,
            start: 0,
            end: 20, //初始化滚动条
          },
        ],

If you write this way, there will be no scroll bars.

 to write like this

        dataZoom: [
          {
            type: "inside",
            show: true,
            // xAxisIndex: [0],
            left: "9%",
            bottom: 24,
            start: 0,
            end: 20, //初始化滚动条
          },
          {
            start: 0,
            end: 20, //初始化滚动条
          },
        ],

 Now it is a very flexible picture, which can be dragged and stretched with the mouse~