图表调整 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/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>