VChart 怎么配置嵌套饼图问题标题如何配置嵌套饼图问题描述如何配置嵌套饼图解决方案 VChart 可以配置多

问题标题

如何配置嵌套饼图

问题描述

如何配置嵌套饼图

解决方案

VChart 可以配置多个 pie-series 然后将它们的半径配置为：内圈的外半径 = 外圈的内半径，这样就能实现嵌套饼图

还有类似嵌套饼图的玫瑰图，可以选择根据业务场景选择。

outerRadius: number // 外半径，百分比数值
innerRadius: number // 内半径，百分比数值

代码示例

const spec = {
  type: 'common',
  data: [
    {
      id: 'id0',
      values: [
        { type: '0~29', value: '126.04' },
        { type: '30~59', value: '128.77' },
        { type: '60 and over', value: '77.09' }
      ]
    },
    {
      id: 'id1',
      values: [
        { type: '0~9', value: '39.12' },
        { type: '10~19', value: '43.01' },
        { type: '20~29', value: '43.91' },
        { type: '30~39', value: '45.4' },
        { type: '40~49', value: '40.89' },
        { type: '50~59', value: '42.48' },
        { type: '60~69', value: '39.63' },
        { type: '70~79', value: '25.17' },
        { type: '80 and over', value: '12.29' }
      ]
    }
  ],
  series: [
    {
      type: 'pie',
      dataIndex: 0,
      outerRadius: 0.65,
      innerRadius: 0,
      valueField: 'value',
      categoryField: 'type',
      label: { position: 'inside', visible: true }
    },
    {
      type: 'pie',
      dataIndex: 1,
      outerRadius: 0.8,
      innerRadius: 0.67,
      valueField: 'value',
      categoryField: 'type',
      label: {
        visible: true
      }
    }
  ],
  color: ['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00'],
  legends: {
    visible: true,
    orient: 'left'
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

结果展示

Demo: codesandbox.io/p/sandbox/v…

VChart 怎么配置嵌套饼图

问题标题

问题描述

解决方案

代码示例

结果展示

相关文档