Skip to content

高亮样式配置

通过 activeStyle 统一配置所有图表的选中高亮效果。所有属性可选,不设置时使用默认值(已适配暗色模式)。

配置方式

typescript
{
  activeStyle: {
    pointColor: '#ffffff',                // 选中点填充色
    pointBorderWidth: 2.5,                // 选中点描边宽度
    pointScale: 3,                        // 选中点半径增量(px)
    backdrop: 'rgba(0,0,0,0.04)',         // 选中列背景遮罩色
    borderColor: '#1f2937',               // 选中元素描边色(堆叠柱/树图等)
    borderWidth: 1.5,                     // 选中元素描边宽度
    pieScale: 6,                          // 饼图选中放大半径(px)
    crosshairWidth: 1,                    // 十字线宽度
    crosshairColor: 'rgba(0,0,0,0.15)'   // 十字线颜色
  }
}

各图表的高亮效果

图表类型高亮表现
折线/面积选中点放大 + 变色 + 描边 + 背景遮罩
柱图背景遮罩
K线背景遮罩
漏斗横向背景遮罩
饼/环图扇区向外放大
散点选中点放大 + 描边
雷达选中顶点放大 + 变色
矩形树图选中块描边 + 其余淡化

暗色模式自动适配

不配置 activeStyle 时,默认值会根据暗色模式自动切换:

属性亮色默认暗色默认
pointColor#ffffff#1e293b
backdroprgba(0,0,0,0.04)rgba(255,255,255,0.08)
borderColor#1f2937#94a3b8
crosshairColorrgba(0,0,0,0.15)rgba(255,255,255,0.25)

环形图/饼图的中心文字颜色也会自动适配暗色。

最近更新