使用v-charts设置滚动条是通过dataZoom这个属性,具体的属性配置可读echarts官网我的配置如下
dataZoom: {
show: true, // 为true 滚动条出现
realtime: true,
type: 'slider', // 有type这个属性,滚动条在最下面,也可以不行,写y:36,这表示距离顶端36px,一般就是在图上面。
height: 22, // 表示滚动条的高度,也就是粗细
start: 0, // 表示默认展示0%~100%这一段。
end: 60,
filterMode: 'none',
textStyle: {
color: 'rgba(0, 0, 0, 0)',
},
bottom: 30,
},
项目中需要切换时间,在移动滚动条后折线图错位了,读文档后将filterMode这个属性设置为了none,解决
错乱的图
正常的图