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

作者站长头像
站长
· 阅读数 5

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

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

回复
1个回答
avatar
test
2024-06-27

可以这样配置 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”系列。

answer image

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容