v-charts折线图加滚动条(dataZoom)遇见的坑

1,602 阅读1分钟

使用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,解决

错乱的图

正常的图