先看成图效果
首先是封装一个公用的函数
const renderPieEcharts = (
ele: HTMLDivElement,
data: Record<string, any>[],
color: string[],
titleText: string,
) => {
const legendData = data.map((item, i) => ({
name: item.name,
textStyle: {
color: color[i],
},
}))
const myChart = echarts.init(ele)
const option:ECOption = {
title: {
text: titleText,
x: 'center',
textStyle: {
color: '#fff',
fontSize: 16,
},
},
color,
tooltip: {
show: false,
trigger: 'item',
},
legend: {
data: legendData,
itemWidth: 12,
itemHeight: 8,
textStyle: {
color: 'auto',
rich: {
name: {
fontSize: 12,
fontWeight: 400,
width: 50,
padding: [0, 0, 0, 5],
color: '#fff', // 图例文字颜色
fontFamily: 'Source Han Sans CN-Regular',
},
value: {
fontSize: 14,
fontWeight: 500,
align: 'right',
fontFamily: 'Source Han Sans CN-Medium',
},
},
},
right: 'center',
orient: 'vertical',
bottom: '10',
itemGap: 10,
formatter: (name: string) => {
const item = data.find((item) => item.name === name)
return `{name|${name}}{value| ${item?.value}}`
},
},
series: [
{
name: titleText,
type: 'pie',
center: ['50%', '40%'],
radius: ['60%', '90%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data,
},
],
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize()
})
}
准备好测试数据
const inspectData = [
{ value: 35, name: '年检临期', color: '#1A85FF' },
{ value: 8, name: '超期未检', color: '#FFDA30' },
{ value: 12, name: '需复检', color: '#19D995' },
]
开始调用
onMounted(() => {
renderPieEcharts(InspectRef.value as HTMLDivElement, inspectData, ['#1A85FF', '#FFDA30', '#19D995'], '年检')
}