关于echarts 使用 dataZoom 中动态配置 star

2019-08-12  本文已影响0人  朋_朋

项目中使用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即可解决该问题

上一篇下一篇

猜你喜欢

热点阅读