echarts 类目轴设置滚动效果

场景:图形X轴数据过长

效果:拖动滚动效果

设置 dataZoom

dataZoom: [{
          show: true,
          type: 'slider',
          start: 0,
          end: 100,
          textStyle: {
            fontSize: px2px(22),
            'color': '#71768C'
          }
        }]

记载数据时设置

1  if (this.labelData.length > 12) {
2         option.dataZoom[0].show = true
3         option.dataZoom[0].end = 10 * 100 / this.labelData.length 
4 // 10条数据的比例显示, end有百分比设置效果
5      
6       } else {
7         option.dataZoom[0].show = false
8       }
9 // labelData是x轴数据
View Code

效果

另外

1、设置滚动条的高度

直接设置height即可,官网没这个属性

2、设置滚动但不缩放

 zoomLock  = true

 

posted @ 2021-03-23 10:16  树叶铃铛  阅读(701)  评论(0编辑  收藏  举报