diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue
index 7d887da..d291228 100644
--- a/src/components/item-wrap/item-wrap.vue
+++ b/src/components/item-wrap/item-wrap.vue
@@ -9,7 +9,7 @@
{{ title }}
- 单位: kg
+ 单位: 吨
+
diff --git a/src/views/indexs/center-map.vue b/src/views/indexs/center-map.vue
index d369ba8..540970e 100644
--- 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: {
diff --git a/src/views/indexs/chart/baseChart.vue b/src/views/indexs/chart/baseChart.vue
index 23bf74f..b23b8ee 100644
--- a/src/views/indexs/chart/baseChart.vue
+++ b/src/views/indexs/chart/baseChart.vue
@@ -10,7 +10,7 @@
-
+
diff --git a/src/views/indexs/chart/month-carbon.vue b/src/views/indexs/chart/month-carbon.vue
new file mode 100644
index 0000000..3768517
--- /dev/null
+++ b/src/views/indexs/chart/month-carbon.vue
@@ -0,0 +1,162 @@
+
+
+
+
+
+
+
diff --git a/src/views/indexs/index.vue b/src/views/indexs/index.vue
index df22e1c..1c45e0e 100644
--- a/src/views/indexs/index.vue
+++ b/src/views/indexs/index.vue
@@ -50,15 +50,23 @@
- 相当于种植了约XX棵树
+ 相当于种植了约{{ treeCount }}棵树
-
-
-
-
+
+
+
+
+
+
@@ -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 {
diff --git a/src/views/indexs/left-bottom.vue b/src/views/indexs/left-bottom.vue
index c67c338..ca824e2 100644
--- 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
用电量:${params[1].value}kWh
行驶里程:${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
行驶里程:${params[1].value}km`;
+ const month = params[0].name;
+ const hydrogen = params[0].value;
+ const mileage = params[1].value;
+ return `${month}
用氢量:${hydrogen}吨
行驶里程:${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 {