|
|
|
|
@ -219,19 +219,19 @@
|
|
|
|
|
// 课堂分类
|
|
|
|
|
const total = res.courseTypes.reduce((sum, item) => {
|
|
|
|
|
// 处理不存在year_total或非数字的情况,转为数字后累加
|
|
|
|
|
const yearTotal = Number(item.year_total ?? 0);
|
|
|
|
|
const yearTotal = Number(item.course_signs_total ?? 0);
|
|
|
|
|
return sum + yearTotal;
|
|
|
|
|
}, 0);
|
|
|
|
|
res.courseTypes.map((item,index)=>{
|
|
|
|
|
const yearTotal = Number(item.year_total ?? 0);
|
|
|
|
|
const yearTotal = Number(item.course_signs_total ?? 0);
|
|
|
|
|
// 避免总和为0时的除以0错误
|
|
|
|
|
const ratio = total === 0 ? 0 : (yearTotal / total);
|
|
|
|
|
this.pieData.push(
|
|
|
|
|
{
|
|
|
|
|
name: item.name,
|
|
|
|
|
value: item.year_total?item.year_total:0,
|
|
|
|
|
value: item.course_signs_total?item.course_signs_total:0,
|
|
|
|
|
color: this.colorList[index],
|
|
|
|
|
percentage: Number(ratio.toFixed(2))*100
|
|
|
|
|
percentage: Number(ratio * 100).toFixed(2)
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
@ -371,87 +371,66 @@
|
|
|
|
|
},
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
geo: {
|
|
|
|
|
map: 'suzhou',
|
|
|
|
|
roam: false,
|
|
|
|
|
zoom: 1.0,
|
|
|
|
|
center: [120.65, 31.32],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderColor: 'transparent',
|
|
|
|
|
borderWidth: 5,
|
|
|
|
|
areaColor: 'rgba(59, 130, 246, 0.1)',
|
|
|
|
|
shadowBlur: 2,
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
itemStyle: {
|
|
|
|
|
areaColor: 'rgba(59, 130, 246, 0.3)',
|
|
|
|
|
borderColor: 'transparent',
|
|
|
|
|
borderWidth: 5,
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
shadowColor: 'rgba(59, 130, 246, 0.5)'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [{
|
|
|
|
|
name: '校友分布',
|
|
|
|
|
type: 'map',
|
|
|
|
|
map: 'suzhou',
|
|
|
|
|
roam: false,
|
|
|
|
|
zoom: 1.0,
|
|
|
|
|
center: [120.65, 31.32],
|
|
|
|
|
data: this.mapData.map(item => ({
|
|
|
|
|
name: item.name,
|
|
|
|
|
value: item.value,
|
|
|
|
|
itemStyle: item.name === '工业园区' ? {
|
|
|
|
|
borderColor: 'red',
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
areaColor: 'rgba(255, 0, 0, 0.3)'
|
|
|
|
|
} : undefined
|
|
|
|
|
})),
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderColor: 'transparent',
|
|
|
|
|
borderWidth: 5,
|
|
|
|
|
shadowBlur: 2,
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
name: '校友分布',
|
|
|
|
|
type: 'map',
|
|
|
|
|
map: 'suzhou',
|
|
|
|
|
roam: false,
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
zoom: 1.0,
|
|
|
|
|
center: [120.65, 31.32],
|
|
|
|
|
data: this.mapData.map(item => ({
|
|
|
|
|
name: item.name,
|
|
|
|
|
value: item.value,
|
|
|
|
|
itemStyle: item.name === '工业园区' ? {
|
|
|
|
|
borderColor: 'red',
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
areaColor: 'rgba(255, 0, 0, 0.3)'
|
|
|
|
|
} : undefined
|
|
|
|
|
})),
|
|
|
|
|
itemStyle: {
|
|
|
|
|
areaColor: 'rgba(59, 130, 246, 0.5)',
|
|
|
|
|
borderColor: 'transparent',
|
|
|
|
|
borderWidth: 5,
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
shadowColor: 'rgba(59, 130, 246, 0.5)'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'outside',
|
|
|
|
|
color: '#333',
|
|
|
|
|
fontSize: 11,
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
padding: [6, 12],
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
|
|
borderRadius: 15,
|
|
|
|
|
borderColor: '#1ea8f9',
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
shadowBlur: 8,
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
|
|
formatter: function(params) {
|
|
|
|
|
return params.name + ': ' + (params.value || 0) + '人'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
length: 20,
|
|
|
|
|
length2: 15,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
|
|
|
width: 2,
|
|
|
|
|
type: 'solid'
|
|
|
|
|
shadowBlur: 2,
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
itemStyle: {
|
|
|
|
|
areaColor: 'rgba(59, 130, 246, 0.5)',
|
|
|
|
|
borderColor: 'transparent',
|
|
|
|
|
borderWidth: 5,
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
shadowColor: 'rgba(59, 130, 246, 0.5)'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'outside',
|
|
|
|
|
color: '#333',
|
|
|
|
|
fontSize: 11,
|
|
|
|
|
fontWeight: 'bold',
|
|
|
|
|
padding: [6, 12],
|
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
|
|
|
borderRadius: 15,
|
|
|
|
|
borderColor: '#1ea8f9',
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
shadowBlur: 8,
|
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
|
|
formatter: function(params) {
|
|
|
|
|
return params.name + ': ' + (params.value || 0) + '人'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
length: 20,
|
|
|
|
|
length2: 15,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: 'rgba(255, 255, 255, 0.8)',
|
|
|
|
|
width: 2,
|
|
|
|
|
type: 'solid'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.mapChartInstance.setOption(option)
|
|
|
|
|
|