美文网首页
关于echarts 使用 dataZoom 中动态配置 star

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

作者: 朋_朋 | 来源:发表于2019-08-12 17:29 被阅读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即可解决该问题

    相关文章

      网友评论

          本文标题:关于echarts 使用 dataZoom 中动态配置 star

          本文链接:https://www.haomeiwen.com/subject/fxtpjctx.html