怎么给仪表图背景设置分段并配置圆角？-灵析社区
爱打瞌睡的三角龙我在vchart官网上看到了这个demo：[https://www.visactor.io/vchart/demo/gauge-chart/clock](https://link.segmentfault.com/?enc=%2B16M08j0WCkreQgnp0HcKw%3D%3D.xOXzlB2wEkiO5w4uVkFdwdjopshvmYVmceBKvUjMyOhv6E%2BLI%2FnNmZjOwmKN%2FK9GiQE5NK4v3zfTR1%2BXFssZSQ%3D%3D) 它看起来像是仪表图的变种。现在我需要将常规仪表图的背景更改为类似的样式，将背景分段并设置圆角。我该怎么办？
一颗西兰花可以这样配置 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”系列。
"图片" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/bd04816159ef6f5cf11c46c622e69305.png)
相关文档可以参考：
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=oGhqmxVX3vbJBWSJvLINfA%3D%3D.wgca0aWUe93DWw2QvT1k2wA60JFrcnQ5LD9Sz%2Foi5h%2Ba4O%2F8S6wvv8haGDYKrgRF)
gauge series spec:
"https://www.visactor.io/vchart/option/gaugeChart#gauge%EF%BC%..." (https://link.segmentfault.com/?enc=mLD5t2lfKPn7zKD%2BQdOypw%3D%3D.c2zAPD82CIUCTCbX23qiB3YzdYozDQbFzHOCMz3gAD6hRo%2BpOHMcC5wshciB8HjovdTCFtmrSy00tvLxIuCKa%2BVPSbcS1rZ4ORM3h2K2TmPPur%2FBNPEtc0omkDhRpDYY%2Br6zqr8kC%2BDrFkuDn4aNgyqbNxmqvkrtiXebzboRJIM%3D)('gauge')