ECharts 图表:如何在 legend 中显示数据项名称
如何设置 legend,让其右边显示对应的数据内容:
要设置 legend 右边显示对应的数据,可以在 legend 中添加 data 属性,并将其设置为对应的数据项名称。例如,将 legend 的 data 属性设置为 '['外租车辆', '自有企业']',即可让 legend 右边显示 '外租车辆' 和 '自有企业' 这两个数据项的名称。
修改后的代码如下:
option = {
title: {
text: '车辆所有权构成(辆)',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
right: 'right', // 将 legend 位置设置为右边
orient: 'vertical',
data: ['外租车辆', '自有企业'] // 设置 legend 的 data 属性为对应的数据项名称
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 32.6, name: '外租车辆' },
{ value: 67.4, name: '自有企业' },
]
},
// 就是这里!
{
name: '',
z: -1,
type: 'gauge',
radius: '-50%',
center: [`50%`, `50%`],
// 配置中间的数字
detail: {
// 调节数字位置
offsetCenter: [0, 20],
fontSize: 30,
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
// 中间的字和数字 数据
data: [
{
value: 180135,
name: '总计',
},
],
},
]
};
原文地址: https://www.cveoy.top/t/topic/ljZc 著作权归作者所有。请勿转载和采集!