图表调整 map车辆的点击legend的显示有问题所以不显示marker

2026-02-02 13:36:23 +08:00
parent daa9749c96
commit a19ef010f9
8 changed files with 447 additions and 134 deletions
--- a/src/components/item-wrap/item-wrap.vue
+++ b/src/components/item-wrap/item-wrap.vue
@@ -9,7 +9,7 @@
  <div class="lr_titles">
    <div class="item_title" v-if="title !== ''">
      <span class="title-inner">{{ title }}</span>
-      <span class="unit">单位: kg</span>
+      <span class="unit" v-if="title === '月度碳减排'">单位: 吨</span>
    </div>
    <div
      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
--- a/src/views/home.scss
+++ b/src/views/home.scss
@@ -96,6 +96,36 @@
                }
            }
        }
+
+        .footerFlex {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 33px;
+            background-color: #fff;
+            margin-top: 16px;
+            color: #94a3b8;
+            font-family: "PingFang TC";
+            font-weight: 500;
+            font-size: 10px;
+            line-height: 12px;
+            padding: 0 25px;
+            border-radius: 20px;
+
+            .footer-text-right {
+                display: flex;
+                align-items: center;
+            }
+
+            .status-dot {
+                display: inline-block;
+                width: 6px;
+                height: 6px;
+                background-color: #10b981;
+                border-radius: 50%;
+                margin-right: 6px;
+            }
+        }
    }


--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -40,6 +40,15 @@
        <!-- 头部 e-->
        <!-- 内容  s-->
        <router-view></router-view>
+        <div class="footerFlex">
+          <div class="footer-text-left">
+            Lingniuqingneng © 2026 羚牛氢能. All Rights Reserved.
+          </div>
+          <div class="footer-text-right">
+            <span class="status-dot"></span>API 服务器状态:
+            正常&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;当前版本: v4.2.0-stable
+          </div>
+        </div>
        <!-- 内容 e -->
      </div>
    </div>
--- a/src/views/indexs/center-map.vue
+++ b/src/views/indexs/center-map.vue
@@ -323,13 +323,22 @@ export default {
          inRange: {
            // 渐变颜色，从小到大（绿色系）
            color: [
-              "#a7f3d0",
-              "#6ee7b7",
-              "#34d399",
-              "#10b981",
-              "#059669",
-              "#047857",
+              "#E2F8F2",
+              "#7BC69B",
+              "#08703D",
+              "#005E34",
+              "#036437",
+              "#10B981",
            ],
+            // "#FEFEFE",
+            //   "#F4FDFA",
+            //   "#E2F8F2",
+            //   "#BCE9D8",
+            //   "#7BC69B",
+            //   "#3C9864",
+            //   "#08703D",
+            //   "#005F35",
+            //   "#005E34",
          },
          textStyle: {
            color: "#333333",
@@ -402,26 +411,10 @@ export default {
              },
            },
            itemStyle: {
-              borderColor: "rgba(147, 235, 248, .8)",
-              borderWidth: 1,
-              areaColor: {
-                type: "radial",
-                x: 0.5,
-                y: 0.5,
-                r: 0.8,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
-                  },
-                ],
-                globalCoord: false, // 缺为 false
-              },
-              shadowColor: "rgba(128, 217, 248, .3)",
+              borderColor: "#475569", //地图边缘颜色
+              borderWidth: 0.5,
+              areaColor: "#ffffff",
+              shadowColor: "rgba(0, 0, 0, .1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
@@ -429,15 +422,19 @@ export default {
          },
          {
            data: data2,
-
            type: "scatter",
            coordinateSystem: "geo",
-            // symbol:
-            //   "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
-            // symbolSize: function (val) {
-            //   return 20;
-            //   // return val[2] / 50;
-            // },
+            geoIndex: 1,
+            symbol:
+              "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/truck25.png",
+            symbolSize: function (val) {
+              return 20;
+              // return val[2] / 50;
+            },
+            itemStyle: {
+              borderColor: "#46AEF4",
+              borderWidth: 2
+            },
            legendHoverLink: true,
            showEffectOn: "render",
            rippleEffect: {
@@ -539,13 +536,21 @@ export default {
          inRange: {
            // 渐变颜色，从小到大（绿色系）
            color: [
-              "#a7f3d0",
-              "#6ee7b7",
-              "#34d399",
-              "#10b981",
-              "#059669",
-              "#047857",
+              "#E2F8F2",
+              "#7BC69B",
+              "#08703D",
+              "#005E34",
+              "#036437",
+              "#10B981",
            ],
+            // color: [
+            //   "#a7f3d0",
+            //   "#6ee7b7",
+            //   "#34d399",
+            //   "#10b981",
+            //   "#059669",
+            //   "#047857",
+            // ],
          },
          textStyle: {
            color: "#333333",
@@ -618,26 +623,10 @@ export default {
              },
            },
            itemStyle: {
-              borderColor: "rgba(147, 235, 248, .8)",
-              borderWidth: 1,
-              areaColor: {
-                type: "radial",
-                x: 0.5,
-                y: 0.5,
-                r: 0.8,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
-                  },
-                ],
-                globalCoord: false, // 缺为 false
-              },
-              shadowColor: "rgba(128, 217, 248, .3)",
+              borderColor: "#475569",
+              borderWidth: 0.5,
+              areaColor: "#ffffff",
+              shadowColor: "rgba(0, 0, 0, .1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
@@ -645,6 +634,7 @@ export default {
          },
          {
            data: data2,
+            geoIndex: 1,
            // type: "effectScatter",
            // coordinateSystem: "geo",
            // symbolSize: function (val) {
@@ -653,12 +643,18 @@ export default {
            // },
            type: "scatter",
            coordinateSystem: "geo",
-            symbol:
-              "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/station25.png",
-            symbolSize: function (val) {
-              return 20;
-              // return val[2] / 50;
+            symbolSize: 8,
+            itemStyle: {
+              color: "#FF6B6B",
+              borderColor: "#46AEF4",
+              borderWidth: 2
            },
+            // symbol:
+            //   "image://https://lnh2etest.oss-cn-shanghai.aliyuncs.com/station25.png",
+            // symbolSize: function (val) {
+            //   return 20;
+            //   // return val[2] / 50;
+            // },
            legendHoverLink: true,
            showEffectOn: "render",
            rippleEffect: {
@@ -712,7 +708,7 @@ export default {
              textShadowBlur: 10,
              textBorderWidth: 0,
              color: "#333333",
-              show: true,
+              show: false,
            },
            // colorBy: "data",
            // itemStyle: {
--- a/src/views/indexs/chart/baseChart.vue
+++ b/src/views/indexs/chart/baseChart.vue
@@ -10,7 +10,7 @@
    </div>

    <!-- 右侧 两个环形图 -->
-    <div class="chart-container-right">
+    <!-- <div class="chart-container-right">
      <v-chart
        class="pie-chart"
        :options="pieOptionOne"
@@ -21,7 +21,7 @@
        :options="pieOptionTwo"
        style="width: 140px; height: 100px; margin-left: -11%; margin-top: 5%"
      />
-    </div>
+    </div> -->
  </div>
 </template>

--- a/src/views/indexs/chart/month-carbon.vue
+++ b/src/views/indexs/chart/month-carbon.vue
@@ -0,0 +1,162 @@
+<template>
+  <div ref="chart" class="chart-container"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+import { currentGET } from "api/modules";
+
+export default {
+  name: "MonthCarbonChart",
+  data() {
+    return {
+      monthItems: [],
+      monthCarbon: [],
+      colors: ["#10B981", "#85E5C2", "#EAFAF5"]
+    };
+  },
+  mounted() {
+    this.getMonthData();
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  methods: {
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
+    getMonthData() {
+      currentGET("big2").then((res) => {
+        console.log("月度碳减排");
+        this.monthItems = res.data;
+
+        // 初始化12个月的数据为0
+        this.monthCarbon = new Array(12).fill(0);
+
+        this.monthItems.forEach((item) => {
+          let month = parseInt(item.months.substring(5, 7));
+          this.monthCarbon[month - 1] = item.monthCarbon;
+        });
+
+        console.log("碳减排：" + this.monthCarbon);
+        this.initChart();
+      });
+    },
+    initChart() {
+      this.$nextTick(() => {
+        if (!this.$refs.chart) return;
+
+        const chart = echarts.init(this.$refs.chart);
+
+        // 根据数据值生成渐变色
+        const getColor = (value, maxValue) => {
+          if (maxValue === 0) return this.colors[2];
+          const ratio = value / maxValue;
+          if (ratio > 0.66) return this.colors[0]; // 深色 #10B981
+          if (ratio > 0.33) return this.colors[1]; // 中色 #85E5C2
+          return this.colors[2]; // 浅色 #EAFAF5
+        };
+
+        const maxValue = Math.max(...this.monthCarbon);
+
+        let option = {
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(255, 255, 255, 0.9)",
+            borderColor: "#10B981",
+            borderWidth: 1,
+            textStyle: { color: "#333333" },
+            formatter: (params) => {
+              return `${params[0].name}<br/>碳减排量：${params[0].value}吨`;
+            },
+          },
+          grid: {
+            left: "12%",
+            right: "8%",
+            top: "15%",
+            bottom: "12%",
+            containLabel: true
+          },
+          xAxis: {
+            type: "category",
+            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+            axisLine: {
+              lineStyle: { color: "#d1d5db" }
+            },
+            axisLabel: {
+              color: "#64748b",
+              fontSize: 11,
+              interval: 0, // 显示所有标签
+              rotate: 0
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: {
+            type: "value",
+            name: "吨",
+            nameTextStyle: {
+              color: "#64748b",
+              fontSize: 12
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              color: "#64748b",
+              fontSize: 11
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#f1f5f9",
+                type: 'dashed'
+              }
+            }
+          },
+          series: [
+            {
+              name: "碳减排量",
+              type: "bar",
+              data: this.monthCarbon.map(value => ({
+                value: value,
+                itemStyle: {
+                  color: getColor(value, maxValue)
+                }
+              })),
+              barWidth: "50%",
+              barMaxWidth: 28,
+              itemStyle: {
+                borderRadius: [4, 4, 0, 0]
+              },
+              emphasis: {
+                itemStyle: {
+                  color: "#059669"
+                }
+              }
+            }
+          ]
+        };
+
+        chart.setOption(option);
+        this.chart = chart;
+        this.chart.resize();
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+</style>
--- a/src/views/indexs/index.vue
+++ b/src/views/indexs/index.vue
@@ -50,15 +50,23 @@
          </div>
          <div class="card-desc">
            <span class="line"></span>
-            相当于种植了约XX棵树
+            相当于种植了约{{ treeCount }}棵树
          </div>
        </div>
-        <!-- 月度碳足迹 -->
-        <ItemWrap class="contetn_lr-item" title="月度行驶里程&用氢量">
-          <base-chart />
-        </ItemWrap>
        <!-- 月度碳减排 -->
        <ItemWrap class="contetn_lr-item" title="月度碳减排">
+          <MonthCarbon />
+        </ItemWrap>
+        <!-- 月度行驶里程&用氢量 -->
+        <!-- <ItemWrap class="contetn_lr-item" title="月度行驶里程&用氢量">
+          <base-chart />
+        </ItemWrap> -->
+        <!-- 月月度行驶里程&用氢量 -->
+        <ItemWrap
+          class="contetn_lr-item"
+          style="flex: 1; min-height: 300px"
+          title="月度行驶里程&用氢量"
+        >
          <LeftBottom />
        </ItemWrap>
      </div>
@@ -130,6 +138,7 @@ import RightTop from "./right-top.vue";
 import RightCenter from "./right-center.vue";
 import RightBottom from "./right-bottom.vue";
 import BaseChart from "./chart/baseChart.vue";
+import MonthCarbon from "./chart/month-carbon.vue";
 import RightTopDay from "./right-top-day.vue";
 import { currentGET } from "api/modules";

@@ -143,6 +152,7 @@ export default {
    RightBottom,
    CenterBottom,
    BaseChart,
+    MonthCarbon,
    RightTopDay,
  },
  data() {
@@ -180,6 +190,13 @@ export default {
      ],
    };
  },
+  computed: {
+    // 计算相当于种植的树数量
+    treeCount() {
+      // 1吨碳减排 = 5.464棵树
+      return Math.floor(this.yearCarbonTon * 5.464);
+    },
+  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
@@ -245,7 +262,7 @@ export default {
 .page-container {
  display: flex;
  flex-direction: column;
-  height: calc(100% - 80px);
+  height: calc(100% - 129px);
  overflow: hidden;
 }

@@ -390,7 +407,7 @@ export default {
  border-radius: 20px;
  padding: 15px 20px;
  color: #ffffff;
-  height: 90px;
+  height: 120px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
@@ -410,9 +427,11 @@ export default {
    align-items: baseline;

    .number {
-      font-size: 34px;
+      color: #ffffff;
+      font-family: Outfit;
      font-weight: 700;
-      line-height: 1;
+      font-size: 30px;
+      line-height: 36px;
    }

    .unit {
--- a/src/views/indexs/left-bottom.vue
+++ b/src/views/indexs/left-bottom.vue
@@ -48,21 +48,24 @@ export default {
    },
    getMonthData() {
      currentGET("big2").then((res) => {
-        console.log("月度碳减排");
+        console.log("月度行驶里程&用氢量");
        this.monthItems = res.data;
        console.log(this.monthItems);
+
+        // 初始化12个月的数据为0
+        this.monthHydrogen = new Array(12).fill(0);
+        this.monthMileage = new Array(12).fill(0);
+        this.monthCarbon = new Array(12).fill(0);
+
        this.monthItems.forEach((item) => {
-          //console.log(item.monthHydrogen);
-          //console.log(item.monthMileage);
-          // this.monthHydrogen.push(item.monthHydrogen);
-          // this.monthMileage.push(item.monthMileage);
          let month = parseInt(item.months.substring(5, 7));
-          this.monthMileage[month - 1] = item.monthMileage;
-          this.monthCarbon[month - 1] = item.monthCarbon;
-          this.monthHydrogen[month - 1] = item.monthHydrogen;
+          this.monthMileage[month - 1] = item.monthMileage || 0;
+          this.monthCarbon[month - 1] = item.monthCarbon || 0;
+          this.monthHydrogen[month - 1] = item.monthHydrogen || 0;
        });
-        //console.log('用氢量：'+ this.monthHydrogen);
-        //console.log('里程数：'+ this.monthMileage);
+
+        console.log('用氢量：', this.monthHydrogen);
+        console.log('里程数：', this.monthMileage);
        this.initChart();
      });
    },
@@ -71,29 +74,63 @@ export default {
        if (!this.$refs.chart) return;

        const chart = echarts.init(this.$refs.chart);
+
+        // 初始化12个月的数据
+        const hydrogenData = new Array(12).fill(0);
+        const mileageData = new Array(12).fill(0);
+
+        // 填充数据并转换单位
+        this.monthHydrogen.forEach((value, index) => {
+          hydrogenData[index] = value ? Number((value / 1000).toFixed(2)) : 0; // kg转吨
+        });
+
+        this.monthMileage.forEach((value, index) => {
+          mileageData[index] = value ? Number((value / 10000).toFixed(2)) : 0; // km转万km
+        });
+
+        // 计算数据范围
+        const hydrogenMax = Math.max(...hydrogenData);
+        const mileageMax = Math.max(...mileageData);
+
+        console.log('===== 月度行驶里程&用氢量 数据分析 =====');
+        console.log('用氢量数据(吨):', hydrogenData);
+        console.log('里程数据(万km):', mileageData);
+        console.log('用氢量最大值(吨):', hydrogenMax);
+        console.log('里程最大值(万km):', mileageMax);
+        console.log('用氢量原始数据(kg):', this.monthHydrogen);
+        console.log('里程原始数据(km):', this.monthMileage);
+
        let option = {
          grid: {
-            left: "13%",
+            left: "12%",
+            right: "12%",
+            top: "15%",
+            bottom: "12%",
+            containLabel: true
          },
          tooltip: {
            trigger: "axis",
-            backgroundColor: "rgba(0, 0, 0, 0.8)",
-            borderColor: "#333333",
-            textStyle: { color: "#ffffff" },
-            // formatter: (params) => {
-            //   console.log(params)
-            //   return `用氢量：${params[0].value}kg<br/>用电量：${params[1].value}kWh<br/>行驶里程：${params[2].value}km`;
-            // }
+            backgroundColor: "rgba(255, 255, 255, 0.9)",
+            borderColor: "#059669",
+            borderWidth: 1,
+            textStyle: { color: "#333333" },
            formatter: (params) => {
-              console.log(params);
-              return `用氢量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
+              const month = params[0].name;
+              const hydrogen = params[0].value;
+              const mileage = params[1].value;
+              return `${month}<br/>用氢量：${hydrogen}吨<br/>行驶里程：${mileage}万公里`;
            },
          },
          legend: {
-            //data: ['用氢量', '用电量', '行驶里程'],
-            data: ["用氢量", "行驶里程"],
-            //data: ['用电量', '行驶里程'],
-            textStyle: { color: "#333333" },
+            show: true,
+            data: ["用氢量(吨)", "行驶里程(万公里)"],
+            textStyle: {
+              color: "#64748b",
+              fontSize: 12
+            },
+            top: 0,
+            itemWidth: 20,
+            itemHeight: 10
          },
          xAxis: {
            type: "category",
@@ -112,45 +149,104 @@ export default {
              "11月",
              "12月",
            ],
-            axisLine: { lineStyle: { color: "#666666" } },
-            axisLabel: { color: "#333333" },
-          },
-          yAxis: {
-            type: "value",
-            axisLine: { lineStyle: { color: "#666666" } },
-            splitLine: { lineStyle: { color: "#e0e0e0" } },
-            axisLabel: {
-              color: "#333333",
-              //align: 'left',
-              // margin:70,
-              //width: 100, //将内容的宽度固定
-              // overflow: 'truncate', //超出的部分截断
-              formatter: "{value}kg",
+            axisLine: {
+              lineStyle: { color: "#d1d5db" }
            },
+            axisLabel: {
+              color: "#64748b",
+              fontSize: 11,
+              interval: 0, // 显示所有月份
+              rotate: 0
+            },
+            axisTick: {
+              show: false
+            }
          },
+          yAxis: [
+            {
+              type: "value",
+              name: "吨",
+              nameTextStyle: {
+                color: "#059669",
+                fontSize: 12,
+                padding: [0, 0, 0, 0]
+              },
+              min: 0,
+              max: hydrogenMax > 0 ? Math.ceil(hydrogenMax * 1.5) : 10, // 用氢量Y轴设置为最大值的1.5倍
+              axisLine: {
+                show: false
+              },
+              axisLabel: {
+                color: "#64748b",
+                fontSize: 11,
+                formatter: "{value}"
+              },
+              splitLine: {
+                lineStyle: {
+                  color: "#f1f5f9",
+                  type: 'dashed'
+                }
+              }
+            },
+            {
+              type: "value",
+              name: "万公里",
+              nameTextStyle: {
+                color: "#85E0E5",
+                fontSize: 12,
+                padding: [0, 0, 0, 0]
+              },
+              min: 0,
+              max: mileageMax > 0 ? Math.ceil(mileageMax * 1.1) : 10, // 里程Y轴设置为最大值的1.1倍
+              axisLine: {
+                show: false
+              },
+              axisLabel: {
+                color: "#64748b",
+                fontSize: 11,
+                formatter: "{value}"
+              },
+              splitLine: {
+                show: false
+              }
+            }
+          ],
          series: [
            {
-              name: "用氢量",
+              name: "用氢量(吨)",
              type: "line",
-              //data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
-              data: this.monthHydrogen,
-              // data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
-              itemStyle: { color: "#3399FF" },
+              yAxisIndex: 0,
+              data: hydrogenData,
+              itemStyle: { color: "#059669" },
+              lineStyle: {
+                width: 2,
+                color: "#059669"
+              },
+              smooth: true,
+              symbol: "circle",
+              symbolSize: 6,
+              showSymbol: false,
+              emphasis: {
+                showSymbol: true
+              }
            },
-            // {
-            //   name: '用电量',
-            //   type: 'line',
-            //   //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500],
-            //   data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-            //   itemStyle: { color: '#3f89ff' }
-            // },
            {
-              name: "行驶里程",
+              name: "行驶里程(万公里)",
              type: "line",
-              //data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000],
-              data: this.monthMileage,
-              //data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0],
-              itemStyle: { color: "#a060ff" },
+              yAxisIndex: 1,
+              data: mileageData,
+              itemStyle: { color: "#85E0E5" },
+              lineStyle: {
+                width: 2,
+                color: "#85E0E5"
+              },
+              smooth: true,
+              symbol: "circle",
+              symbolSize: 6,
+              showSymbol: false,
+              emphasis: {
+                showSymbol: true
+              }
            },
          ],
        };
@@ -165,7 +261,8 @@ export default {

 <style scoped>
 .chart-container {
-  width: 110%;
-  height: 270px;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
 }
 </style>