echarts饼图pie中间显示总数
const myChart = echarts.init(document.getElementById('fwflEchart'))
// 重点代码
//隐藏title
const hideTitle = (e) => {
myChart.value.setOption({
title: {
text: '',
},
})
}
//显示title
const showTitle = (e) => {
myChart.value.setOption({
title: {
text: '房屋总数量\n2230',
},
})
}
// 给饼图添加事件
// 当区域高亮时隐藏title，比如当鼠标移动到legend上时
myChart.value.on('highlight', hideTitle)
// 当鼠标悬浮到区域时隐藏title
myChart.value.on('mouseover', hideTitle)
// 当鼠标离开区域时显示title
myChart.value.on('mouseout', showTitle)
// 当区域取消高亮时显示title，比如当鼠标从legend上离开时
myChart.value.on('downplay', showTitle)
// 设置option
myChart.setOption({
color: ['#00d1d1', '#529fcf', '#71d0aa', '#c5ff7d',],
title: {
text: '总数量\n2230',
top: '160px',
left: '214px',
textAlign: 'center',
textStyle: {
color: 'white',
fontSize: '24px',
lineHeight: 30
}
},
legend: {
bottom: '60px',
textStyle: {
color: 'white',
fontSize: '16px'
}
},
series: [
{
name: '房屋分类统计',
type: 'pie',
radius: [80, 160],
avoidLabelOverlap: false,
center: ['50%', '40%'],
label: {
show: false,
position: 'center'
},
// 鼠标悬浮时中心位置显示对应区域的信息
emphasis: {
label: {
formatter: `{b}\n{c}`,
show: true,
fontSize: '24px',
fontWeight: 'bold',
color: () => {
},
lineHeight: 30
}
},
itemStyle: {
borderRadius: 10,
borderColor: 'rgba(255,255,255,0)',
borderWidth: 2
},
labelLine: {
show: false
},
data: [
{value: 1427, name: 'AAA'},
{value: 515, name: 'BBB'},
{value: 113, name: 'CCC'},
{value: 173, name: 'DDD'},
]
}
]
});