echarts 添加滚动条配置

2023-09-25  本文已影响0人  南土酱

与xAxis 配置同级 写这样一个配置

 dataZoom: [{
      type: 'slider',
      show: true, 
      xAxisIndex: [0],
      startValue:0,
      left: '14%', //滚动条靠左侧的百分比
      right:'8%',
      bottom: 0,
      start: 0,//滚动条的起始位置
      end: 90, //滚动条的截止位置(按比例分割你的柱状图x轴长度)
      fillerColor: '#6B7388', //滑块的颜色
      backgroundColor: '#2B3755',  // 滑块轨道的颜色
      borderColor: 'transparent', // 滑块轨道边框的颜色
      height: 8,   // 滑块高度
      handleSize: '80%',
      handleIcon: 'path://M512,500m-430,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
      handleStyle: {
        borderWidth: 0,
        color: '#6B7388',
      },
      zoomLock: true,
      zoomOnMouseWheel: false,
      brushSelect: false,
      showDetail: false,
      showDataShadow: false
    }],

关键是end 这个值,因为他是按比例分割图表来计算 滚动条的。
自己得根据 后端的数据,也就是 x轴的数组数据的长度来动态计算。

上一篇下一篇

猜你喜欢

热点阅读