feat：修改地图存放位置，添加图表点击事件

src/components/charts/barChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chartDom" class="charts"></div>
+    <div ref="chartDom" class="charts"></div>
 </template>
 
 <script setup>
@@ -8,18 +8,18 @@ import * as echarts from "echarts";
 import { barOption } from "./options/barOption.js";
 
 const props = defineProps({
-  styleName: {
-    type: String,
-    default: "styleName1",
-  },
-  xData: {
-    type: Array,
-    default: () => [],
-  },
-  yData: {
-    type: Array,
-    default: () => [],
-  },
+    styleName: {
+        type: String,
+        default: "styleName1",
+    },
+    xData: {
+        type: Array,
+        default: () => [],
+    },
+    yData: {
+        type: Array,
+        default: () => [],
+    },
 });
 
 const chartDom = ref(null);
@@ -27,33 +27,99 @@ const myChart = ref(null);
 const options = ref(null);
 
 const initData = () => {
-  if (props.styleName === "styleName2") {
-    const arr = [];
-    props.yData.forEach((item, index) => {
-      arr.push({
-        value:item.startNum,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: item.startColor,
-            },
-            {
-              offset: 1,
-              color: item.endColor,
-            },
-          ]),
-        },
-      });
+    if (props.styleName === "styleName2") {
+        const arr = [];
+        props.yData.forEach((item, index) => {
+            arr.push({
+                value: item.startNum,
+                itemStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: item.startColor,
+                            },
+                            {
+                                offset: 1,
+                                color: item.endColor,
+                            },
+                        ]),
+                    },
+                },
+            });
+        });
+        barOption[props.styleName].series[0].data = arr;
+    } else {
+        barOption[props.styleName].series[0].data = props.yData;
+    }
+    barOption[props.styleName].xAxis.data = props.xData;
+    options.value = barOption[props.styleName];
+    myChart.value.setOption(options.value);
+
+    // 用于存储当前高亮的数据索引
+    let currentHighlightedIndex = null;
+    // 监听点击事件
+    myChart.value.on("click", (params) => {
+        // params 是点击事件返回的所有信息对象
+        console.log(params);
+
+        // 例如，可以在控制台输出点击的柱状图的值
+        console.log("你点击了：" + params.name + "，其值为：" + params.value);
 
+        // 如果当前已经有高亮的数据索引，并且不是当前点击的索引，则取消之前的高亮
+        if (currentHighlightedIndex !== null && currentHighlightedIndex !== params.dataIndex) {
+            // myChart.value.dispatchAction({
+            //     type: 'downplay',
+            //     seriesIndex: params.seriesIndex,
+            //     dataIndex: currentHighlightedIndex
+            // });
+            // 取消之前高亮的效果（如果有的话）
+            myChart.value.dispatchAction({
+                type: "downplay",
+                seriesIndex: 0,
+                dataIndex: currentHighlightedIndex,
+            });
+            myChart.value.dispatchAction({
+                type: "downplay",
+                seriesIndex: 1,
+                dataIndex: currentHighlightedIndex,
+            });
+            myChart.value.dispatchAction({
+                type: "downplay",
+                seriesIndex: 2,
+                dataIndex: currentHighlightedIndex,
+            });
+        }
+        // 高亮当前点击的柱状体
+        myChart.value.dispatchAction({
+            type: "highlight",
+            seriesIndex: 0,
+            dataIndex: params.dataIndex,
+        });
+        // 高亮当前点击的柱状体
+        myChart.value.dispatchAction({
+            type: "highlight",
+            seriesIndex: 1,
+            dataIndex: params.dataIndex,
+        });
+        // 高亮当前点击的柱状体
+        myChart.value.dispatchAction({
+            type: "highlight",
+            seriesIndex: 2,
+            dataIndex: params.dataIndex,
+        });
+        console.log("00000000", params.dataIndex);
+
+        // 高亮当前点击的柱状体
+        // myChart.value.dispatchAction({
+        //     type: 'highlight',
+        //     seriesIndex: params.seriesIndex,
+        //     dataIndex: params.dataIndex
+        // });
+
+        // 更新当前高亮的数据索引
+        currentHighlightedIndex = params.dataIndex;
     });
-    barOption[props.styleName].series[0].data = arr
-  } else {
-    barOption[props.styleName].xAxis.data = props.xData;
-    barOption[props.styleName].series[0].data = props.yData;
-  }
-  options.value = barOption[props.styleName];
-  myChart.value.setOption(options.value);
 };
 
 // // 窗口大小变化时重置 ECharts 宽高
@@ -75,14 +141,14 @@ const initData = () => {
 // });
 
 onMounted(() => {
-  myChart.value = echarts.init(chartDom.value);
-  initData();
+    myChart.value = echarts.init(chartDom.value);
+    initData();
 });
 </script>
 
 <style lang="scss" scoped>
 .charts {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 </style>

src/components/charts/options/barOption.js

@@ -77,26 +77,68 @@ const styleName2 = {
         position: "insideTop",
       },
       itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: "#BBA269",
-          },
-          {
-            offset: 1,
-            color: "#3D3523",
-          },
-        ]),
+        normal:{
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#BBA269",
+            },
+            {
+              offset: 1,
+              color: "#3D3523",
+            },
+          ]),
+        },
+        emphasis: {
+          color: '#ff0000' // 高亮时的颜色
+        },
         // borderRadius: [2, 2, 0, 0],
       },
     },
     {
-      data: [0, 22, 28],
+      data: [130, 140, 80,0, 0],
+      type: "bar",
+      barWidth: 26,
+      stack: "total",
+      label: {
+        show: true,
+        color: "#fff",
+        position: "insideTop",
+        formatter: ({ value }) => {
+          return value ? value : "";
+        },
+      },
+      itemStyle: {
+        normal:{
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#bb7d4c",
+            },
+            {
+              offset: 1,
+              color: "#90603a",
+            },
+          ]),
+        },
+        emphasis: {
+          color: '#ff0000' // 高亮时的颜色
+        },
+        borderRadius: [2, 2, 0, 0],
+      },
+    },
+    {
+      data: [0,0,80, 130, 130],
       type: "bar",
       barWidth: 26,
       stack: "total",
       itemStyle: {
-        color: "rgba(56,56,56,0.94)",
+        normal:{
+          color: "rgba(56,56,56,0.94)",
+        },
+        emphasis: {
+          color: '#ff0000' // 高亮时的颜色
+        },
         borderRadius: [2, 2, 0, 0],
       },
       label: {

src/views/home/components/homePage.vue

@@ -32,7 +32,7 @@
             <div :class="['btn-item',{active:active===index}]" @click="handleActive(index)" v-for="(item,index) in diseasesBtnGroup" :key="index">{{item}}</div>
           </div>
         </template> -->
-        <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
+        <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData1" :yData="phenologyYData1"></bar-chart>
         <div class="time-line">
           <div class="line">
             <img class="time-img" src="@/assets/images/home/time-line.png" alt="">
@@ -89,22 +89,32 @@ import pieChart from "@/components/charts/pieChart.vue";
 import oneLineChart from "@/components/charts/oneLineChart.vue";
 
 // 物候调节
-const phenologyXData = ["萌动小叶", "红黄相间", "新梢老熟"]
+const phenologyXData = ["萌动小叶", "红黄相间", "新梢老熟","白点","花穗伸长"]
 const phenologyYData = [{
-  startNum:44,
-  endNum:0,
-  startColor:"#E6AD00",
-  endColor:"#232323"
+  startNum:130,
+  endNum:130,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
 },{
-  startNum:33,
-  endNum:22,
-  startColor:"#FF7C8F",
-  endColor:"#232323"
+  startNum:120,
+  endNum:90,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
 },{
-  startNum:30,
-  endNum:28,
-  startColor:"#0BFE13",
-  endColor:"#232323"
+  startNum:120,
+  endNum:1,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
+},{
+  startNum:130,
+  endNum:0,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
+},{
+  startNum:130,
+  endNum:0,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
 }]
 
 // 病虫测报
@@ -113,6 +123,33 @@ const active = ref(0)
 const handleActive = (i) =>{
   active.value = i
 }
+const phenologyXData1 = ["病虫害03", "病害1", "虫害1","病虫害02","病虫害01"]
+const phenologyYData1 = [{
+  startNum:130,
+  endNum:130,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
+},{
+  startNum:120,
+  endNum:90,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
+},{
+  startNum:120,
+  endNum:1,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
+},{
+  startNum:130,
+  endNum:0,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
+},{
+  startNum:130,
+  endNum:0,
+  startColor:"#c6ab6b",
+  endColor:"#4e442e"
+}]
 
 // 营养评估
 const evaluateXData = ["低", "中", "高"]

src/views/home/index.vue

@@ -56,15 +56,15 @@ import navigation from "@/components/navigation.vue";
 import chartBox from "@/components/chartBox.vue";
 import toolList from "@/components/toolList.vue";
 import fileBar from "@/components/fileBar.vue";
-import HomeMap from "./homeMap";
+import HomeMap from "./map/homeMap";
 import homePage from "./components/homePage.vue";
 import weatherPage from "./components/weatherPage.vue";
 import phenologyPage from "./components/phenologyPage.vue";
 import indicatorChart from "./components/indicatorChart.vue";
 import { useRouter } from "vue-router";
-import SamplePointLayer from "./samplePointLayer";
+import SamplePointLayer from "./map/samplePointLayer";
 import {useStore} from "vuex";
-import RegionLayer from "./regionLayer";
+import RegionLayer from "./map/regionLayer";
 let store = useStore()
 const components = {
   homePage,

src/views/home/regionLayer.js → src/views/home/map/regionLayer.js

@@ -11,7 +11,7 @@ import {unByKey} from "ol/Observable";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import {Vector as VectorSource} from "ol/source";
-import {newRegionFeature} from "../zhgl/map";
+import {newRegionFeature} from "../../zhgl/map";
 
 /**
  * @description 地图层对象

src/views/home/samplePointLayer.js → src/views/home/map/samplePointLayer.js

@@ -11,7 +11,7 @@ import {unByKey} from "ol/Observable";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import {Cluster, Vector as VectorSource} from "ol/source";
-import {newPoint} from "../zhgl/map";
+import {newPoint} from "../../zhgl/map";
 
 /**
  * @description 地图层对象