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

 //设置可以滚动
          dataZoom: [
            {
              type: 'inside',
              start: this.startLength,
              end: 100
            },
            {moveOnMouseWheel: false,}
          ],

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

 //判断数据量，进行不同滚动条的设置
        if (this.chartAllData.Measures.length > 50) {
          this.startLength = 100 - (25/this.chartAllData.Measures.length * 100)
        } else {
          this.startLength = 0;
        }

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

 //设置可以滚动
          dataZoom: [
            {
              type: 'inside',
              start: this.startLength,
              end: 100,
              filterMode: 'empty'
            },
            {moveOnMouseWheel: false,}
          ],

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