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 {