Echarts提供了鼠标控制滚动以及自动滚动的功能。
对于鼠标控制滚动,可以使用Echarts的toolbox组件来实现。首先需要在option中配置toolbox组件:
option = {
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none' // 鼠标控制滚动时只控制x轴
}
}
},
dataZoom: [
//滑动条
{
xAxisIndex: 0, //这里是从X轴的0刻度开始
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 2, // 一次性展示几个。
show: false, //是否显示滑动条,不影响使用
brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
},
{
type: "inside",
xAxisIndex: 0,
zoomOnMouseWheel: false, //滚轮是否触发缩放
moveOnMouseMove: true, //鼠标滚轮触发滚动
moveOnMouseWheel: true,
},
],
...
};
在上述配置中,我们将too