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

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

错乱的图

正常的图