fix: 果园日志图表， 气象预警图表

src/components/charts/oneLineChart.vue

@@ -0,0 +1,43 @@
+<template>
+    <div ref="chartDom" class="charts"></div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import { oneLine } from "./options/oneLineOption";
+import { deepClone } from "@/common/commonFun";
+
+const props = defineProps({
+    styleName: {
+        type: String,
+        default: "styleName1",
+    },
+    xData: {
+        type: Array,
+        default: () => [],
+    },
+    yData: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const chartDom = ref(null);
+const myChart = ref(null);
+const options = ref(null);
+
+onMounted(() => {
+    myChart.value = echarts.init(chartDom.value);
+    const options = deepClone(oneLine);
+
+    myChart.value.setOption(options);
+});
+</script>
+
+<style lang="scss" scoped>
+.charts {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/components/charts/options/oneLineOption.js

@@ -0,0 +1,147 @@
+import * as echarts from "echarts";
+
+
+export const oneLine = {
+    tooltip: {
+        trigger: "axis",
+    },
+    grid: {
+        top: 14,
+        left: 6,
+        right: 6,
+        bottom: 6,
+        containLabel: true,
+    },
+    xAxis: {
+        type: 'category',
+        // 分割线
+        axisTick: {
+            show: false,
+        },
+        splitLine: {
+            show: false,
+        },
+        axisLabel: {
+            // interval: 0,
+            rotate: 15,
+            margin: 14,
+            textStyle: {
+                color: "#9F9F9F",
+                fontSize: 10
+            },
+        },
+        axisLine: {
+            lineStyle: {
+                color: "rgba(185, 185, 185, 0.12)",
+            }
+        },
+        data: ['9/1', '9/7', '9/13', '9/19', '9/25', '10/1', '10/7']
+    },
+    yAxis: [{
+        type: 'value',
+        offset: 10,
+        axisTick: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisLabel: {
+            align: "center",
+            formatter: '{value} °',
+            textStyle: {
+                color: "#fff",
+                fontSize: 10
+            },
+        },
+        // 分割线
+        splitLine: {
+            lineStyle: {
+                type: [4, 3],
+                dashOffset: 5,
+                color: "#333333",
+            },
+        },
+        splitNumber: 4, // 设置5个分割段
+    }],
+    series: [
+        {
+            name: "温度",
+            data: [21, 27, 32, 22, 20, 24, 26],
+            type: 'line',
+            smooth: true,
+            symbol: "none",
+            itemStyle: { color: "#FF7219" },
+            lineStyle: {
+                color: "#FF7219", // 折线颜色为红色
+                width: 2, // 线条宽度
+            },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#F0AC37" }, // 渐变起始颜色
+                    { offset: 1, color: "rgba(35, 35, 35, 0)" }, // 渐变结束颜色
+                ]),
+            },
+            markPoint: {
+                symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
+                symbolSize: [0, 0],
+                data: [
+                    {
+                        name: "text",
+                        value: "最高",
+                        xAxis: '9/13',
+                        yAxis: 32,
+                        symbolOffset: [0, "-50%"],
+                        label: {
+                            offset: [0, 22],
+                            color: "#fff",
+                            height: 20,
+                            borderRadius: 10,
+                        },
+                    },
+                    {
+                        name: "mark",
+                        xAxis: '9/13',
+                        yAxis: 32,
+                        value: "",
+                        label: {
+                            backgroundColor: "#fff",
+                            borderWidth: 2,
+                            borderColor: "rgba(255, 255, 255, 0.5)",
+                            borderRadius: 8,
+                            width: 6,
+                            height: 6,
+                        },
+                    },
+                    {
+                        name: "text",
+                        value: "最低",
+                        xAxis: '9/25',
+                        yAxis: 20,
+                        symbolOffset: [0, "-50%"],
+                        label: {
+                            offset: [0, 22],
+                            color: "#fff",
+                            height: 20,
+                            borderRadius: 10,
+                        },
+                    },
+                    {
+                        name: "mark",
+                        xAxis: '9/25',
+                        yAxis: 20,
+                        value: "",
+                        label: {
+                            backgroundColor: "#fff",
+                            borderWidth: 2,
+                            borderColor: "rgba(255, 255, 255, 0.5)",
+                            borderRadius: 8,
+                            width: 6,
+                            height: 6,
+                        },
+                    },
+                ]
+            },
+        }
+    ],
+}

src/views/home/components/homePage.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="chart-list">
     <div class="chart-item">
-      <chart-box name="气象预警" arrow="left"></chart-box>
+      <chart-box name="气象预警" arrow="left">
+        <one-line-chart></one-line-chart>
+      </chart-box>
     </div>
     <div class="chart-item phenology">
       <chart-box name="物候调节" arrow="left">
@@ -57,6 +59,7 @@ import {ref} from 'vue'
 import chartBox from "@/components/chartBox.vue";
 import barChart from "@/components/charts/barChart.vue";
 import pieChart from "@/components/charts/pieChart.vue";
+import oneLineChart from "@/components/charts/oneLineChart.vue";
 
 // 物候调节
 const phenologyXData = ["萌动小叶", "红黄相间", "新梢老熟"]