有没有计算机的大神来救救我●﹏●，我要弄一个echarts图表分析，现在数据可以获取，控制台也没有报错，但是那个饼图就是不会出来(ಥ_ಥ)
啊～望来人指教
<template>
<div class="statistics-container">
<div id="gender-chart" style="width: 600px; height: 400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getDoctorGenderStats } from '@/api/statistics'
export default {
name: 'Statistics',
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
this.loadData()
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById('gender-chart'))
this.chart.setOption({
title: {
text: '医生性别分布',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '性别分布',
type: 'pie',
radius: '50%',
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
},
async loadData() {
try {
const res = await getDoctorGenderStats()
this.chart.setOption({
series: [{
data: [
{ value: res.data.male, name: '男' },
{ value: res.data.female, name: '女' }
]
}]
})
} catch (error) {
console.error('加载数据失败:', error)
}
}
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
}
}
</script>
<style scoped>
.statistics-container {
padding: 20px;
}
</style>