产出品管理-锥形图组件优化

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: 40, name: '一级' },
-  { value: 80, name: '二级', reaVal: '30', itemStyle: { color: '#77c8ca' } },
+  { value: 80, name: '二级' },
-  { value: 120, name: '三级', reaVal: '50', itemStyle: { color: '#7bb9cf' } },
+  { 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([