84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
export const renderEchart = ({ echart, echarts, pieChartData }) => {
|
|
const typeColorMap = {
|
|
需冲刺: { color: '#EB5241', simpleName: '冲' },
|
|
较稳妥: { color: '#F0BA16', simpleName: '稳' },
|
|
可保底: { color: '#15C496', simpleName: '保' },
|
|
}
|
|
const formattedData = pieChartData.value.map((item) => ({
|
|
...item,
|
|
|
|
itemStyle: {
|
|
color: typeColorMap[item.name]?.color,
|
|
},
|
|
label: {
|
|
formatter: (params) => typeColorMap[params.name]?.simpleName || params.name,
|
|
},
|
|
}))
|
|
echart.value.init(echarts, (chart) => {
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)',
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
bottom: 8,
|
|
left: 'center',
|
|
icon: 'circle',
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
itemGap: 20,
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
data: formattedData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
},
|
|
label: {
|
|
formatter: (params) => typeColorMap[params.name]?.simpleName || params.name,
|
|
},
|
|
},
|
|
],
|
|
graphic: {
|
|
elements: [
|
|
{
|
|
type: 'text',
|
|
left: 'center',
|
|
top: '40%',
|
|
|
|
style: {
|
|
text: '适合的大学',
|
|
fontSize: 12,
|
|
fill: '#1F2329',
|
|
textAlign: 'center',
|
|
textVerticalAlign: 'middle',
|
|
},
|
|
},
|
|
{
|
|
type: 'text',
|
|
left: 'center',
|
|
top: '50%',
|
|
style: {
|
|
text: formattedData.reduce((acc, curr) => acc + curr.value, 0),
|
|
fontSize: 24,
|
|
fill: '#1F2329',
|
|
textAlign: 'center',
|
|
textVerticalAlign: 'middle',
|
|
fontWeight: 'bold',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
}
|
|
|
|
chart.setOption(option)
|
|
})
|
|
}
|