页面树结构
转至元数据结尾
转至元数据起始

(本文档仅供参考)

问题1:

          滚动条的数据背景色是否可以调整?

解决方案

         参考如下扩展属性 V11版本,echarts5.1.2版本验证有效

option = {
  dataZoom: [{
    type: 'slider',
    showDetail: false,
    show: true,
    yAxisIndex: [0, 1, 2, 3],
    startValue: 40,
    endValue: 54,
    handleSize: 11,
    height: '400px',
    width: '30px',
    backgroundColor: 'transparent', // 设置背景颜色为透明
    fillerColor: '#ddd', // 设置填充颜色
    // 设置 dataBackground 样式
    dataBackground: {
      lineStyle: {
        color: 'transparent', // 设置数据背景线条颜色为透明
        width: 1, // 线条宽度
        type: 'solid' // 线条类型
      },
      areaStyle: {
        color: 'transparent', // 设置数据背景区域填充颜色为透明色
      }
    }
  }]
}
       效果如下,另如果是开启了图形本身的缩略轴,建议关掉后再通过扩展属性进行个性化配置:

问题2:

V10版本缩略轴开启后,颜色如何修改。

解决方案:

可通过如下扩展属性配置对应颜色。

 折叠源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

option = {
  dataZoom: [{
    fillerColor: 'rgba(208,2,27,1)', //选中范围的填充颜色。
    borderColor: 'rgba(248,231,28,1)', //边框颜色
    textStyle: {
      color: 'rgba(151, 46, 46, 1)' //文本颜色
    },
    handleStyle: {
      color: 'rgba(37, 202, 86, 1)' //两侧缩放手柄颜色
    },
    dataBackground: {
      areaStyle: {
        color: 'rgba(189, 213, 90, 1)' //数据阴影区域颜色
      },
      lineStyle: {
        color: "rgba(216, 75, 188, 1)" //数据阴影线条颜色
      }
    },
    backgroundColor: 'rgba(255,255,255,1)', //缩略轴背景色
  }]
}

image2024-7-27_13-47-21.png