水滴图表

main/package.json

@@ -24,6 +24,7 @@
     "dayjs": "^1.11.11",
     "echarts": "^5.6.0",
     "echarts-gl": "^2.0.9",
+    "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.7.3",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.7",

main/src/components/custom-echart-water-droplet/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script>
+import { ref, reactive, watch, watchEffect } from 'vue';
+import { cloneDeep } from 'lodash';
+import { useEcharts } from '../../hooks/useEcharts';
+
+export default {
+  name: 'customEchartWaterDroplet',
+  props: {
+    chartData: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: Object,
+      default: () => {},
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 78px)',
+    },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const chartRef = ref(null);
+    const { setOptions, getInstance, resize } = useEcharts(chartRef);
+    const option = reactive({
+      tooltip: {
+        formatter: '{b} ({c})',
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: '72%',
+          center: ['50%', '55%'],
+          data: [],
+          labelLine: { show: true },
+          label: {
+            show: true,
+            formatter: '{b} \n ({d}%)',
+            color: '#B1B9D3',
+          },
+        },
+      ],
+    });
+
+    watchEffect(() => {
+      props.chartData && initCharts();
+    });
+
+    watch(
+      () => props.size,
+      () => {
+        resize();
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    function initCharts() {
+      if (props.option) {
+        Object.assign(option, cloneDeep(props.option));
+      }
+      setOptions(props.option);
+      resize();
+      getInstance()?.off('click', onClick);
+      getInstance()?.on('click', onClick);
+    }
+
+    function onClick(params) {
+      emit('click', params);
+    }
+
+    return { chartRef };
+  },
+};
+</script>

main/src/components/index.js

@@ -13,6 +13,7 @@ import customEchartPictorialBar from './custom-echart-pictorial-bar';
 import CustomEchartLineLine from './custom-echart-line-line';
 import CustomEchartBubble from './custom-echart-bubble';
 import CustomEchartPie3d from './custom-echart-pie-3d';
+import CustomEchartWaterDroplet from './custom-echart-water-droplet';
 
 export {
   SvgIcon,
@@ -30,4 +31,5 @@ export {
   CustomEchartLineLine,
   CustomEchartBubble,
   CustomEchartPie3d,
+  CustomEchartWaterDroplet,
 };

main/src/utils/echarts.js

@@ -2,6 +2,8 @@ import * as echarts from 'echarts/core';
 
 import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart, GraphChart } from 'echarts/charts';
 import 'echarts-gl';
+import 'echarts-liquidfill';
+
 import {
   TitleComponent,
   TooltipComponent,

main/yarn.lock

@@ -2190,6 +2190,11 @@ echarts-gl@^2.0.9:
     claygl "^1.2.1"
     zrender "^5.1.1"
 
+echarts-liquidfill@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz#4ec70f3697382d0404c95fff9f3e8dd85c8377da"
+  integrity sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==
+
 echarts@^5.6.0:
   version "5.6.0"
   resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"

sub-government-screen-service/src/views/plant/components/irrigationCharts.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="irrigation-charts">
+    <custom-echart-water-droplet height="100%" :option="option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+let percent = ref(0.6);
+const option = reactive({
+  backgroundColor: 'transparent', //背景色
+  series: [
+    {
+      name: '预估量',
+      type: 'liquidFill',
+      radius: '42%',
+      center: ['50%', '50%'],
+      backgroundStyle: {
+        color: 'transparent',
+      },
+      data: [percent.value, percent.value],
+      amplitude: 12, //水波振幅
+      label: {
+        //标签设置
+        position: ['50%', '45%'],
+        formatter: percent.value * 100 + '%', //显示文本,
+        textStyle: {
+          fontSize: '26px', //文本字号,
+          color: '#fff',
+        },
+      },
+      outline: {
+        borderDistance: 3,
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: {
+            type: 'linear',
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#007DFF',
+              },
+              {
+                offset: 0.6,
+                color: 'rgba(45, 67, 114, 1)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(45, 67, 114, 1)',
+              },
+            ],
+            globalCoord: false,
+          },
+        },
+      },
+      itemStyle: {
+        color: {
+          type: 'linear', // 线性渐变
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: '#45bfe9' },
+            { offset: 1, color: '#01589c' },
+          ],
+          global: false, // 默认为 false
+        },
+      },
+    },
+  ],
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.irrigation-charts {
+  height: 100%;
+}
+</style>

sub-government-screen-service/src/views/plant/index.vue

@@ -39,7 +39,11 @@
                 </customBack>
               </el-col>
               <el-col :span="12">
-                <customBack top-title="智慧水肥灌溉" :top-postion="'right'"> <template #back></template> </customBack>
+                <customBack top-title="智慧水肥灌溉" :top-postion="'right'">
+                  <template #back>
+                    <irrigationCharts></irrigationCharts>
+                  </template>
+                </customBack>
               </el-col>
             </el-row>
           </el-col>
@@ -72,6 +76,7 @@ import plantTypeCharts from './components/plantTypeCharts.vue';
 import insectPestsCharts from './components/insectPestsCharts';
 import pathologyCharts from './components/pathologyCharts.vue';
 import waterfertilizerCharts from './components/waterfertilizerCharts.vue';
+import irrigationCharts from './components/irrigationCharts.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {