首页

src/views/index.vue

@@ -5,35 +5,59 @@
         <h2>资源调查进度</h2>
         <div ref="lineChart" class="chart"></div>
       </div>
-
-      <div class="chart-container">
-        <h2>产品销售统计</h2>
-        <div ref="barChart" class="chart"></div>
-      </div>
     </div>
 
     <div class="chart-row">
-      <div class="chart-container">
-        <h2>用户分布比例</h2>
-        <div ref="pieChart" class="chart"></div>
-      </div>
-
       <div class="info-cards">
         <div class="info-card">
-          <h3>总用户数</h3>
+          <h3>总地块数</h3>
           <p class="number">12,345</p>
           <p class="trend up">↑ 12% 同比</p>
         </div>
         <div class="info-card">
-          <h3>本月销售额</h3>
+          <h3>已调查数</h3>
           <p class="number">¥ 456,789</p>
           <p class="trend up">↑ 8% 环比</p>
         </div>
+      </div>
+
+      <div class="info-cards">
         <div class="info-card">
-          <h3>活跃用户</h3>
+          <h3>待调查数</h3>
           <p class="number">8,642</p>
           <p class="trend down">↓ 3% 环比</p>
         </div>
+        <div class="info-card">
+          <h3>承包总金额</h3>
+          <p class="number">¥ 456,789</p>
+          <p class="trend up">↑ 8% 环比</p>
+        </div>
+      </div>
+
+      <div class="info-cards">
+        <div class="info-card">
+          <h3>兑现总额</h3>
+          <p class="number">8,642</p>
+          <p class="trend down">↓ 3% 环比</p>
+        </div>
+        <div class="info-card">
+          <h3>尚欠总额</h3>
+          <p class="number">¥ 456,789</p>
+          <p class="trend up">↑ 8% 环比</p>
+        </div>
+      </div>
+
+      <div class="info-cards">
+        <div class="info-card">
+          <h3>年总收益</h3>
+          <p class="number">8,642</p>
+          <p class="trend down">↓ 3% 环比</p>
+        </div>
+        <div class="info-card">
+          <h3>经营总面积</h3>
+          <p class="number">¥ 456,789</p>
+          <p class="trend up">↑ 8% 环比</p>
+        </div>
       </div>
     </div>
   </div>
@@ -46,8 +70,7 @@
     name: 'Dashboard',
     mounted() {
       this.initLineChart();
-      this.initBarChart();
-      this.initPieChart();
+
     },
     methods: {
       initLineChart() {
@@ -107,107 +130,6 @@
           chart.resize();
         });
       },
-      initBarChart() {
-        const chart = echarts.init(this.$refs.barChart);
-        const option = {
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
-          },
-          legend: {
-            data: ['2022', '2023']
-          },
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          xAxis: {
-            type: 'value'
-          },
-          yAxis: {
-            type: 'category',
-            data: ['产品A', '产品B', '产品C', '产品D', '产品E']
-          },
-          series: [
-            {
-              name: '2022',
-              type: 'bar',
-              data: [320, 302, 341, 374, 390],
-              itemStyle: {
-                color: '#91CC75'
-              }
-            },
-            {
-              name: '2023',
-              type: 'bar',
-              data: [420, 432, 401, 454, 590],
-              itemStyle: {
-                color: '#5470C6'
-              }
-            }
-          ]
-        };
-        chart.setOption(option);
-        window.addEventListener('resize', function() {
-          chart.resize();
-        });
-      },
-      initPieChart() {
-        const chart = echarts.init(this.$refs.pieChart);
-        const option = {
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            orient: 'vertical',
-            right: 10,
-            top: 'center'
-          },
-          series: [
-            {
-              name: '用户分布',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: '#fff',
-                borderWidth: 2
-              },
-              label: {
-                show: false,
-                position: 'center'
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: '18',
-                  fontWeight: 'bold'
-                }
-              },
-              labelLine: {
-                show: false
-              },
-              data: [
-                { value: 1048, name: '华北地区' },
-                { value: 735, name: '华东地区' },
-                { value: 580, name: '华南地区' },
-                { value: 484, name: '西部地区' },
-                { value: 300, name: '东北地区' }
-              ],
-              color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE']
-            }
-          ]
-        };
-        chart.setOption(option);
-        window.addEventListener('resize', function() {
-          chart.resize();
-        });
-      }
     }
   };
 </script>