添加作物风险评估总结数据图

src/App.vue

@@ -1,7 +1,6 @@
 <script setup lang='ts'>
 import { RouterView } from "vue-router"
-import ReducedataStatistics from "./components/cdStatictics/reducedataStatistics.vue";
-import RefluxcdStatictics from "./components/cdStatictics/refluxcdStatictics.vue";
+import PlantingRiskStatistics from "./views/User/dataStatistics/PlantingRiskStatistics.vue";
 </script>
 
 <template>

src/views/User/dataStatistics/PlantingRiskStatistics.vue

@@ -1,23 +1,117 @@
 <template>
-  <div class="">
-    
-  </div>
+  <div class="chart-wrapper" ref="chartRef"></div>
 </template>
 
-<script>
-export default {
-  name: '',
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+import axios from 'axios'
+
+onMounted(async () => {
+  try {
+    // 1. 真实接口请求
+    const res = await axios.get('http://localhost:8000/api/unit-grouping/areas/statistics')
+    const apiData = res.data
+
+    // 2. 处理数据
+    const regions = Object.keys(apiData.area_statistics)
+    const categories = ['优先保护类', '严格管控类', '安全利用类']
+    
+    // 计算全部县的汇总数据
+    const totalData = {}
+    categories.forEach(category => {
+      totalData[category] = regions.reduce((sum, region) => {
+        return sum + apiData.area_statistics[region][category]
+      }, 0)
+    })
     
+    // 添加"全部县"到地区列表
+    const allRegions = [...regions, '全部县']
+    
+    // 构造ECharts系列数据，包含全部县汇总
+    const seriesData = categories.map(category => ({
+      name: category,
+      type: 'bar',
+      data: [
+        ...regions.map(region => apiData.area_statistics[region][category]),
+        totalData[category]  // 添加汇总数据
+      ]
+    }))
+
+    // 3. 渲染图表
+    const chartDom = chartRef.value
+    const myChart = echarts.init(chartDom)
+
+    const option = {
+      title: { 
+        text: '作物风险按区域分类数据统计', 
+        left: 'center' 
+      },
+      tooltip: { 
+        trigger: 'axis', 
+        axisPointer: { type: 'shadow' } 
+      },
+      legend: { 
+        data: categories, 
+        bottom: 10 
+      },
+      xAxis: { 
+        type: 'category', 
+        data: allRegions,  // 使用包含全部县的地区列表
+        axisLabel: { 
+          fontSize: 14,
+          // 为了区分汇总项，可以给"全部县"添加特殊样式
+          formatter: (value) => {
+            return value === '全部县' ? `{total|${value}}` : value
+          },
+          rich: {
+            total: {
+              fontWeight: 'bold',
+              color: '#c23531'
+            }
+          }
+        }
+      },
+      yAxis: { 
+        type: 'value', 
+        name: '数量', 
+        axisLabel: { fontSize: 14 } 
+      },
+      series: seriesData,
+      grid: { 
+        left: '5%', 
+        right: '5%', 
+        bottom: '15%', 
+        containLabel: true 
+      }
+    }
+
+    myChart.setOption(option)
+    
+    // 监听窗口变化自适应
+    const handleResize = () => myChart.resize()
+    window.addEventListener('resize', handleResize)
+    
+    // 组件卸载时清除事件监听
+    onUnmounted(() => {
+      window.removeEventListener('resize', handleResize)
+    })
+
+  } catch (error) {
+    console.error('接口请求失败：', error)
   }
-};
+})
+
+const chartRef = ref(null)
+
+// 引入onUnmounted
+import { onUnmounted } from 'vue'
 </script>
 
 <style scoped>
-  
-</style>
+.chart-wrapper {
+  width: 100%;
+  height: 500px;
+  margin: 20px 0;
+}
+</style>