怎么给仪表图背景设置分段并配置圆角?-灵析社区

一颗西兰花

可以这样配置 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')

阅读量:1

点赞量:0

问AI