环形图 hover 的时候,如何配置边框的样式?
问题描述
环形图的交互中,当指针悬停在环形图的扇区上时,如何改变扇区的边框颜色、边框粗细、调整扇区的半径大小以及改变扇区的填充透明度? 除此之外,如何处理其他扇区,即非悬停状态下的扇区的样式?
解决方案
VChart 图表已经提供了对应的功能,VChart 对图元上的各种常用交互抽象为了图元的状态,将图元的状态分为了以下几种:
hover指针悬浮状态,图元被鼠标指针悬浮时的状态。hover_reverse非指针悬浮状态,当有图元进入了hover状态时,其他图元的状态。selected选中状态,图元被选中时的状态。selected_reverse非选中状态,当有图元进入了selected状态时,其他图元的状态。dimension_hover维度悬浮状态,鼠标指针悬浮在某一段 x 轴区域内时的状态。dimension_hover_reverse非维度悬浮状态,当有图元进入了dimension_hover状态时,其他图元的状态。
如果想要 hover 到环形图时,改变图元的样式,可以在 pie 配置中,设置图元的 hover 状态。 参考文档:图元的状态
代码示例
在以下示例中,pie.state 中设置了 4 个状态
hover: 指针悬浮到的图元, 显示描边,填充透明度变低,扩展外半径。hover_reverse:其它未悬浮到的图元,缩小外半 径。selected:指针选中的图元,扩大内半径和外半径。selected_reverse:其它未选中的图元,填充透明度变低。