Echarts圆环图中间固定显示文字:总计
要在圆环的中间固定显示文字'总计',可以通过设置一个额外的 series 来实现。该 series 的 type 为'custom',并设置为圆环的中间位置。
以下是修改后的代码示例:
option = {
title: {
text: '车辆所有权构成(辆)',
left: 'center',
top: 'top',
},
tooltip: {
trigger: 'item'
},
legend: {
top: 'center',
left: 'right',
orient: 'vertical'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 32.6, name: '外租车辆' },
{ value: 67.4, name: '自有企业' },
]
},
{
name: 'Total',
type: 'custom',
renderItem: function(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([0, categoryIndex]);
var end = api.coord([1, categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
return {
type: 'text',
position: [start[0], start[1] - height],
style: {
text: '总计',
fill: '#000',
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center'
}
};
},
data: [0], // 设置一个空的data,不参与圆环的绘制
}
]
};
在上面的示例中,我们添加了一个额外的 series,类型为'custom'。在 renderItem 函数中,我们通过 api.coord 方法获取到圆环的起始坐标和结束坐标,然后在起始坐标的上方绘制了文字'总计'。
注意,我们将该 series 的 data 设置为一个空的数组 [0],这样它不会参与圆环的绘制,只会显示我们设置的文字'总计'。
原文地址: https://www.cveoy.top/t/topic/lowj 著作权归作者所有。请勿转载和采集!