echarts 添加滚动条配置
2023-09-25 本文已影响0人
南土酱
与xAxis 配置同级 写这样一个配置
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0],
startValue:0,
left: '14%', //滚动条靠左侧的百分比
right:'8%',
bottom: 0,
start: 0,//滚动条的起始位置
end: 90, //滚动条的截止位置(按比例分割你的柱状图x轴长度)
fillerColor: '#6B7388', //滑块的颜色
backgroundColor: '#2B3755', // 滑块轨道的颜色
borderColor: 'transparent', // 滑块轨道边框的颜色
height: 8, // 滑块高度
handleSize: '80%',
handleIcon: 'path://M512,500m-430,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
handleStyle: {
borderWidth: 0,
color: '#6B7388',
},
zoomLock: true,
zoomOnMouseWheel: false,
brushSelect: false,
showDetail: false,
showDataShadow: false
}],
关键是end 这个值,因为他是按比例分割图表来计算 滚动条的。
自己得根据 后端的数据,也就是 x轴的数组数据的长度来动态计算。