怎么给仪表图背景设置分段并配置圆角？

Question

我在vchart官网上看到了这个demo：https://www.visactor.io/vchart/demo/gauge-chart/clock

它看起来像是仪表图的变种。现在我需要将常规仪表图的背景更改为类似的样式，将背景分段并设置圆角。我该怎么办？

Answer 1

可以这样配置 VChart 图表：

const spec = {
  type: 'gauge',
  data: [
    {
      id: 'pointer',
      values: [
        {
          type: 'A',
          value: 0.6
        }
      ]
    },
    {
      id: 'segment',
      values: [
        {
          type: 'level1',
          value: 0.4
        },
        {
          type: 'level2',
          value: 0.6
        },
        {
          type: 'level3',
          value: 0.8
        }
      ]
    },
  ],
  gauge: {
    type: 'gauge',
    dataIndex: 1,
    categoryField: 'type',
    valueField: 'value',
    seriesField: 'type',
    segment: {
      style: {
        cornerRadius: 10
      }
    }
  },
  pointer: {
    style: {
      fill: '#666666'
    }
  },
  categoryField: 'type',
  valueField: 'value',
  outerRadius: 0.8,
  innerRadius: 0.5,
  startAngle: -180,
  endAngle: 0,
  axes: [
    { type: 'linear', orient: 'angle', grid: { visible: false } },
  ]
};

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

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

用另一套数据去定义背景分段，并将背景系列（spec的对应属性名是“gauge”）改为“gauge”系列。

相关文档可以参考：
github：https://github.com/VisActor/VChart
gauge series spec: https://www.visactor.io/vchart/option/gaugeChart#gauge%EF%BC%...('gauge')