美文网首页
echarts 添加滚动条配置

echarts 添加滚动条配置

作者: 南土酱 | 来源:发表于2023-09-25 14:58 被阅读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轴的数组数据的长度来动态计算。

    相关文章

      网友评论

          本文标题:echarts 添加滚动条配置

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