echarts饼图 剧中
时间: 2023-11-03 09:00:10 浏览: 52
在echarts饼图中,要将文字居中显示,可以使用以下几种方案:
方案一:使用tittle(不能自适应)
您可以在series配置中添加一个title属性,并设置align属性为center,这样文字就会居中显示。但是需要注意的是,这种方法不支持自适应,当屏幕放大或缩小时,文字可能会与饼图重叠。
方案二:在series中配置label(适用图表居中的情况,不适用于左侧图表)
在series配置中添加label属性,并设置position属性为center,这样文字就会居中显示。但是需要注意的是,这种方法只适用于图表居中的情况,如果图表在左侧,可能无法实现居中效果。
方案三:在series中再加一个type: 'gauge'(能居中且支持自适应)
您可以在series配置中再添加一个type为'gauge'的系列,并设置radius为'-50%',center与饼图的center一致,这样中间的文字将居中显示且支持自适应。
代码如下:
series: [
{
name: '设备总数',
type: 'pie',
radius: ['35%', '60%'],
center: ['25%', '45%'],
label: {
show: false
},
selectedMode: false,
data: data
},
{
name: '中间文字',
z: 100,
type: 'gauge',
radius: '-50%',
center: ['25%', '45%'],
detail: {
offsetCenter: [-1,-10],
fontSize: fontSize(18),
fontFamily: fontFamily.fontFamily95W,
color: 'rgba(75, 186, 233, 1)',
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
data: [
{
value: totalNum,
name:'家居总数',
title:{
show:true,
fontSize: fontSize(12),
fontFamily: fontFamily.fontFamily65W,
color: 'rgba(50, 197, 255, .5)',
offsetCenter:[0,'-20%']
}
},
],
},
]