2023年6月20日发(作者：)
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', }, }, //下⾯这个属性是⾥⾯拖到 { type: 'inside', show: true, xAxisIndex: [0], start: 0,//默认为1 end: 100,//默认为100 moveOnMouseWheel: false, preventDefaultMouseMove: false, }, ],通过上述属性修改即可实现h5页⾯echarts 滚动条的样式⾃定义，效果如下:
2023年6月20日发(作者：)
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', }, }, //下⾯这个属性是⾥⾯拖到 { type: 'inside', show: true, xAxisIndex: [0], start: 0,//默认为1 end: 100,//默认为100 moveOnMouseWheel: false, preventDefaultMouseMove: false, }, ],通过上述属性修改即可实现h5页⾯echarts 滚动条的样式⾃定义，效果如下:
发布评论