实现效果：柱形图展示水平滚动条，并且鼠标滚动支持让滚动条平移
echarts文档里，图形的滚动条分两种
内置型 （效果是： 鼠标在图中点击拖动平移，在图中滚动缩放）滚动条型 （效果是：鼠标拖动滚动条平移，鼠标拖大缩小滚动条缩放）
而我们要实现的就是综合了这两种。。 既要内置型的能在图中滚动，又要滚动条的样式
实现代码
const zoomData=[ // 有滚动条 平移
{
type: 'slider',
realtime: true,
start: 0,
end: 40, // 初始展示40%
height: 4,
fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
borderColor: "rgba(17, 100, 210, 0.12)",
handleSize:0, // 两边手柄尺寸
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
top:'96%',
// zoomLock:true, // 是否只平移不缩放
// moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
// zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
},
{
type: "inside", // 支持内部鼠标滚动平移
start: 0,
end: 40,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
}
]
moveOnMouseWheel和moveOnMouseMove 记得开启，开启后滚轮往下滚数据往后移动
zoomOnMouseWheel 关闭滚轮缩放, 关闭后滚轮滚到最后不会有回弹抖动
再添加到option里即可 dataZoom: zoomData,
例子2
dataZoom: [
{
// 滚动条以及缩放
type: "inside",
// start: 0,
// end: endZoom, // 这里end跟数据有关系 数据越多，end越小 end是百分比例
startValue: 0, // 从头开始。
endValue: 6, // 最多六个
minValueSpan: 6, // 放大到最少几个
maxValueSpan: 365, // 缩小到最多几个
},
],
这里的startValue和endValue代表初始只显示七个，七组柱子 minValueSpan代表放大到最少到显示几个 maxValueSpan代表缩小到最多显示几个
例子3：
垂直方向滚动条
dataZoom=[
{
type: "inside",
startValue: 0,
endValue: 2,
minValueSpan: 2,
maxValueSpan: 2,
yAxisIndex: [0],
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
},
{
type: 'slider',
realtime: true,
startValue: 0,
endValue: 2,
width: '3.5',
height: '80%',
yAxisIndex: [0], // 控制y轴滚动
fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
borderColor: "rgba(17, 100, 210, 0.12)",
backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
handleSize:0, // 两边手柄尺寸
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
top:'1%',
right:'5',
}
]
文章来源
您阅读本篇文章共花了：
发表评论