echarts滚动组件dataZoom解析之h5⾃定义dataZoom组件样
式
因h5页⾯需求：需要⽤柱状图展⽰⼀个季度内的数据统计情况，⽽在⼿机端，只能采⽤滚动条进⾏实现，但是echarts⾃带的滚动组件在⼿机端不是特别美观，故对其属性进⾏修改：
dataZoom: [//给x轴设置滚动条
{
type: 'slider',//slider表⽰有滑动块的，inside表⽰内置的
// startValue: 8,//可⽤于设置开始显⽰的柱⼦的长度
// endValue: 1,//可⽤于设置结束显⽰的柱⼦的长度
start: 80,//默认为0  可设置滚动条从在后进⾏展⽰
end: 100,//默认为100
show: true,
xAxisIndex: [0],
handleSize: 0,//滑动条的左右2个滑动条的⼤⼩
height: 12,//组件⾼度
left: '10%', //左边的距离
right: '10%',//右边的距离
bottom: -2,//右边的距离
borderColor: "#F4F4F4",
fillerColor: '#E7E7E7',
backgroundColor: '#F4F4F4',//两边未选中的滑动条区域的颜⾊
showDataShadow: false,//是否显⽰数据阴影默认auto
showDetail: false,//即拖拽时候是否显⽰详细数值信息默认true
realtime: true, //是否实时更新
filterMode: 'filter',
handleStyle: {
borderRadius: '20',
},
},
//下⾯这个属性是⾥⾯拖到
html横向滚动条样式{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,//默认为1
end: 100,//默认为100
moveOnMouseWheel: false,
preventDefaultMouseMove: false,
},
],
通过上述属性修改即可实现h5页⾯echarts 滚动条的样式⾃定义，效果如下:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。