添加屏幕扩展动画

2025-08-22 17:47:58 +08:00
parent a437d7a485
commit a712dce2cd
10 changed files with 588 additions and 252 deletions
--- a/src/views/ProjectScreen/components/optionList.ts
+++ b/src/views/ProjectScreen/components/optionList.ts
@ -0,0 +1,146 @@
+export let pieOption = {
+  // 定义中心文字
+  graphic: [
+    {
+      type: 'text',
+      left: 'center',
+      top: '40%',
+      style: {
+        text: '70%',
+        fontSize: 24,
+        fontWeight: 'bold',
+        fill: '#fff'
+      }
+    },
+    {
+      type: 'text',
+      left: 'center',
+      top: '50%',
+      style: {
+        text: '总进度',
+        fontSize: 14,
+        fill: '#fff'
+      }
+    },
+  ],
+  legend: {
+    show: true,
+    type: 'plain',
+    bottom: 20,
+    itemWidth: 12,
+    itemHeight: 12,
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  series: {
+    type: 'pie',
+    data: [],
+    radius: [50, 80],
+    center: ['50%', '45%'],
+    itemStyle: {
+      borderColor: '#fff',
+      borderWidth: 1
+    },
+    label: {
+      alignTo: 'edge',
+      formatter: '{name|{b}}\n{percent|{c} %}',
+      minMargin: 10,
+      edgeDistance: 20,
+      lineHeight: 15,
+      rich: {
+        name: {
+          fontSize: 12,
+          color: '#fff'
+        },
+        percent: {
+          fontSize: 12,
+          color: '#fff'
+        }
+      }
+    },
+    legend: {
+      top: 'bottom'
+    },
+  }
+};
+
+export let barOption = {
+  legend: {
+    icon: 'rect',
+    itemWidth: 12,
+    itemHeight: 12,
+    // 调整文字与图标间距
+    data: ['计划流转面积', '已流转面积'],
+    top: 0,
+    right: 20,
+    textStyle: {
+      color: '#fff',
+    }
+  },
+  xAxis: {
+    type: 'category',
+    data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6'],
+    axisLabel: {
+      color: '#fff'
+    },
+  },
+  yAxis: {
+    name: '单位：m²',
+    type: 'value',
+    axisLabel: {
+      formatter: '{value}'
+    }
+  },
+  grid: {
+    bottom: 0, // 距离容器底部的距离
+    containLabel: true // 确保坐标轴标签不被裁剪
+  },
+  series: [
+    {
+      name: '计划流转面积',
+      type: 'bar',
+      data: [],
+      barWidth: '20%',
+      itemStyle: {
+        color: 'rgb(29, 253, 253)'
+      },
+    },
+    {
+      name: '已流转面积',
+      type: 'bar',
+      data: [],
+      barWidth: '20%',
+      itemStyle: {
+        color: 'rgb(25, 181, 251)'
+      },
+    }
+  ]
+};
+
+export let mapOption = {
+  geo: {
+    map: 'ch',
+    roam: true,
+    aspectScale: Math.cos((47 * Math.PI) / 180),
+  },
+  series: [
+    {
+      type: 'graph',
+      coordinateSystem: 'geo',
+      data: [
+        { name: 'a', value: [7.667821250000001, 46.791734269956265] },
+        { name: 'b', value: [7.404848750000001, 46.516308805996054] },
+        { name: 'c', value: [7.376673125000001, 46.24728858538375] },
+        { name: 'd', value: [8.015320625000001, 46.39460918238572] },
+        { name: 'e', value: [8.616400625, 46.7020608630855] },
+        { name: 'f', value: [8.869981250000002, 46.37539345234199] },
+        { name: 'g', value: [9.546196250000001, 46.58676648282309] },
+        { name: 'h', value: [9.311399375, 47.182454114178896] },
+        { name: 'i', value: [9.085994375000002, 47.55395822835779] },
+        { name: 'j', value: [8.653968125000002, 47.47709530818285] },
+        { name: 'k', value: [8.203158125000002, 47.44506909144329] }
+      ],
+    }
+  ]
+};