关于echarts 使用 dataZoom 中动态配置 start、end 值出现折线图错乱问题

项目中使用echarts进行图表的展示，当数据量很大的时候，需要配置dataZoom进行图表可滚动，但是数据都挤在一起，严重影响了图表的美观性，所以动态配置dataZoom的start 、 end属性

在图表option设置前，进行计算startLength的值

这种设置，在数据动态切换时，随着this.startLength的变化，会出现折线图发生部分连接错乱问题，后发现解决方法如下：

添加filterMode属性为 empty即可解决该问题

1 .概览数据整体，按需关注数据细节是数据可视化的基本交互需求

2 .dataZoom组件能够在直角坐标系和极坐标系中实现这一功能

3 .运行原理是通过数据过滤和窗口缩放来实现这一效果的

4 .数据窗口范围的设置，目前支持两种模式

let option = {} //你的echarts图表的配置，这里我就不贴我的了

myChart.setOption(option)

//开始

let startValue = myChart.getModel().option.dataZoom[0].startValue

let endValue = myChart.getModel().option.dataZoom[0].endValue

let start = myChart.getModel().option.xAxis[0].data[startValue]//起始X轴

let end = myChart.getModel().option.xAxis[0].data[endValue]//结束X轴

console.log("开始值="+start)

console.log("结束值="+end)

//拖拽滚动条的获取X轴的范围值，使用方法如下：

myChart.on('dataZoom', function (params) {

       //开始

       let startValue = myChart.getModel().option.dataZoom[0].startValue

       let endValue = myChart.getModel().option.dataZoom[0].endValue

       thes.startText = myChart.getModel().option.xAxis[0].data[startValue]//起始X轴

       thes.endText = myChart.getModel().option.xAxis[0].data[endValue]//结束X轴

})

图表效果：

---