高亮样式配置
通过 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 |
| backdrop | rgba(0,0,0,0.04) | rgba(255,255,255,0.08) |
| borderColor | #1f2937 | #94a3b8 |
| crosshairColor | rgba(0,0,0,0.15) | rgba(255,255,255,0.25) |
环形图/饼图的中心文字颜色也会自动适配暗色。
