环形图中心指标能否设置选中时展示？

Question

在环形图中，中心区域有大量的空白，我想利用这些区域，在单击某个扇区时，在图表正中间显示该扇形对应的数值。

Answer 1

可以参考如下options

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      selectedMode: 'single',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
          formatter:'{c}'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

Answer 2

https://echarts.apache.org/examples/zh/editor.html?c=pie-doug...

Answer 3

解决方案 Solution

VChart的为饼图了设计了indicator组件，支持配置指标的标题与多行文本内容，提供对fixed 和 hover 两种交互方式与常用的样式配置功能。

代码示例 Code Example

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" },
          ],
        },
      ],
      outerRadius: 0.6,
      innerRadius: 0.4,
      padAngle: 0.6,
      valueField: "value",
      categoryField: "type",
      pie: {
        style: {
          cornerRadius: 10,
        },
        state: {
          hover: {
            outerRadius: 0.65,
          },
          selected: {
            outerRadius: 0.65,
          },
        },
      },
      label: {
        visible: true,
      },
      indicator: {
        visible: true,
        trigger: "fixed",
        title: {
          visible: true,
          style: {
            fontSize: 18,
            text: (data) => {
              if (data) {
                const value = data["type"];
                return value ? value : null;
              }
              return null;
            },
          },
        },
        content: [
          {
            visible: true,
            style: {
              fontSize: 18,
              text: "",
            },
          },
          {
            visible: true,
            style: {
              fontSize: 18,
              text: (data) => {
                if (data) {
                  const value = data["value"];
                  return value ? `${value}%` : null;
                }
                return null;
              },
            },
          },
        ],
      },
    };

    const vchart = new VChart(spec, {
      dom: containerRef.current,
    });

    vchart.renderSync();

    return () => vchart.release();
  }, []);

  return (
    <div
      ref={containerRef}
      style={{
        width: 520,
        height: 520,
        border: "1px solid #ccc",
      }}
    />
  );
};

结果展示 Results

在线示例：https://codesandbox.io/s/quizzical-babycat-wcgpzk?file=/src/A...

相关文档

VChart Github

VChart 饼图指标示例

VChart 饼图指标配置文档