带指标卡环形图如何动态更新指标值？-灵析社区
代码大师类似 （[https://www.visactor.io/vchart/demo/pie-chart/pie-indicator](https://link.segmentfault.com/?enc=hpj8xVKg2fM8A9tAdtVT1w%3D%3D.EBuXzNTNFHYwz6YC71zYtrwadTBvvii3pDaOvCjndeRh0hz2lYGU8dPYHKKEgZGgy5BI3wF3DEy46wS%2FQpKvww%3D%3D)）这样的带指标卡环形图，  这个指标卡里的数值现在是用户自己定义的，不支持自动变，但是可以计算之后更新这个值。 指标卡里这个数字可以根据hover的扇区改变吗？该如何实现？
无敌美少女不同图表库的解决方案不一样，根据你给的demo，只需要设置交互触发类型和配置text字段内容。
* indicator.trigger 用来设置交互触发类型。可选的交互类型有hover、select、none。默认设置交互触发类型为select。根据你的需求，需要将indicator.trigger设置为hover。
* indicator.title.style.text用来设置文本内容，且支持回调。可以根据需要的数据字段，在text中配置所需字段并可根据需求格式化展现形式。
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/66e9e6ee4ed6ae37474ab2190a3ce42b.png)
代码示例
const data = [
{ type: 'oxygen', value: '46.60', formula: 'O', texture: 'circle' },
{ type: 'silicon', value: '27.72', formula: 'Si', texture: 'horizontal-line' },
{ type: 'aluminum', value: '8.13', formula: 'Al', texture: 'vertical-line' },
{ type: 'iron', value: '5', formula: 'Fe', texture: 'rect' },
{ type: 'calcium', value: '3.63', formula: 'Ca', texture: 'grid' },
{ type: 'sodium', value: '2.83', formula: 'Na', texture: 'bias-rl' },
{ type: 'potassium', value: '2.59', formula: 'K', texture: 'diamond' },
{ type: 'others', value: '3.5', formula: 'Others', texture: 'bias-lr' }
];
const spec = {
type: 'pie',
data: [
{
id: 'id0',
values: data
}
],
outerRadius: 0.8,
innerRadius: 0.5,
padAngle: 0.6,
valueField: 'value',
categoryField: 'type',
pie: {
style: {
cornerRadius: 10,
texture: datum => datum['texture']
},
state: {
hover: {
outerRadius: 0.85,
stroke: '#000',
lineWidth: 1
},
selected: {
outerRadius: 0.85,
stroke: '#000',
lineWidth: 1
}
}
},
title: {
visible: true,
text: 'Statistics of Surface Element Content'
},
indicator: {
visible: true,
trigger: 'hover',
limitRatio: 0.4,
title: {
visible: true,
autoFit: true,
style: {
fontWeight: 'bolder',
fontFamily: 'Times New Roman',
fill: '#888',
text: datum => {
const d = datum ?? data[0];
return d['formula'];
}
}
},
content: [
{
visible: true,
style: {
fontSize: 20,
fill: 'orange',
fontWeight: 'bolder',
fontFamily: 'Times New Roman',
text: datum => {
const d = datum ?? data[0];
return d['type'];
}
}
},
{
visible: true,
style: {
fontSize: 18,
fill: 'orange',
fontFamily: 'Times New Roman',
text: datum => {
const d = datum ?? data[0];
return d['value'] + '%';
}
}
}
]
},
legends: {
visible: true,
orient: 'left',
item: {
shape: {
style: {
symbolType: 'circle',
texture: datum => datum['texture']
}
}
}
},
tooltip: {
mark: {
content: [
{
key: datum => datum['type'],
value: datum => datum['value'] + '%'
}
]
}
}
};
结果展示
在线效果参考："https://codesandbox.io/s/pie-chart-with-indicator-card-4ypr2k" (https://link.segmentfault.com/?enc=p7wvpKlBkz4sV4L4gG5%2FWg%3D%3D.%2FDXH3GdHr6ZLpN5zT3ThQO5FX86JBloDpt4AE1Lapw71GBdVTTivFCg%2BNNCCybC%2FGc5IL35Hed1Qy%2FeGQ0AHOg%3D%3D)
相关文档
带指标卡饼图demo："https://www.visactor.io/vchart/demo/pie-chart/pie-indicator" (https://link.segmentfault.com/?enc=xl%2BHQS%2Fqd6X7yBdY7Svwjw%3D%3D.mIieenj3fLu24MvJXmRFnTPuEC%2B%2BIwSmfXEhMskJylCf56cplCrzxZiJtzCL%2Fbud21h2wvZTeJHwpv5ooN4QaA%3D%3D)
指标卡教程："https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Conc..." (https://link.segmentfault.com/?enc=XwH9310wD0LF9a7uDb5afA%3D%3D.6obPyX9g6oWZ9gbLhSM%2FAOAsC8wgxMhPqneLZL%2FgwBLohmPI41g5n7KMffchHCCdoFEjhddx02KDCkQ0%2FCyg%2FtruCugZUBWVksvucX8Gnkc%3D)
相关api："https://www.visactor.io/vchart/option/pieChart#indicator" (https://link.segmentfault.com/?enc=xGzKTdpM7YBbqWXT06zNQA%3D%3D.%2BtN4ErL9N7W85pXv32S9v556IUB7aq9f4nzWE9hRIzXimKzS2E7%2BaZHiOxdzX4Dhr6fz6xWw02vhHTFX4zTeNA%3D%3D)
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=iaHFdDT7DQ3%2FuKVT8glgzw%3D%3D.xe%2BGu2WWa%2FjkGoc95eQOg6cJYWHjS5gPbfHZIk%2FNIHOs6DT2ED59XAZzEzJw85d2)