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~