环形图 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

图元状态教程

图表示例