xiabin

sub-government-affairs-service/src/views/resource/database/Statistics.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
+  <!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
-    <!-- <div class="custom-page">
+  <div class="custom-page">
+    <!-- <div class="custom-page"> -->
     <div class="content">
       <div style="display: flex">
         <pieChart v-for="(item, index) in data" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
@@ -8,7 +9,7 @@
       <div style="display: flex; margin-top: 20px">
         <pieChart v-for="(item, index) in data1" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
       </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -19,21 +20,113 @@ import { ref, onBeforeMount, reactive } from 'vue';
 import 'echarts-gl';
 import pieChart from './components/pie-chart.vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
+import { color } from 'echarts';
 let dataColor0 = ['#01D3D3', '#00C4F2', '#4A68FF', '#00DD97', '#01D3D3', '#00C4F2', '#4A68FF', '#00DD97'];
 let data = ref([
   {
     title: '农用地面积数据',
-    data: [],
+    data: [
+      {
+        name: '耕地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#01D3D3',
+        },
+        value: '45.60',
+      },
+      {
+        name: '园地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#00C4F2',
+        },
+        value: '28.49',
+      },
+      {
+        name: '草地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#4A68FF',
+        },
+        value: '16.30',
+      },
+      {
+        name: '林地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#00DD97',
+        },
+        value: '17.71',
+      },
+    ],
     refs: 'chart1',
   },
   {
     title: '土地流转面积数据',
-    data: [],
+    data: [
+      {
+        name: '耕地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#01D3D3',
+        },
+        value: '3.63',
+      },
+      {
+        name: '园地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#00C4F2',
+        },
+        value: '2.65',
+      },
+      {
+        name: '草地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#4A68FF',
+        },
+        value: '2.14',
+      },
+      {
+        name: '林地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#00DD97',
+        },
+        value: '1.65',
+      },
+    ],
     refs: 'chart1',
   },
   {
     title: '耕地面积数据',
-    data: [],
+    data: [
+      {
+        name: '水浇地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#01D3D3',
+        },
+        value: '20.72',
+      },
+      {
+        name: '水田',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#00C4F2',
+        },
+        value: '28.49',
+      },
+      {
+        name: '旱地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#4A68FF',
+        },
+        value: '16.30',
+      },
+    ],
     refs: 'chart1',
   },
 ]);
@@ -41,17 +134,68 @@ let data = ref([
 let data1 = ref([
   {
     title: '园地面积数据',
-    data: [],
+    data: [
+      {
+        name: '果园',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#01D3D3',
+        },
+        value: '15.44',
+      },
+      {
+        name: '茶园',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#00C4F2',
+        },
+        value: '13.01',
+      },
+    ],
     refs: 'chart1',
   },
   {
     title: '林地面积数据',
-    data: [],
+    data: [
+      {
+        name: '灌木从地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#01D3D3',
+        },
+        value: '7.49',
+      },
+      {
+        name: '竹林地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#00C4F2',
+        },
+        value: '8.80',
+      },
+    ],
     refs: 'chart1',
   },
   {
     title: '草地面积数据',
-    data: [],
+    data: [
+      {
+        name: '人工牧草地',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#01D3D3',
+        },
+        value: '10.71',
+      },
+      {
+        name: '其他',
+        itemStyle: {
+          opacity: 0.9,
+          color: '#00C4F2',
+        },
+        value: '1.71',
+      },
+    ],
     refs: 'chart1',
   },
 ]);