92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
export const renderEchart = ({
|
|
echart,
|
|
echarts,
|
|
pieChartData,
|
|
}: {
|
|
echart: any
|
|
echarts: any
|
|
pieChartData: any
|
|
}) => {
|
|
const typeColorMap: { [key: string]: any } = {
|
|
需冲刺: { color: '#EB5241', simpleName: '冲' },
|
|
较稳妥: { color: '#F0BA16', simpleName: '稳' },
|
|
可保底: { color: '#15C496', simpleName: '保' },
|
|
}
|
|
const formattedData = pieChartData.value.map((item: any) => ({
|
|
...item,
|
|
|
|
itemStyle: {
|
|
color: typeColorMap[item.name]?.color,
|
|
},
|
|
label: {
|
|
formatter: (params: any) => typeColorMap[params.name]?.simpleName || params.name,
|
|
},
|
|
}))
|
|
echart.value.init(echarts, (chart: any) => {
|
|
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: any) => 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: any, curr: any) => acc + curr.value, 0),
|
|
fontSize: 24,
|
|
fill: '#1F2329',
|
|
textAlign: 'center',
|
|
textVerticalAlign: 'middle',
|
|
fontWeight: 'bold',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
}
|
|
|
|
chart.setOption(option)
|
|
})
|
|
}
|