From 9f761e9e61ff16e6724dbbe084dbf9bf728e0048 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E6=B0=B8=E8=B6=85?= <2090205686@qq.com>
Date: Thu, 24 Jul 2025 16:32:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=87=BA=E5=93=81=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E9=94=A5=E5=BD=A2=E5=9B=BE=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/entities/components/hotCharts.vue   | 71 +++++++++++++++++--
 1 file changed, 67 insertions(+), 4 deletions(-)

diff --git a/new-digital-agriculture-screen/src/views/entities/components/hotCharts.vue b/new-digital-agriculture-screen/src/views/entities/components/hotCharts.vue
index 11d92d5..b4f6af0 100644
--- a/new-digital-agriculture-screen/src/views/entities/components/hotCharts.vue
+++ b/new-digital-agriculture-screen/src/views/entities/components/hotCharts.vue
@@ -10,13 +10,76 @@
 </template>
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
+import * as echarts from 'echarts';
 
+const colorList = [
+  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+    {
+      offset: 0,
+      color: 'rgba(74, 194, 154, 1)',
+    },
+    {
+      offset: 1,
+      color: 'rgba(189, 255, 243, 1)',
+    },
+  ]),
+  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+    {
+      offset: 0,
+      color: 'rgba(247, 151, 30, 1)',
+    },
+    {
+      offset: 1,
+      color: 'rgba(255, 210, 0, 1)',
+    },
+  ]),
+  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+    {
+      offset: 0,
+      color: 'rgba(86, 204, 242, 1)',
+    },
+    {
+      offset: 1,
+      color: 'rgba(47, 128, 237, 1)',
+    },
+  ]),
+];
 const data = ref([
-  { value: 40, name: '一级', reaVal: '20', itemStyle: { color: '#56b1c0' } },
-  { value: 80, name: '二级', reaVal: '30', itemStyle: { color: '#77c8ca' } },
-  { value: 120, name: '三级', reaVal: '50', itemStyle: { color: '#7bb9cf' } },
+  { value: 40, name: '一级' },
+  { value: 80, name: '二级' },
+  { value: 120, name: '三级' },
 ]);
-const option = reactive({});
+const option = reactive({
+  color: colorList,
+  series: [
+    {
+      name: '',
+      type: 'funnel',
+      top: '11%',
+      left: 'center',
+      width: '40%',
+      sort: 'ascending',
+      gap: 8,
+      label: {
+        normal: {
+          formatter: '{b}',
+          fontSize: 18,
+        },
+      },
+      labelLine: {
+        normal: {
+          show: false,
+        },
+      },
+      itemStyle: {
+        normal: {
+          opacity: 0.8,
+          borderColor: 'rgba(9,20,36,0)',
+        },
+      },
+    },
+  ],
+});
 onMounted(() => {});
 
 const list = ref([