Echarts漏斗图:如何将文字显示在左边并添加横线连接
Echarts漏斗图:如何将文字显示在左边并添加横线连接
要让文字显示在漏斗图的左边并带有对应的横线连接,可以通过调整label和labelLine的属性来实现。下面是修改后的代码示例:
option = {
title: {
text: '职称构成',
left: 'center',
top: 'top',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}%',
},
series: [
{
name: '职称构成',
type: 'funnel',
left: '10%',
top: 40,
bottom: 20,
width: '80%',
min: 0,
max: 100,
minSize: '20%',
maxSize: '100%',
sort: 'descending',
color: ['#7d76ff', '#00c8c8', '#81a3ff', '#b476ff'],
gap: 2,
label: {
show: true,
position: 'left', // 将文字显示在漏斗图的左边
formatter: '{b}', // 显示职称名称
align: 'right',
verticalAlign: 'middle',
fontWeight: 'bold',
fontSize: 14,
},
labelLine: {
show: true,
length: 60, // 横线的长度
lineStyle: {
width: 1,
type: 'solid',
},
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
},
emphasis: {
label: {
fontSize: 20,
},
},
data: [
{ value: 60, name: '中级' },
{ value: 40, name: '初级' },
{ value: 20, name: '高级' },
{ value: 80, name: '无' },
],
},
],
};
通过设置label的position为'left',将文字显示在漏斗图的左边。然后设置labelLine的show为true,length为横线的长度,使得文字和对应图片部分之间连接一条横线。
原文地址: https://www.cveoy.top/t/topic/l4BC 著作权归作者所有。请勿转载和采集!