中期评估添加中国地图分布图

gw-ui/src/views/hlgl/assess/index.vue

@@ -26,6 +26,7 @@
     <el-card shadow="never" class="score-card" style="margin-bottom:16px">
       <template #header>中期评估定量赋分结果</template>
       <div class="chart-row">
+        <div class="chart-half" ref="scoreMap"></div>
         <div class="chart-half" ref="provinceBar"></div>
         <div class="chart-half" ref="sixScoreBar"></div>
       </div>
@@ -53,6 +54,7 @@
 import { ref, onMounted, nextTick } from 'vue'
 import { getTotalScore } from '@/api/hzz/assess'
 import * as echarts from 'echarts'
+import chinaGeo from '@/assets/geoData/china_xh.json'
 
 const activeTab = ref('plan')
 
@@ -67,7 +69,8 @@ const tabs = [
     rows:[{label:'省级',value:31},{label:'市级',value:245},{label:'县级',value:2951},{label:'乡级',value:3636}] },
 ]
 
-const provinceBar = ref(null), sixScoreBar = ref(null)
+const provinceBar = ref(null), sixScoreBar = ref(null), scoreMap = ref(null)
+echarts.registerMap('china', chinaGeo)
 
 // 中期评估数据（旧系统硬编码）
 const provinceData = [
@@ -92,6 +95,16 @@ const sLoading = ref(false), scoreList = ref([])
 // 中期评估图表
 const initCharts = () => {
   nextTick(() => {
+    if (scoreMap.value) {
+      const c0 = echarts.init(scoreMap.value)
+      c0.setOption({
+        title: { text: '各省中期评估总分分布', left: 'center', textStyle: { fontSize: 14 } },
+        tooltip: { trigger: 'item', formatter: '{b}: {c} 分' },
+        visualMap: { min: 84, max: 100, left: 'left', bottom: 10, text: ['高', '低'], inRange: { color: ['#e0f3f8','#abd9e9','#74add1','#4575b4','#313695'] } },
+        series: [{ type: 'map', map: 'china', roam: false, label: { show: true, fontSize: 10 }, data: provinceData.map(d=>({name:d.name,value:d.total})) }]
+      })
+      window.addEventListener('resize', () => c0.resize())
+    }
     if (provinceBar.value) {
       const c1 = echarts.init(provinceBar.value)
       c1.setOption({
@@ -154,5 +167,5 @@ onMounted(() => initCharts())
 .score-card { border-radius: 8px; }
 .score-card :deep(.el-card__header) { font-weight: 600; }
 .chart-row { display: flex; gap: 16px; }
-.chart-half { flex: 1; height: 400px; }
+.chart-half { flex: 1; height: 400px; min-width: 0; }
 </style>