恢复地图+柱状图，数据用中文省名匹配GeoJSON properties.name

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

@@ -14,7 +14,8 @@
             <div class="divider"><span>其中</span></div>
             <table class="stat-table">
               <tr v-for="(r,i) in tab.rows" :key="i" :class="{ stripe: i%2===0 }">
-                <td>{{ r.label }}</td><td>{{ r.value }}</td>
+                <td>{{ r.label }}</td>
+                <td>{{ r.value }}</td>
               </tr>
             </table>
           </template>
@@ -25,106 +26,197 @@
     <!-- 中期评估定量赋分结果 -->
     <el-card shadow="never" class="score-card" style="margin-bottom:16px">
       <template #header>中期评估定量赋分结果</template>
-      <div ref="provinceBar" style="height:350px"></div>
-    </el-card>
-
-    <!-- 考核评估结果 -->
-    <el-card shadow="never" class="score-card">
-      <template #header>考核评估结果查询</template>
-      <el-form :inline="true" :model="q" size="small">
-        <el-form-item label="行政区划"><el-input v-model="q.adCode" placeholder="编码" style="width:160px" /></el-form-item>
-        <el-form-item label="考核时间"><el-input v-model="q.assTime" placeholder="YYYY-MM-DD" style="width:140px" /></el-form-item>
-        <el-form-item label="生效日期"><el-input v-model="q.effDate" placeholder="YYYY-MM-DD" style="width:140px" /></el-form-item>
-        <el-form-item><el-button type="primary" @click="queryScore">查询</el-button></el-form-item>
-      </el-form>
-      <el-table :data="scoreList" border size="small" v-loading="sLoading" empty-text="请输入条件查询">
-        <el-table-column prop="adCode" label="行政区划编码" width="140" />
-        <el-table-column prop="adName" label="行政区划名称" width="180" />
-        <el-table-column prop="score" label="考核总分" width="100" />
-      </el-table>
+      <div class="chart-row">
+        <div ref="scoreMap" class="chart-half"></div>
+        <div ref="provinceBar" class="chart-half"></div>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from 'vue'
-import { getTotalScore } from '@/api/hzz/assess'
+import {nextTick, onMounted, ref} from 'vue'
 import * as echarts from 'echarts'
+import chinaGeo from '@/assets/geoData/china_xh.json'
 
 const activeTab = ref('plan')
 
 const tabs = [
-  { name:'plan', label:'工作方案', total:44107, unit:'份', desc:'省、市、县、乡四级共正式印发',
-    rows:[{label:'省级',value:31},{label:'市级',value:359},{label:'县级',value:3244},{label:'乡级',value:40472}] },
-  { name:'chief', label:'河长湖长', total:947974, unit:'名', desc:'设立了省、市、县、乡、村五级河长',
-    rows:[{label:'省级',value:336},{label:'市级',value:5435},{label:'县级',value:51935},{label:'乡级',value:262966},{label:'村级',value:627302}] },
-  { name:'office', label:'河长办', total:13571, unit:'人', desc:'河长制办公室人员情况', rows:null },
-  { name:'signboard', label:'公示牌', total:680000, unit:'个', desc:'河长公示牌统计', rows:null },
-  { name:'rule', label:'出台规定制度', total:6863, unit:'项', desc:'出台规定制度统计',
-    rows:[{label:'省级',value:31},{label:'市级',value:245},{label:'县级',value:2951},{label:'乡级',value:3636}] },
+  {
+    name: 'plan', label: '工作方案', total: 44107, unit: '份', desc: '省、市、县、乡四级共正式印发',
+    rows: [{label: '省级', value: 31}, {label: '市级', value: 359}, {label: '县级', value: 3244}, {
+      label: '乡级',
+      value: 40472
+    }]
+  },
+  {
+    name: 'chief', label: '河长湖长', total: 947974, unit: '名', desc: '设立了省、市、县、乡、村五级河长',
+    rows: [{label: '省级', value: 336}, {label: '市级', value: 5435}, {label: '县级', value: 51935}, {
+      label: '乡级',
+      value: 262966
+    }, {label: '村级', value: 627302}]
+  },
+  {name: 'office', label: '河长办', total: 13571, unit: '人', desc: '河长制办公室人员情况', rows: null},
+  {name: 'signboard', label: '公示牌', total: 680000, unit: '个', desc: '河长公示牌统计', rows: null},
+  {
+    name: 'rule', label: '出台规定制度', total: 6863, unit: '项', desc: '出台规定制度统计',
+    rows: [{label: '省级', value: 31}, {label: '市级', value: 245}, {label: '县级', value: 2951}, {
+      label: '乡级',
+      value: 3636
+    }]
+  },
 ]
 
-const provinceBar = ref(null)
+const scoreMap = ref(null), provinceBar = ref(null)
+echarts.registerMap('taihu', chinaGeo)
 
-// 太湖流域5省中期评估数据
+// 太湖流域5省（GeoJSON properties.name = "江苏省" 等）
 const provinceData = [
-  { name:'上海', total:99.1 },{ name:'江苏', total:98.5 },
-  { name:'浙江', total:97.8 },{ name:'福建', total:96.1 },
-  { name:'安徽', total:94.5 },
+  {name:'江苏省',total:99.95},{name:'上海市',total:99},{name:'浙江省',total:98.95},
+  {name:'福建省',total:99},{name:'安徽省',total:99},
 ].sort((a,b)=>b.total-a.total)
 
-const q = ref({ adCode:'', assTime:'', effDate:'' })
-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: (p)=>`${p.name}: ${p.value} 分` },
+        visualMap: { min:94, max:100, left:'left', bottom:10, text:['高','低'], inRange:{color:['#e0f3f8','#abd9e9','#74add1','#4575b4','#313695']} },
+        series: [{ type:'map', map:'taihu', nameProperty:'name', roam:false, label:{show:true,fontSize:12}, data: provinceData.map(d=>({name:d.name,value:d.total})) }]
+      })
+      window.addEventListener('resize', ()=>c0.resize())
+    }
+    // 柱状图
     if (provinceBar.value) {
       const c = echarts.init(provinceBar.value)
       c.setOption({
-        title: { text: '太湖流域各省中期评估总分', left: 'center', textStyle: { fontSize: 14 } },
-        grid: { left: 60, right: 40, top: 40, bottom: 20 },
-        yAxis: { type: 'category', data: provinceData.map(d=>d.name), inverse: true },
-        xAxis: { type: 'value', name: '分', min: 90, max: 100 },
-        series: [{ type: 'bar', data: provinceData.map(d=>d.total), itemStyle: { color: '#409EFF' }, barMaxWidth: 24, label: { show: true, position: 'right', formatter: '{c} 分' } }]
+        title: {text:'太湖流域各省总分排名', left:'center', textStyle:{fontSize:14}},
+        grid: {left:60,right:40,top:40,bottom:20},
+        yAxis: {type:'category', data:provinceData.map(d=>d.name.replace('省','').replace('市','')), inverse:true},
+        xAxis: {type:'value', name:'分', min:94, max:100},
+        series: [{type:'bar', data:provinceData.map(d=>d.total), itemStyle:{color:'#409EFF'}, barMaxWidth:24, label:{show:true,position:'right',formatter:'{c}分'}}]
       })
-      window.addEventListener('resize', () => c.resize())
+      window.addEventListener('resize', ()=>c.resize())
     }
   })
 }
 
-const queryScore = async () => {
-  const { adCode, assTime, effDate } = q.value
-  if (!adCode || !assTime || !effDate) return
-  sLoading.value = true
-  try { const r = await getTotalScore(adCode, assTime, effDate); scoreList.value = r.data || [] }
-  finally { sLoading.value = false }
-}
 onMounted(() => initCharts())
 </script>
 
 <style scoped>
-.assess-page { padding: 20px 24px; height: calc(100vh - 84px); overflow-y: auto; background: #f0f2f5; }
-.page-title { font-size: 20px; color: #1a1a2e; margin: 0 0 16px; font-weight: 600; }
-.page-title::before { content: ''; display: inline-block; width: 4px; height: 20px; background: #409EFF; margin-right: 10px; vertical-align: middle; border-radius: 2px; }
-
-.assess-tabs { margin-bottom: 20px; }
-.assess-tabs :deep(.el-tabs__header) { background: #fff; }
-
-.tab-card { text-align: center; padding: 28px 20px 20px; }
-.big-number { margin-bottom: 8px; }
-.num { font-size: 42px; font-weight: 700; color: #409EFF; }
-.unit { font-size: 20px; color: #888; margin-left: 4px; }
-.sub-title { font-size: 14px; color: #999; margin-bottom: 16px; }
-.divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: #bbb; font-size: 13px; }
-.divider::before,.divider::after { content: ''; flex: 1; border-top: 1px dashed #dcdfe6; }
-
-.stat-table { width: 100%; max-width: 420px; margin: 0 auto; border-collapse: collapse; border: 1px solid #e4e7ed; }
-.stat-table td { padding: 10px; text-align: center; font-size: 14px; }
-.stat-table tr.stripe { background: #f5f7fa; }
-
-.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; min-width: 0; }
+.assess-page {
+  padding: 20px 24px;
+  height: calc(100vh - 84px);
+  overflow-y: auto;
+  background: #f0f2f5;
+}
+
+.page-title {
+  font-size: 20px;
+  color: #1a1a2e;
+  margin: 0 0 16px;
+  font-weight: 600;
+}
+
+.page-title::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 20px;
+  background: #409EFF;
+  margin-right: 10px;
+  vertical-align: middle;
+  border-radius: 2px;
+}
+
+.assess-tabs {
+  margin-bottom: 20px;
+}
+
+.assess-tabs :deep(.el-tabs__header) {
+  background: #fff;
+}
+
+.tab-card {
+  text-align: center;
+  padding: 28px 20px 20px;
+}
+
+.big-number {
+  margin-bottom: 8px;
+}
+
+.num {
+  font-size: 42px;
+  font-weight: 700;
+  color: #409EFF;
+}
+
+.unit {
+  font-size: 20px;
+  color: #888;
+  margin-left: 4px;
+}
+
+.sub-title {
+  font-size: 14px;
+  color: #999;
+  margin-bottom: 16px;
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 16px 0;
+  color: #bbb;
+  font-size: 13px;
+}
+
+.divider::before, .divider::after {
+  content: '';
+  flex: 1;
+  border-top: 1px dashed #dcdfe6;
+}
+
+.stat-table {
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+  border-collapse: collapse;
+  border: 1px solid #e4e7ed;
+}
+
+.stat-table td {
+  padding: 10px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.stat-table tr.stripe {
+  background: #f5f7fa;
+}
+
+.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;
+  min-width: 0;
+}
 </style>