Echarts中如何自定义datazoom组件的高亮选中阴影区域？

你需要调整的蓝色高亮选中区域，对应dataZoom配置项内的selectedBackground属性，修改该属性下的子参数即可完全自定义阴影样式，支持调整的常用参数如下：

• 填充色：通过color字段设置，支持十六进制、rgb、rgba格式，可通过rgba的第四位参数直接控制填充透明度
• 边框样式：通过borderColor设置边框颜色，borderWidth设置边框粗细
• 整体透明度：通过opacity字段设置阴影区域全局透明度

可直接参考如下配置嵌入你的ECharts option中：

option = {
  // 其余图表配置保持不变
  dataZoom: [
    {
      type: 'slider', // 若使用内置拖拽缩放，此处改为type: 'inside'
      // 其余原有dataZoom配置保持不变
      selectedBackground: {
        color: 'rgba(100, 200, 100, 0.3)', // 示例为半透明绿色，可替换为你需要的色值
        borderColor: 'rgb(100, 200, 100)',
        borderWidth: 1,
        opacity: 0.7
      }
    }
  ]
}

若存在多个dataZoom实例，分别为每个实例添加对应的selectedBackground配置即可生效。

内容的提问来源于stack exchange，提问作者Hans