前端 - 环形图 hover 的时候，如何配置边框的样式？

Question

环形图的交互中，当指针悬停在环形图的扇区上时，如何改变扇区的边框颜色、边框粗细、调整扇区的半径大小以及改变扇区的填充透明度？
除此之外，如何处理其他扇区，即非悬停状态下的扇区的样式？

Answer 1

解决方案 Solution

VChart图表已经提供了对应的功能，VChart对图元上的各种常用交互抽象为了图元的状态，将图元的状态分为了以下几种：

• hover 指针悬浮状态，图元被鼠标指针悬浮时的状态。
• hover_reverse 非指针悬浮状态，当有图元进入了 hover 状态时，其他图元的状态。
• selected 选中状态，图元被选中时的状态。
• selected_reverse 非选中状态，当有图元进入了 selected 状态时，其他图元的状态。
• dimension_hover 维度悬浮状态，鼠标指针悬浮在某一段 x 轴区域内时的状态。
• dimension_hover_reverse 非维度悬浮状态，当有图元进入了 dimension_hover 状态时，其他图元的状态。

如果想要hover到环形图时，改变图元的样式，可以在pie配置中，设置图元的hover状态。

参考文档：图元的状态

代码示例 Code Example

在以下示例中，pie.state中设置了4个状态

1. hover: 指针悬浮到的图元， 显示描边，填充透明度变低，扩展外半径。
2. hover_reverse：其它未悬浮到的图元，缩小外半径。
3. selected：指针选中的图元，扩大内半径和外半径。
4. selected_reverse：其它未选中的图元，填充透明度变低。

import { useEffect, useRef } from "react";import VChart from "@visactor/vchart";export const Chart = () => {  const containerRef = useRef(null);  useEffect(() => {    const spec = {      type: "pie",      data: [        {          id: "data",          values: [            { type: "oxygen", value: "46.60" },            { type: "silicon", value: "27.72" },            { type: "aluminum", value: "8.13" },            { type: "iron", value: "5" },            { type: "calcium", value: "3.63" },            { type: "sodium", value: "2.83" },            { type: "potassium", value: "2.59" },            { type: "others", value: "3.5" },          ],        },      ],      valueField: "value",      categoryField: "type",      outerRadius: 0.8,      innerRadius: 0.5,      padAngle: 0.5,      pie: {        state: {          hover: {            stroke: "#0FF",            lineWidth: 1,            fillOpacity: 0.9,            outerRadius: 0.85,          },          hover_reverse: {            outerRadius: 0.7,            innerRadius: 0.5,          },          selected: {            outerRadius: 0.85,            innerRadius: 0.6,          },          selected_reverse: {            fillOpacity: 0.25,          },        },      },    };    const vchart = new VChart(spec, {      dom: containerRef.current,      onError: console.error    });    vchart.renderAsync();    return () => vchart.release();  }, []);  return (    <div      ref={containerRef}      style={{        width: 520,        height: 520,        border: "1px solid #ccc",      }}    />  );};

结果展示 Results

在线示例：https://codesandbox.io/s/pie-hover-llxwgy?file=/src/App.js

Online Demo: https://codesandbox.io/s/pie-hover-llxwgy?file=/src/App.js

相关文档

VChart Github

图元状态教程

图表示例