Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 kkfluous
|
22cb6a6e49 |
Generated
+88
-88
@@ -608,94 +608,6 @@
|
||||
"webpack-chain": "^6.4.0",
|
||||
"webpack-dev-server": "^3.11.0",
|
||||
"webpack-merge": "^4.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"json5": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
|
||||
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@vue/cli-shared-utils": {
|
||||
@@ -10511,6 +10423,94 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"json5": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
|
||||
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.6.5",
|
||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
|
||||
|
||||
+3
-3
@@ -7,7 +7,7 @@
|
||||
-->
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
#app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #fafafa;
|
||||
background-color: #091a40;
|
||||
// overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -99,7 +99,7 @@
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, .53);
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
@@ -120,7 +120,7 @@
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
&:hover{
|
||||
border-color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
@@ -142,7 +142,7 @@
|
||||
border-width: 1px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
|
||||
&:hover,
|
||||
@@ -230,7 +230,7 @@
|
||||
|
||||
th.ve-table-header-th {
|
||||
background: #04004E;
|
||||
color: #333;
|
||||
color: #FFF;
|
||||
border-color: $border-color;
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
@@ -244,7 +244,7 @@
|
||||
tr.ve-table-body-tr td.ve-table-expand-td,
|
||||
tr.ve-table-expand-tr td.ve-table-expand-td {
|
||||
background: transparent;
|
||||
color: #333;
|
||||
color: #FFF;
|
||||
border-color: $border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
// 颜色 - 浅色主题
|
||||
// 颜色
|
||||
$primary-color: #1890ff;
|
||||
$primary-color-hl: #40a9ff;
|
||||
$default-color: #1890ff;
|
||||
$primary-color-hl: rgb(41, 52, 67);
|
||||
$default-color: #006569;
|
||||
$link: #1890ff;
|
||||
$active-color: #096dd9;
|
||||
$del-color: #ff4d4f;
|
||||
$content-background: #ffffff;
|
||||
$table-header-background: #f0f7ff;
|
||||
$active-color: rgb(0, 101, 105);
|
||||
$del-color: #ff1839;
|
||||
$content-background: #f3f5fa;
|
||||
$table-header-background: #d8eaff;
|
||||
|
||||
$primary-color-rgba: rgba($color: $primary-color,
|
||||
$alpha: 0.1,
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@@ -76,9 +76,9 @@ $item_title_content-height: calc(100% - 38px);
|
||||
letter-spacing: 2px;
|
||||
background: linear-gradient(
|
||||
92deg,
|
||||
#1890ff 0%,
|
||||
#40a9ff 48.8525390625%,
|
||||
#096dd9 100%
|
||||
#acb1b7 0%,
|
||||
#00eaff 48.8525390625%,
|
||||
#01aaff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
// 2026 年大屏展示 Mock：仅用于覆盖接口返回值，接口请求仍会正常发出。
|
||||
// 数据来源：100 台车辆清单 + 1–8 月车辆里程日报 + 车辆氢费明细（截至 2026-08-12）。
|
||||
// 4–7 月原始日报大量车辆里程为 0，展示层按每 kg 氢气 10 km 的统一比例生成里程 Mock；加氢量沿用 Excel，确保两条曲线同向波动。
|
||||
// 8 月原始里程日报同样缺失，按 1–3 月日均里程补齐截至 8 月 13 日凌晨的 13.5 天数据；用氢量保留 Excel 实际值。
|
||||
// 全部车辆均为 49 吨牵引车头；减碳量按后端实际口径，按月份、车型、车牌首字地区分组计算并将负值归零：
|
||||
// max(0, 行驶里程(km) - 加氢量(kg) × 3.0927)。月度/年度再汇总分组结果。
|
||||
export const DASHBOARD_EXCEL_MOCK = Object.freeze({
|
||||
vehicleTotal: 100,
|
||||
onlineTotal: 62,
|
||||
sourceDate: '2026-08-12',
|
||||
// 日维度取 1–3 月日均里程/用氢量的 70%，再按嘉兴减碳公式计算。
|
||||
day: Object.freeze({
|
||||
mileage: 8991.52,
|
||||
hydrogen: 896.08,
|
||||
carbon: 6220.21
|
||||
}),
|
||||
months: Object.freeze([
|
||||
{ months: '2026-01', monthMileage: 432395.16, monthHydrogen: 43682.45, monthCarbon: 297298.45 },
|
||||
{ months: '2026-02', monthMileage: 322776.94, monthHydrogen: 32454.9, monthCarbon: 222403.67 },
|
||||
{ months: '2026-03', monthMileage: 400880.17, monthHydrogen: 39073.5, monthCarbon: 280037.56 },
|
||||
{ months: '2026-04', monthMileage: 367596.8, monthHydrogen: 36759.68, monthCarbon: 253910.14 },
|
||||
{ months: '2026-05', monthMileage: 372421.1, monthHydrogen: 37242.11, monthCarbon: 257242.43 },
|
||||
{ months: '2026-06', monthMileage: 367411.5, monthHydrogen: 36741.15, monthCarbon: 253782.15 },
|
||||
{ months: '2026-07', monthMileage: 396281.2, monthHydrogen: 39628.12, monthCarbon: 273723.31 },
|
||||
{ months: '2026-08', monthMileage: 173407.84, monthHydrogen: 9703.95, monthCarbon: 143396.43 },
|
||||
{ months: '2026-09', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 },
|
||||
{ months: '2026-10', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 },
|
||||
{ months: '2026-11', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 },
|
||||
{ months: '2026-12', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 }
|
||||
]),
|
||||
year: Object.freeze({
|
||||
mileage: 2833170.71,
|
||||
hydrogen: 275285.86,
|
||||
carbon: 1976162.23,
|
||||
carbonTon: 1976.16
|
||||
})
|
||||
})
|
||||
@@ -146,7 +146,7 @@
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
background: #0a1931;
|
||||
color: #333;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
|
||||
+17
-22
@@ -1,9 +1,8 @@
|
||||
.scale-wrap {
|
||||
color: #333333;
|
||||
color: #d3d6dd;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
|
||||
// &.pageisScale {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
@@ -16,7 +15,7 @@
|
||||
height: 100%;
|
||||
padding: 16px 16px 10px 16px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f5f7fa;
|
||||
background-image: url("../assets/img/u0.svg");
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
@@ -41,10 +40,10 @@
|
||||
height: 56px;
|
||||
|
||||
.imgs {
|
||||
width: 177px;
|
||||
/* height: 113px; */
|
||||
margin-top: 4px;
|
||||
margin-left: 150px;
|
||||
width: 240px;
|
||||
height: 113px;
|
||||
margin-top: -1%;
|
||||
margin-left: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,13 +71,11 @@
|
||||
right: 0;
|
||||
top: 30px;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.blq-icon-shezhi02 {
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -97,7 +94,7 @@
|
||||
font-weight: 900;
|
||||
letter-spacing: 6px;
|
||||
width: 100%;
|
||||
background: linear-gradient(92deg, #1890ff 0%, #40a9ff 48.8525390625%, #096dd9 100%);
|
||||
background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
@@ -117,12 +114,12 @@
|
||||
width: 130px;
|
||||
height: 36px;
|
||||
border-radius: 18px 0px 0px 18px;
|
||||
color: #1890ff;
|
||||
color: #00FBF8;
|
||||
text-indent: 26px;
|
||||
line-height: 36px;
|
||||
font-size: 16px;
|
||||
margin-right: 20px;
|
||||
background: linear-gradient(to right, rgba(24, 144, 255, .1), rgba(24, 144, 255, 0));
|
||||
background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -140,8 +137,7 @@
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
text-indent: 10px;
|
||||
padding: 16px 0 10px 0;
|
||||
|
||||
padding:16px 0 10px 0 ;
|
||||
&::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
@@ -166,19 +162,19 @@
|
||||
|
||||
.setting_inner {
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
background: #FFF;
|
||||
width: 340px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
color: #333333;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 16px rgba(0, 0, 0, .08);
|
||||
color: #000000;
|
||||
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
|
||||
|
||||
.setting_header {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
color: rgb(0, 0, 0);
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
@@ -196,12 +192,11 @@
|
||||
|
||||
// display: flex;
|
||||
.setting_label {
|
||||
color: #666666;
|
||||
color: #555454;
|
||||
}
|
||||
|
||||
.setting_label_tip {
|
||||
.setting_label_tip{
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
color: #838282;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -116,7 +116,7 @@ export default {
|
||||
}
|
||||
|
||||
.title-name{
|
||||
color: #333;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-left: 20px;
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -20,8 +18,7 @@ export default {
|
||||
// { name: '其它：10%', value: 260 }
|
||||
]
|
||||
],
|
||||
colors: ["#00E5FF", "#FF5733"]
|
||||
//colors: ["#00E5FF", "#FF5733", "#FFBF00", "#5CDB95"]
|
||||
colors: ["#00d8ff", "#168cff", "#496dff", "#7658e8", "#18c6b3"]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -34,7 +31,8 @@ export default {
|
||||
// 转换数据结构为饼图需要的格式
|
||||
this.chartData = [res.data.map(item => ({
|
||||
name: item.modelName,
|
||||
value: item.total
|
||||
// 大屏演示口径：49吨牵引车头使用固定 Mock 数量。
|
||||
value: item.modelName === '49吨牵引车头' ? 100 : item.total
|
||||
}))];
|
||||
console.log('车型分布')
|
||||
console.log(this.chartData)
|
||||
@@ -51,69 +49,70 @@ export default {
|
||||
|
||||
initChart() {
|
||||
const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
|
||||
const equipmentData = this.chartData[0] || [];
|
||||
const equipmentTotal = equipmentData.reduce((sum, item) => sum + Number(item.value || 0), 0);
|
||||
const equipmentByName = equipmentData.reduce((result, item) => {
|
||||
result[item.name] = item;
|
||||
return result;
|
||||
}, {});
|
||||
let option = {
|
||||
color: this.colors,
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: '4%',
|
||||
top: 'center',
|
||||
selectedMode: false,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 14,
|
||||
data: equipmentData.map(item => item.name),
|
||||
formatter: function (name) {
|
||||
const item = equipmentByName[name];
|
||||
const value = Number(item && item.value || 0);
|
||||
const percent = equipmentTotal ? ((value / equipmentTotal) * 100).toFixed(2) : '0.00';
|
||||
return `{name|${name}}\n{value|${value}辆} {percent|${percent}%}`;
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: {
|
||||
color: '#eaf8ff',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 18
|
||||
},
|
||||
value: {
|
||||
color: '#4edfff',
|
||||
fontSize: 12,
|
||||
lineHeight: 16
|
||||
},
|
||||
percent: {
|
||||
color: '#8baeff',
|
||||
fontSize: 12,
|
||||
lineHeight: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#333', // 修改为深色
|
||||
color: '#DDDDDD', // 将原来的 #999 改为更亮的灰色
|
||||
fontWeight: 'normal',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: this.chartData.map(function (data, idx) {
|
||||
var top = idx * 33.3;
|
||||
series: this.chartData.map(function (data) {
|
||||
return {
|
||||
type: 'pie',
|
||||
radius: [50, 90],
|
||||
top: top + '%',
|
||||
height: '33.33%',
|
||||
left: 'center',
|
||||
width: '600px',
|
||||
radius: ['42%', '66%'],
|
||||
center: ['74%', '52%'],
|
||||
itemStyle: {
|
||||
borderColor: 'orange',
|
||||
borderWidth: 1
|
||||
},
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
formatter: ({ name, value, percent }) =>
|
||||
`{name|${name}}\n{value|${value}辆} {percent|${percent}%}`,
|
||||
minMargin: 5,
|
||||
edgeDistance: 10,
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
name: { // 新增 name 样式
|
||||
fontSize: 14,
|
||||
color: '#333', // 修改为深色
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
value: {
|
||||
fontSize: 12,
|
||||
color: 'orange',
|
||||
padding: [0, 5, 0, 0]
|
||||
},
|
||||
percent: {
|
||||
fontSize: 12,
|
||||
color: '#FF5733' // 保留原有橙色
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
length: 40,
|
||||
length2: 15,
|
||||
maxSurfaceAngle: 80
|
||||
},
|
||||
labelLayout: function (params) {
|
||||
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
|
||||
const points = params.labelLinePoints;
|
||||
// Update the end point.
|
||||
points[2][0] = isLeft
|
||||
? params.labelRect.x
|
||||
: params.labelRect.x + params.labelRect.width;
|
||||
return {
|
||||
labelLinePoints: points
|
||||
};
|
||||
borderColor: '#061d4a',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: data
|
||||
};
|
||||
})
|
||||
@@ -133,6 +132,6 @@ export default {
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 850px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
<script>
|
||||
import xzqCode from "../../utils/map/xzqCode";
|
||||
import { currentGET } from "api/modules";
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock';
|
||||
import * as echarts from "echarts";
|
||||
import { GETNOBASE } from "api";
|
||||
export default {
|
||||
@@ -94,14 +95,12 @@ export default {
|
||||
return 'district'; // 区县级（如 440305）
|
||||
},
|
||||
getYearData() {
|
||||
currentGET("big3").then((res) => {
|
||||
console.log('年度碳排量');
|
||||
console.log(res);
|
||||
//单位kg
|
||||
// this.maptitle = res.data.yearCarbon;
|
||||
//单位吨
|
||||
this.maptitle = res.data.yearCarbonTon;
|
||||
});
|
||||
// 保留年度接口调用，地图标题使用同一套 Excel Mock 年度减碳量。
|
||||
this.applyYearMock();
|
||||
currentGET("big3").catch(() => {});
|
||||
},
|
||||
applyYearMock() {
|
||||
this.maptitle = DASHBOARD_EXCEL_MOCK.year.carbonTon;
|
||||
},
|
||||
getData(code) {
|
||||
console.log("code", code);
|
||||
@@ -307,7 +306,7 @@ export default {
|
||||
],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
@@ -348,7 +347,7 @@ export default {
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
@@ -433,7 +432,7 @@ export default {
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
@@ -445,11 +444,11 @@ export default {
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: "bottom",
|
||||
textBorderColor: "#333",
|
||||
textBorderColor: "#fff",
|
||||
textShadowColor: "#000",
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: "#333",
|
||||
color: "#FFF",
|
||||
show: true,
|
||||
},
|
||||
// colorBy: "data",
|
||||
@@ -510,7 +509,7 @@ export default {
|
||||
],
|
||||
},
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
@@ -551,7 +550,7 @@ export default {
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
@@ -636,7 +635,7 @@ export default {
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
@@ -648,11 +647,11 @@ export default {
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: "bottom",
|
||||
textBorderColor: "#333",
|
||||
textBorderColor: "#fff",
|
||||
textShadowColor: "#000",
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: "#333",
|
||||
color: "#FFF",
|
||||
show: true,
|
||||
},
|
||||
// colorBy: "data",
|
||||
@@ -719,9 +718,9 @@ export default {
|
||||
letter-spacing: 6px;
|
||||
background: linear-gradient(
|
||||
92deg,
|
||||
#1890ff 0%,
|
||||
#40a9ff 48.8525390625%,
|
||||
#096dd9 100%
|
||||
#0072ff 0%,
|
||||
#00eaff 48.8525390625%,
|
||||
#01aaff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@@ -731,7 +730,7 @@ export default {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 6px;
|
||||
color: #333;
|
||||
color: white;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.zuo,
|
||||
@@ -764,9 +763,9 @@ export default {
|
||||
top: -25px;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
border: 1px solid #1890ff;
|
||||
border: 1px solid #00eded;
|
||||
border-radius: 10px;
|
||||
color: #1890ff;
|
||||
color: #00f7f6;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
@@ -781,9 +780,9 @@ export default {
|
||||
top: 24px;
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
border: 1px solid #1890ff;
|
||||
border: 1px solid #00eded;
|
||||
border-radius: 10px;
|
||||
color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
@@ -798,9 +797,9 @@ export default {
|
||||
top: 24px;
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
border: 1px solid #1890ff;
|
||||
border: 1px solid #00eded;
|
||||
border-radius: 10px;
|
||||
color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
@@ -816,9 +815,9 @@ export default {
|
||||
top: 60px;
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
border: 1px solid #1890ff;
|
||||
border: 1px solid #00eded;
|
||||
border-radius: 10px;
|
||||
color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
letter-spacing: 6px;
|
||||
|
||||
@@ -1,217 +1,200 @@
|
||||
<template>
|
||||
<div class="chart-block">
|
||||
<!-- 左侧 柱状+折线图 -->
|
||||
<div class="chart-container">
|
||||
<v-chart class="bar-line-chart" :options="barLineOption" style="width: 390px;height: 250px;"/>
|
||||
<div ref="chart" class="line-chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧 两个环形图 -->
|
||||
<div class="chart-container-right">
|
||||
<v-chart class="pie-chart" :options="pieOptionOne" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
<v-chart class="pie-chart" :options="pieOptionTwo" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
<div class="metric-card metric-card--carbon">
|
||||
<div class="metric-title"><i></i>累计碳减排</div>
|
||||
<div class="metric-value">{{ formatCarbonTotal(cumulativeCarbon) }}<span>吨</span></div>
|
||||
<div class="metric-line"></div>
|
||||
</div>
|
||||
<div class="metric-card metric-card--mileage">
|
||||
<div class="metric-title"><i></i>累计里程</div>
|
||||
<div class="metric-value">{{ formatMileageTotal(cumulativeMileage) }}<span>万km</span></div>
|
||||
<div class="metric-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VChart from 'vue-echarts'
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts/lib/chart/bar'
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/lib/chart/line'
|
||||
import 'echarts/lib/chart/pie'
|
||||
import 'echarts/lib/component/legend'
|
||||
import 'echarts/lib/component/tooltip'
|
||||
import { currentGET } from 'api/modules'
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock'
|
||||
|
||||
export default {
|
||||
name: 'ChartBlock',
|
||||
components: { VChart },
|
||||
data() {
|
||||
return {
|
||||
/* 柱状图 + 折线图 */
|
||||
barLineOption: {
|
||||
backgroundColor: 'transparent', // 让背景透明，方便在大屏布局中适配
|
||||
tooltip: { trigger: 'axis' ,
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
return `碳减排量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
|
||||
chart: null,
|
||||
cumulativeCarbon: 0,
|
||||
cumulativeMileage: 0,
|
||||
monthCarbon: [],
|
||||
monthMileage: [],
|
||||
months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthData()
|
||||
this.getYearData()
|
||||
window.addEventListener('resize', this.resizeChart)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart)
|
||||
if (this.chart) this.chart.dispose()
|
||||
},
|
||||
methods: {
|
||||
getMonthData() {
|
||||
// 接口继续请求，用于保留原有链路；渲染数据由 Excel Mock 覆盖。
|
||||
this.applyMonthMock()
|
||||
currentGET('big2').catch(() => {})
|
||||
},
|
||||
applyMonthMock() {
|
||||
this.monthCarbon = []
|
||||
this.monthMileage = []
|
||||
DASHBOARD_EXCEL_MOCK.months.forEach((item, index) => {
|
||||
const monthText = item.months || ''
|
||||
const month = Number(monthText.slice(-2)) || index + 1
|
||||
if (month >= 1 && month <= 12) {
|
||||
// 仅展示已有数据月份；9 月以后用空值断开曲线，而非绘制为 0。
|
||||
const hasData = month <= 8
|
||||
this.monthCarbon[month - 1] = hasData ? item.monthCarbon / 1000 : null
|
||||
this.monthMileage[month - 1] = hasData ? item.monthMileage : null
|
||||
}
|
||||
})
|
||||
this.initChart()
|
||||
},
|
||||
getYearData() {
|
||||
this.applyYearMock()
|
||||
currentGET('big3').catch(() => {})
|
||||
},
|
||||
applyYearMock() {
|
||||
this.cumulativeCarbon = DASHBOARD_EXCEL_MOCK.year.carbonTon
|
||||
this.cumulativeMileage = DASHBOARD_EXCEL_MOCK.year.mileage / 10000
|
||||
},
|
||||
initChart() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: 58,
|
||||
bottom: 30,
|
||||
left: 64,
|
||||
right: 56
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params) => {
|
||||
const values = {}
|
||||
params.forEach((item) => { values[item.seriesName] = item.value })
|
||||
return `${params[0].axisValue}<br/>碳减排量：${this.formatCarbon(values['碳减排量(吨)'] || 0)}吨<br/>行驶里程：${this.formatMileage(values['行驶里程(km)'] || 0)}`
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['碳减排量(kg)', '行驶里程(km)'],
|
||||
textStyle: { color: '#333' }
|
||||
},
|
||||
grid: {
|
||||
left: '18%',
|
||||
right: '18%',
|
||||
top: '10%',
|
||||
bottom: '10%'
|
||||
data: ['碳减排量(吨)', '行驶里程(km)'],
|
||||
left: 'center',
|
||||
top: 4,
|
||||
itemWidth: 22,
|
||||
itemHeight: 10,
|
||||
textStyle: { color: '#d8e8ff', fontSize: 13 }
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
axisLine: { lineStyle: { color: '#333' } },
|
||||
axisLabel: { color: '#333' }
|
||||
boundaryGap: false,
|
||||
data: this.months,
|
||||
axisLine: { lineStyle: { color: '#ffffff' } },
|
||||
axisLabel: { color: '#ffffff' }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// name: '碳减排量',
|
||||
axisLine: { lineStyle: { color: '#333' } },
|
||||
axisLabel: { color: '#333' },
|
||||
splitLine: { show: false },
|
||||
name: '碳减排量(吨)',
|
||||
min: 0,
|
||||
max: 300,
|
||||
interval: 50,
|
||||
nameGap: 14,
|
||||
nameTextStyle: { color: '#3399ff', fontSize: 13, fontWeight: 600 },
|
||||
axisLine: { lineStyle: { color: '#3399ff' } },
|
||||
axisTick: { lineStyle: { color: '#3399ff' } },
|
||||
splitLine: { lineStyle: { color: '#091a40' } },
|
||||
axisLabel: {
|
||||
formatter: '{value}kg'
|
||||
color: '#3399ff',
|
||||
margin: 10,
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
// name: '行驶里程',
|
||||
axisLine: { lineStyle: { color: '#333' } },
|
||||
axisLabel: { color: '#333' },
|
||||
name: '行驶里程(km)',
|
||||
min: 0,
|
||||
max: 600000,
|
||||
interval: 100000,
|
||||
nameGap: 14,
|
||||
nameTextStyle: { color: '#a060ff', fontSize: 13, fontWeight: 600 },
|
||||
axisLine: { lineStyle: { color: '#a060ff' } },
|
||||
axisTick: { lineStyle: { color: '#a060ff' } },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
formatter: '{value}km'
|
||||
color: '#a060ff',
|
||||
margin: 12,
|
||||
formatter: (value) => this.formatMileage(value)
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '碳减排量(kg)',
|
||||
type: 'bar',
|
||||
data: [1000, 1500, 1800, 1200, 2000, 2500, 1800, 2200, 3000, 3500,2600, 3600],
|
||||
itemStyle: { color: '#00BAFF' },
|
||||
barWidth: 14,
|
||||
axisLabel: {formatter: '{value} kg'}
|
||||
name: '碳减排量(吨)',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: this.monthCarbon,
|
||||
itemStyle: { color: '#3399ff' },
|
||||
lineStyle: { color: '#3399ff', width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
connectNulls: false,
|
||||
smooth: 0.18
|
||||
},
|
||||
{
|
||||
name: '行驶里程(km)',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900, 5200, 4700, 5500],
|
||||
itemStyle: { color: '#FFC600' },
|
||||
smooth: true,
|
||||
lineStyle: { width: 2 },
|
||||
data: this.monthMileage,
|
||||
itemStyle: { color: '#a060ff' },
|
||||
lineStyle: { color: '#a060ff', width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
axisLabel: {formatter: '{value} km'}
|
||||
symbolSize: 5,
|
||||
connectNulls: false,
|
||||
smooth: 0.18
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/* 环形图1 - 年度碳减排量 */
|
||||
pieOptionOne: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0吨',
|
||||
//subtext: '年度碳减排量',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#333', fontSize: 18 },
|
||||
subtextStyle: { color: '#333', fontSize: 18}
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '年\n度\n碳\n减\n排\n量', // 每个字符换行显示
|
||||
fill: '#333',
|
||||
font: '16px sans-serif',
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '年度碳减排量',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 5, name: '碳排放量', itemStyle: { color: '#7d70f9' } },
|
||||
{ value: 95, name: 'other', itemStyle: { color: '#2f4c6e' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/* 环形图2 - 年度行驶里程 */
|
||||
pieOptionTwo: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0万',
|
||||
//subtext: '年度行驶里程',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#333', fontSize: 18 },
|
||||
subtextStyle: { color: '#333', fontSize: 12 }
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '年\n度\n行\n驶\n里\n程', // 每个字符换行显示
|
||||
fill: '#333',
|
||||
font: '16px sans-serif',
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '年度行驶里程',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 85, name: '行驶里程', itemStyle: { color: '#00BAFF' } },
|
||||
{ value: 15, name: 'other', itemStyle: { color: '#2f4c6e' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
monthItems:[],
|
||||
monthCarbon:[],
|
||||
monthMileage:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthData();
|
||||
this.getYearData();
|
||||
},
|
||||
methods: {
|
||||
getMonthData() {
|
||||
currentGET("big2").then((res) => {
|
||||
console.log('月度碳足迹');
|
||||
this.monthItems = res.data;
|
||||
console.log(this.monthItems);
|
||||
this.monthItems.forEach((item) => {
|
||||
console.log(item.monthCarbon);
|
||||
console.log(item.monthMileage);
|
||||
this.monthCarbon.push(item.monthCarbon);// + 'kg'
|
||||
this.monthMileage.push(item.monthMileage );//+ 'km'
|
||||
});
|
||||
console.log('碳减排：'+ this.monthCarbon);
|
||||
console.log('里程数：'+ this.monthMileage);
|
||||
this.barLineOption.series[0].data = this.monthCarbon;
|
||||
this.barLineOption.series[1].data = this.monthMileage;
|
||||
});
|
||||
})
|
||||
},
|
||||
getYearData() {
|
||||
currentGET("big3").then((res) => {
|
||||
console.log('年度碳减排量');
|
||||
console.log(res);
|
||||
this.pieOptionOne.title.text = res.data.yearCarbonTon + '吨';
|
||||
this.pieOptionTwo.title.text = res.data.yearMileage + '万km';
|
||||
});
|
||||
resizeChart() {
|
||||
if (this.chart) this.chart.resize()
|
||||
},
|
||||
formatCarbonTotal(value) {
|
||||
const total = Number(value) || 0
|
||||
return total % 1 === 0 ? total.toFixed(0) : total.toFixed(1)
|
||||
},
|
||||
formatMileageTotal(value) {
|
||||
const total = Number(value) || 0
|
||||
return total % 1 === 0 ? total.toFixed(0) : total.toFixed(1)
|
||||
},
|
||||
formatMileage(value) {
|
||||
const distance = Number(value) || 0
|
||||
if (distance >= 10000) {
|
||||
const wan = distance / 10000
|
||||
return `${Number.isInteger(wan) ? wan : wan.toFixed(1)}万km`
|
||||
}
|
||||
return `${distance.toFixed(0)}km`
|
||||
},
|
||||
formatCarbon(value) {
|
||||
const carbon = Number(value) || 0
|
||||
return Number.isInteger(carbon) ? carbon.toFixed(0) : carbon.toFixed(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -220,37 +203,111 @@ export default {
|
||||
<style scoped>
|
||||
.chart-block {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
/* 自行控制宽高，若嵌入大屏可由外层决定大小 */
|
||||
width: 800px;
|
||||
height: 300px;
|
||||
/* 背景可保持透明，方便嵌入大屏的背景 */
|
||||
justify-content: space-between;
|
||||
gap: 2px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 6px 14px 4px 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
width: 50%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bar-line-chart {
|
||||
.line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 右侧两个环形图的布局 */
|
||||
.chart-container-right {
|
||||
width: 44%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
left: 14px;
|
||||
flex: 0 0 84px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
margin-right: -20px;
|
||||
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
.metric-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 64px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: #dbeaff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-title i {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
background: #3399ff;
|
||||
box-shadow: 0 0 8px rgba(51, 153, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-title i {
|
||||
background: #a060ff;
|
||||
box-shadow: 0 0 8px rgba(160, 96, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-value span {
|
||||
margin-left: 2px;
|
||||
color: #9bc9ff;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.metric-line {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
bottom: 7px;
|
||||
left: 6px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #3399ff, transparent);
|
||||
box-shadow: 0 0 7px rgba(51, 153, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-line {
|
||||
background: linear-gradient(90deg, transparent, #a060ff, transparent);
|
||||
box-shadow: 0 0 7px rgba(160, 96, 255, 0.9);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</ItemWrap>
|
||||
<ItemWrap
|
||||
class="contetn_left-bottom contetn_lr-item"
|
||||
title="货品分类月度减碳量"
|
||||
title="月度减碳量"
|
||||
style="padding: 0 10px 16px 10px"
|
||||
>
|
||||
<RightCenter />
|
||||
|
||||
+227
-146
@@ -6,109 +6,38 @@
|
||||
<div ref="chart" class="bar-line-chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧 两个环形图 -->
|
||||
<!-- 右侧累计指标 -->
|
||||
<div class="chart-container-right">
|
||||
<v-chart class="pie-chart" :options="pieOptionOne" style="width: 150px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
<v-chart class="pie-chart" :options="pieOptionTwo" style="width: 150px;height:100px;margin-left: -11%;margin-top: 5%;"/>
|
||||
<div class="metric-card metric-card--hydrogen">
|
||||
<div class="metric-title"><i></i>累计用氢量</div>
|
||||
<div class="metric-value">{{ formatHydrogen(cumulativeHydrogen).value }}<span>{{ formatHydrogen(cumulativeHydrogen).unit }}</span></div>
|
||||
<div class="metric-line"></div>
|
||||
</div>
|
||||
<div class="metric-card metric-card--mileage">
|
||||
<div class="metric-title"><i></i>累计里程</div>
|
||||
<div class="metric-value">{{ formatMileageTotal(cumulativeMileage) }}<span>万km</span></div>
|
||||
<div class="metric-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VChart from 'vue-echarts';
|
||||
import echarts from 'echarts';
|
||||
import 'echarts/lib/chart/bar'
|
||||
import 'echarts/lib/chart/line'
|
||||
import 'echarts/lib/chart/pie'
|
||||
import 'echarts/lib/component/legend'
|
||||
import 'echarts/lib/component/tooltip'
|
||||
import { currentGET } from 'api/modules';
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'LeftBottomChart',
|
||||
components: { VChart },
|
||||
data() {
|
||||
return {
|
||||
/* 环形图1 - 月度用氢量 */
|
||||
pieOptionOne: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0吨',
|
||||
//subtext: '月度用氢量',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#333', fontSize: 18 },
|
||||
subtextStyle: { color: '#333', fontSize: 18}
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '月\n度\n用\n氢\n量', // 每个字符换行显示
|
||||
fill: '#333',
|
||||
font: '16px sans-serif',
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '月度用氢量',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 5, name: '用氢量', itemStyle: { color: '#7d70f9' } },
|
||||
{ value: 95, name: 'other', itemStyle: { color: '#2f4c6e' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/* 环形图2 - 年度用氢量 */
|
||||
pieOptionTwo: {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
title: {
|
||||
text: '0万',
|
||||
//subtext: '年度用氢量',
|
||||
left: 'center',
|
||||
top: '40%',
|
||||
textStyle: { color: '#333', fontSize: 18 },
|
||||
subtextStyle: { color: '#333', fontSize: 12 }
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: '0px', // 根据需要调整文字与图表的间距
|
||||
top: 'center', // 垂直居中
|
||||
style: {
|
||||
text: '年\n度\n用\n氢\n量', // 每个字符换行显示
|
||||
fill: '#333',
|
||||
font: '16px sans-serif',
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '年度用氢量',
|
||||
type: 'pie',
|
||||
radius: ['70%', '90%'],
|
||||
hoverAnimation: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 85, name: '用氢量', itemStyle: { color: '#00BAFF' } },
|
||||
{ value: 15, name: 'other', itemStyle: { color: '#2f4c6e' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
cumulativeHydrogen: 0,
|
||||
cumulativeMileage: 0,
|
||||
monthItems:[],
|
||||
monthHydrogen:[],
|
||||
monthMileage:[],
|
||||
@@ -118,38 +47,48 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getMonthData();
|
||||
window.addEventListener('resize', this.resizeChart);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart);
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMonthData() {
|
||||
currentGET("big2").then((res) => {
|
||||
console.log('月度碳减排');
|
||||
this.monthItems = res.data;
|
||||
console.log(this.monthItems);
|
||||
const currentMonth = new Date().getMonth() + 1; // 加1以得到1-12的月份
|
||||
// 保留真实接口调用，图表展示改为 Excel 整理后的 100 台车 Mock 数据。
|
||||
this.applyMonthMock();
|
||||
currentGET("big2").catch(() => {});
|
||||
},
|
||||
applyMonthMock() {
|
||||
this.monthItems = DASHBOARD_EXCEL_MOCK.months;
|
||||
this.monthHydrogen = [];
|
||||
this.monthMileage = [];
|
||||
this.monthCarbon = [];
|
||||
this.monthItems.forEach((item) => {
|
||||
// this.monthHydrogen.push(item.monthHydrogen);
|
||||
// this.monthMileage.push(item.monthMileage);
|
||||
let month = parseInt(item.months.substring(5,7));
|
||||
if(month === currentMonth){
|
||||
this.pieOptionOne.title.text = item.monthHydrogen + '\nkg';
|
||||
}
|
||||
this.monthMileage[month-1] = item.monthMileage;
|
||||
this.monthCarbon[month-1] = item.monthCarbon;
|
||||
this.monthHydrogen[month-1] = item.monthHydrogen;
|
||||
// 9 月以后暂无数据，传入空值以在 8 月断开曲线。
|
||||
const hasData = month <= 8;
|
||||
this.monthMileage[month-1] = hasData ? item.monthMileage : null;
|
||||
this.monthCarbon[month-1] = hasData ? item.monthCarbon : null;
|
||||
this.monthHydrogen[month-1] = hasData ? item.monthHydrogen : null;
|
||||
});
|
||||
//console.log('用氢量：'+ this.monthHydrogen);
|
||||
//console.log('里程数：'+ this.monthMileage);
|
||||
this.getYearData();
|
||||
this.initChart();
|
||||
|
||||
});
|
||||
},
|
||||
initChart()
|
||||
{
|
||||
let chart = echarts.init(this.$refs.chart);
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
let option = {
|
||||
grid:{
|
||||
left:'18%'
|
||||
top: 58,
|
||||
bottom: 30,
|
||||
left: 64,
|
||||
right: 56
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@@ -158,42 +97,71 @@ export default {
|
||||
// return `用氢量：${params[0].value}kg<br/>用电量：${params[1].value}kWh<br/>行驶里程：${params[2].value}km`;
|
||||
// }
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
return `用氢量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
|
||||
const values = {};
|
||||
params.forEach(item => { values[item.seriesName] = item.value; });
|
||||
const hydrogen = this.formatHydrogen(values['用氢量(吨)'] || 0);
|
||||
return `${params[0].axisValue}<br/>用氢量：${hydrogen.value}${hydrogen.unit}<br/>行驶里程：${this.formatMileage(values['行驶里程(km)'] || 0)}`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
//data: ['用氢量', '用电量', '行驶里程'],
|
||||
data: ['用氢量(kg)', '行驶里程(km)'],
|
||||
textStyle: { color: '#333' }
|
||||
data: ['用氢量(吨)', '行驶里程(km)'],
|
||||
left: 'center',
|
||||
top: 4,
|
||||
itemWidth: 22,
|
||||
itemHeight: 10,
|
||||
textStyle: { color: '#d8e8ff', fontSize: 13 }
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLine: { lineStyle: { color: '#333' } }
|
||||
axisLine: { lineStyle: { color: '#fff' } }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#29A0CA' } },
|
||||
splitLine: { lineStyle: { color: '#091a40' } },
|
||||
axisLabel: {
|
||||
align: 'left',
|
||||
margin:70,
|
||||
width: 100, //将内容的宽度固定
|
||||
// overflow: 'truncate', //超出的部分截断
|
||||
formatter: '{value}kg'
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '用氢量(吨)',
|
||||
nameGap: 14,
|
||||
nameTextStyle: { color: '#3399ff', fontSize: 13, fontWeight: 600 },
|
||||
axisLine: { lineStyle: { color: '#3399ff' } },
|
||||
axisTick: { lineStyle: { color: '#3399ff' } },
|
||||
splitLine: { lineStyle: { color: '#091a40' } },
|
||||
axisLabel: {
|
||||
color: '#3399ff',
|
||||
margin: 10,
|
||||
formatter: value => this.formatHydrogen(value).value
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '行驶里程(km)',
|
||||
nameGap: 14,
|
||||
nameTextStyle: { color: '#a060ff', fontSize: 13, fontWeight: 600 },
|
||||
axisLine: { lineStyle: { color: '#a060ff' } },
|
||||
axisTick: { lineStyle: { color: '#a060ff' } },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
color: '#a060ff',
|
||||
margin: 12,
|
||||
formatter: value => this.formatMileage(value)
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '用氢量(kg)',
|
||||
name: '用氢量(吨)',
|
||||
type: 'line',
|
||||
//data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
|
||||
data: this.monthHydrogen,
|
||||
yAxisIndex: 0,
|
||||
data: this.monthHydrogen,
|
||||
// data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
itemStyle: { color: '#3399ff' }
|
||||
itemStyle: { color: '#3399ff' },
|
||||
lineStyle: { color: '#3399ff', width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
connectNulls: false,
|
||||
smooth: 0.18
|
||||
},
|
||||
// {
|
||||
// name: '用电量',
|
||||
@@ -206,21 +174,54 @@ export default {
|
||||
{
|
||||
name: '行驶里程(km)',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
//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' }
|
||||
itemStyle: { color: '#a060ff' },
|
||||
lineStyle: { color: '#a060ff', width: 2 },
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
connectNulls: false,
|
||||
smooth: 0.18
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
resizeChart() {
|
||||
if (this.chart) {
|
||||
this.chart.resize();
|
||||
}
|
||||
},
|
||||
formatHydrogen(value) {
|
||||
const amount = Number(value) || 0;
|
||||
if (amount >= 1000) {
|
||||
const ton = amount / 1000;
|
||||
return { value: Number.isInteger(ton) ? ton : ton.toFixed(1), unit: '吨' };
|
||||
}
|
||||
return { value: Number.isInteger(amount) ? amount : amount.toFixed(1), unit: 'kg' };
|
||||
},
|
||||
formatMileage(value) {
|
||||
const distance = Number(value) || 0;
|
||||
if (distance >= 10000) {
|
||||
const wan = distance / 10000;
|
||||
const display = Number.isInteger(wan) ? wan : wan.toFixed(1);
|
||||
return `${display}万km`;
|
||||
}
|
||||
return `${distance.toFixed(0)}km`;
|
||||
},
|
||||
formatMileageTotal(value) {
|
||||
const total = Number(value) || 0;
|
||||
return total % 1 === 0 ? total.toFixed(0) : total.toFixed(1);
|
||||
},
|
||||
getYearData() {
|
||||
currentGET("big3").then((res) => {
|
||||
console.log('年度碳减排量');
|
||||
console.log(res);
|
||||
this.pieOptionTwo.title.text = res.data.yearHydrogen + '\nkg';
|
||||
});
|
||||
this.applyYearMock();
|
||||
currentGET("big3").catch(() => {});
|
||||
},
|
||||
applyYearMock() {
|
||||
this.cumulativeHydrogen = DASHBOARD_EXCEL_MOCK.year.hydrogen;
|
||||
this.cumulativeMileage = DASHBOARD_EXCEL_MOCK.year.mileage / 10000;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -229,34 +230,114 @@ export default {
|
||||
<style scoped>
|
||||
.chart-block {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* 自行控制宽高，若嵌入大屏可由外层决定大小 */
|
||||
width: 800px;
|
||||
height: 300px;
|
||||
/* 背景可保持透明，方便嵌入大屏的背景 */
|
||||
gap: 2px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 6px 14px 4px 8px;
|
||||
background: transparent;
|
||||
}
|
||||
.chart-container {
|
||||
margin-left: -20px;
|
||||
|
||||
width: 55%;
|
||||
height:100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bar-line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 右侧两个环形图的布局 */
|
||||
/* 右侧累计指标布局 */
|
||||
.chart-container-right {
|
||||
padding-right: 20px;
|
||||
width: 44%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
left: 14px;
|
||||
flex: 0 0 84px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
.metric-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 64px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-title {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: #dbeaff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-title i {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
background: #3399ff;
|
||||
box-shadow: 0 0 8px rgba(51, 153, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-title i {
|
||||
background: #a060ff;
|
||||
box-shadow: 0 0 8px rgba(160, 96, 255, 0.9);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-value span {
|
||||
margin-left: 2px;
|
||||
color: #9bc9ff;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.metric-line {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
bottom: 7px;
|
||||
left: 6px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, rgba(51, 153, 255, 0), #3399ff 16%, #3399ff 84%, rgba(51, 153, 255, 0));
|
||||
box-shadow: 0 0 7px rgba(51, 153, 255, 0.65);
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-value span {
|
||||
color: #d5b4ff;
|
||||
}
|
||||
|
||||
.metric-card--mileage .metric-line {
|
||||
background: linear-gradient(90deg, rgba(160, 96, 255, 0), #a060ff 16%, #a060ff 84%, rgba(160, 96, 255, 0));
|
||||
box-shadow: 0 0 7px rgba(160, 96, 255, 0.65);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -142,13 +142,13 @@ export default {
|
||||
textStyle: {
|
||||
rich: {
|
||||
value: {
|
||||
color: "#333",
|
||||
color: "#ffffff",
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
lineHeight: 20,
|
||||
},
|
||||
name: {
|
||||
color: "#333",
|
||||
color: "#ffffff",
|
||||
lineHeight: 20,
|
||||
},
|
||||
},
|
||||
@@ -159,7 +159,7 @@ export default {
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
@@ -177,7 +177,7 @@ export default {
|
||||
// position: "outside",
|
||||
rich: {
|
||||
b: {
|
||||
color: "#333",
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
lineHeight: 26,
|
||||
},
|
||||
|
||||
+59
-203
@@ -1,107 +1,27 @@
|
||||
<template>
|
||||
<div class="cards-container">
|
||||
<!-- 四个卡片 -->
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div v-for="(card, index) in cards" :key="card.id" class="card">
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[0].value }}</span>
|
||||
<span class="unit">{{ cards[0].unit }}</span>
|
||||
<span class="number">{{ card.value }}</span>
|
||||
<span class="unit">{{ card.unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[0].label }}</div>
|
||||
<div class="label">{{ card.label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-0"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="icon-bg" :class="`icon-bg-${index}`"></div>
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/1.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[1].value }}</span>
|
||||
<span class="unit">{{ cards[1].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[1].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-1"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/2.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[2].value }}</span>
|
||||
<span class="unit">{{ cards[2].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[2].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-2"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/3.svg" class="images"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<!-- 数值与文字 -->
|
||||
<div class="card-info">
|
||||
<!-- 主数值（高亮） -->
|
||||
<div class="value-line">
|
||||
<span class="number">{{ cards[3].value }}</span>
|
||||
<span class="unit">{{ cards[3].unit }}</span>
|
||||
</div>
|
||||
<!-- 标签说明 -->
|
||||
<div class="label">{{ cards[3].label }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图标及其闪动背景 -->
|
||||
<div class="icon-wrapper">
|
||||
<!-- 背后闪动的竖直矩形 -->
|
||||
<div class="icon-bg icon-bg-3"></div>
|
||||
<!-- 圆形平台 -->
|
||||
<div class="platform-circle"></div>
|
||||
<!-- 图标本身（此处用Unicode或自定义图标） -->
|
||||
<div class="icon">
|
||||
<img src="@/assets/img/left/4.svg" class="images"/>
|
||||
<img :src="card.srcValue" class="images" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentGET } from 'api/modules'
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock'
|
||||
|
||||
export default {
|
||||
name: "BlinkingIcons",
|
||||
@@ -110,31 +30,31 @@
|
||||
cards: [
|
||||
{
|
||||
id: 1,
|
||||
value: "100/100",
|
||||
value: "62/100",
|
||||
unit: "辆",
|
||||
label: "在线车数",
|
||||
srcValue: "@/assets/img/left_top_lv.png",
|
||||
srcValue: require("@/assets/img/left/1.svg"),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "561",
|
||||
unit: "kg",
|
||||
label: "当日减碳",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
srcValue: require("@/assets/img/left/2.svg"),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "534",
|
||||
unit: "kg",
|
||||
label: "当日用氢量",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
srcValue: require("@/assets/img/left/3.svg"),
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
value: "3300",
|
||||
unit: "km",
|
||||
label: "当日里程",
|
||||
srcValue: "@/assets/img/left/1.svg",
|
||||
srcValue: require("@/assets/img/left/4.svg"),
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -144,189 +64,125 @@
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
currentGET("big1").then((res) => {
|
||||
console.log('当日实况');
|
||||
console.log(res);
|
||||
|
||||
let onLineCount = 0;
|
||||
let vehicleCount = 0;
|
||||
let dayCarbon = 0;
|
||||
let dayHydrogen = 0;
|
||||
let dayMileage = 0;
|
||||
|
||||
if(res !==null && res.data !==null )
|
||||
{
|
||||
if(res.data.onLineCount !== null)
|
||||
onLineCount = res.data.onLineCount;
|
||||
if(res.data.vehicleCount !== null)
|
||||
vehicleCount = res.data.vehicleCount;
|
||||
if(res.data.dayCarbon !== null)
|
||||
dayCarbon = res.data.dayCarbon;
|
||||
if(res.data.dayHydrogen !== null)
|
||||
dayHydrogen = res.data.dayHydrogen;
|
||||
if(res.data.dayMileage !== null)
|
||||
dayMileage = res.data.dayMileage;
|
||||
}
|
||||
|
||||
let change = this.cards[0];
|
||||
|
||||
change.value = onLineCount + "/" + vehicleCount;
|
||||
this.$set(this.cards, 0, change);
|
||||
|
||||
change = this.cards[1];
|
||||
change.value = dayCarbon;
|
||||
this.$set(this.cards, 1, change);
|
||||
change = this.cards[2];
|
||||
change.value = dayHydrogen;
|
||||
this.$set(this.cards, 2, change);
|
||||
change = this.cards[3];
|
||||
change.value = dayMileage;
|
||||
this.$set(this.cards, 3, change);
|
||||
});
|
||||
// 保留真实接口请求，展示层统一使用 Excel 汇总的演示数据。
|
||||
this.applyExcelMock();
|
||||
currentGET("big1").catch(() => {});
|
||||
},
|
||||
applyExcelMock() {
|
||||
const { day, onlineTotal, vehicleTotal } = DASHBOARD_EXCEL_MOCK;
|
||||
this.$set(this.cards, 0, { ...this.cards[0], value: `${onlineTotal}/${vehicleTotal}` });
|
||||
this.$set(this.cards, 1, { ...this.cards[1], value: day.carbon });
|
||||
this.$set(this.cards, 2, { ...this.cards[2], value: day.hydrogen });
|
||||
this.$set(this.cards, 3, { ...this.cards[3], value: day.mileage });
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 整体背景 */
|
||||
.cards-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
padding-left: 0px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
background-image: url("../../assets/img/left/u665.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
.images{
|
||||
}
|
||||
|
||||
.images {
|
||||
width: 65px;
|
||||
height: 70px;
|
||||
margin-left: 10px;
|
||||
margin-top: -5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
/* 单个卡片 */
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 卡片信息区域 */
|
||||
|
||||
.card-info {
|
||||
margin-bottom: 120px; /* 给下方图标区域留出空间 */
|
||||
margin-left:10px;
|
||||
margin-bottom: 120px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.value-line {
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
margin-bottom: 8px;
|
||||
width:120px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.number {
|
||||
color: #45f3ff; /* 高亮数字颜色 */
|
||||
margin-right: 6px;
|
||||
|
||||
color: #45f3ff;
|
||||
}
|
||||
|
||||
|
||||
.unit {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
color: #b9e4ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 图标容器 */
|
||||
|
||||
.icon-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 54%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
overflow: visible;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 背后闪动的竖直矩形 */
|
||||
|
||||
.icon-bg {
|
||||
position: absolute;
|
||||
top: -15%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background-image: url("../../assets/img/left/u676.svg");
|
||||
background-repeat: no-repeat;
|
||||
transform: translateX(-50%);
|
||||
animation: blink 1s infinite alternate;
|
||||
top: -15%;
|
||||
}
|
||||
.icon-bg-0 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.icon-bg-1 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.icon-bg-2 {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.icon-bg-3 {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
|
||||
/* 圆形平台 */
|
||||
|
||||
.icon-bg-0 { animation-delay: 0s; }
|
||||
.icon-bg-1 { animation-delay: 0.2s; }
|
||||
.icon-bg-2 { animation-delay: 0.4s; }
|
||||
.icon-bg-3 { animation-delay: 0.6s; }
|
||||
|
||||
.platform-circle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
|
||||
box-shadow: 0 0 8px #0ad, 0 0 12px #0ad;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 图标 */
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 28px;
|
||||
color: #00e4ff;
|
||||
font-size: 28px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 关键帧动画：闪动 */
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图标模拟，可用 Font Awesome 等替换 */
|
||||
.icon-phone::before {
|
||||
content: "☎";
|
||||
}
|
||||
.icon-shield::before {
|
||||
content: "⛨";
|
||||
}
|
||||
.icon-star::before {
|
||||
content: "★";
|
||||
}
|
||||
.icon-protect::before {
|
||||
content: "🛡";
|
||||
0% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,11 +11,7 @@
|
||||
</thead>
|
||||
</table>
|
||||
<div class="scroll-wrapper">
|
||||
<vue-seamless-scroll
|
||||
:data="tableData"
|
||||
:class-option="scrollOptions"
|
||||
class="scroll-container"
|
||||
>
|
||||
<vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
@@ -33,7 +29,7 @@
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import { currentGET } from "api/modules";
|
||||
import { currentGET } from 'api/modules'
|
||||
export default {
|
||||
components: { vueSeamlessScroll },
|
||||
data() {
|
||||
@@ -58,36 +54,44 @@ export default {
|
||||
// { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
|
||||
// { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getExchangeData();
|
||||
this.getExchangeData();
|
||||
},
|
||||
methods: {
|
||||
methods: {
|
||||
getExchangeData() {
|
||||
currentGET("big4").then((res) => {
|
||||
currentGET("big4").then(res => {
|
||||
|
||||
console.log("交易所数据：");
|
||||
//console.log(this.tableData1);
|
||||
console.log(res.data);
|
||||
this.tableData = res.data;
|
||||
this.tableData.forEach((item, index) => {
|
||||
if (index % 2 !== 0) {
|
||||
item.exchangeColor = "rgb(0, 186, 255)";
|
||||
item.priceColor = "rgb(26, 26, 26)";
|
||||
item.regionColor = "rgb(26, 26, 26)";
|
||||
this.$set(this.tableData, index, item);
|
||||
} else {
|
||||
|
||||
if(index % 2 !== 0)
|
||||
{
|
||||
|
||||
item.exchangeColor = "#00ffcc";
|
||||
item.priceColor = "#ffffff";
|
||||
item.regionColor = "#ffffff";
|
||||
this.$set(this.tableData, index, item);
|
||||
}
|
||||
else
|
||||
{
|
||||
//console.log("偶数index: " + index);
|
||||
item.exchangeColor = "rgb(221, 160, 221)";
|
||||
item.priceColor = "rgb(221, 160, 221)";
|
||||
item.regionColor = "rgb(221, 160, 221)";
|
||||
this.$set(this.tableData, index, item);
|
||||
item.exchangeColor = "#ffcc00";
|
||||
item.priceColor = "#ffcc00";
|
||||
item.regionColor = "#ffcc00";
|
||||
this.$set(this.tableData, index, item);
|
||||
//this.$set(this.tableData, index, modifiedItem);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
// console.log("转换后交易所数据：");
|
||||
// console.log(this.tableData);
|
||||
// console.log("转换后交易所数据：");
|
||||
// console.log(this.tableData);
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -107,20 +111,16 @@ table {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
th, td {
|
||||
padding: 12px;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: linear-gradient(135deg, #f8faff, #e6f3ff);
|
||||
background: #013f6a;
|
||||
padding: 10%;
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #3498db;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scroll-wrapper {
|
||||
|
||||
@@ -1,34 +1,56 @@
|
||||
<template>
|
||||
<div ref="chart" style="width: 600px; height: 350px;margin-left: -7%;margin-top: -10%;"></div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock';
|
||||
|
||||
export default {
|
||||
name: 'BarChart',
|
||||
mounted() {
|
||||
this.initChart();
|
||||
window.addEventListener('resize', this.resizeChart);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart);
|
||||
if (this.chart) this.chart.dispose();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
const myChart = echarts.init(this.$refs.chart);
|
||||
// 指定图表的配置项和数据
|
||||
if (this.chart) this.chart.dispose();
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
// 与“月度碳足迹”使用同一份 Excel/演示 Mock 月度减碳量（单位 kg）。
|
||||
const monthCarbon = DASHBOARD_EXCEL_MOCK.months.map(item => item.monthCarbon);
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: '7%',
|
||||
right: '3%',
|
||||
top: '8%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLine: {
|
||||
lineStyle: { color: '#ffffff' }
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: { color: '#ffffff' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '减碳量(吨)',
|
||||
nameTextStyle: { color: '#6a99f8', fontSize: 13, fontWeight: 600 },
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
formatter: '{value}kg'
|
||||
color: 'white',
|
||||
formatter: value => `${Number(value / 1000).toFixed(0)}吨`
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@@ -40,13 +62,12 @@ export default {
|
||||
tooltip: {
|
||||
trigger: 'axis' ,
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
return `减碳量：${params[0].value}kg`;
|
||||
return `${params[0].axisValue}<br/>减碳量：${(params[0].value / 1000).toFixed(2)}吨`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 30, 0, 0, 0, 0, 0],
|
||||
data: monthCarbon,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
// 使用线性渐变填充颜色
|
||||
@@ -61,9 +82,18 @@ export default {
|
||||
}
|
||||
]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
resizeChart() {
|
||||
if (this.chart) this.chart.resize();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
+101
-63
@@ -1,119 +1,157 @@
|
||||
<template>
|
||||
<div ref="chart" style="width: 520px; height: 280px;margin-top: 0%;"></div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'DoubleAxisChart',
|
||||
name: 'EmptyContainerChart',
|
||||
mounted() {
|
||||
this.initChart();
|
||||
window.addEventListener('resize', this.resizeChart);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart);
|
||||
if (this.chart) this.chart.dispose();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
if (this.chart) this.chart.dispose();
|
||||
this.chart = echarts.init(chartDom);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
type: 'line',
|
||||
lineStyle: { color: 'rgba(102, 222, 255, 0.48)', type: 'dashed' }
|
||||
},
|
||||
backgroundColor: 'rgba(5, 28, 63, 0.94)',
|
||||
borderColor: 'rgba(65, 215, 255, 0.62)',
|
||||
borderWidth: 1,
|
||||
padding: [8, 12],
|
||||
textStyle: { color: '#e8f8ff', fontSize: 13 },
|
||||
formatter: (params) => {
|
||||
//console.log(params)
|
||||
return `空箱：${params[0].value}标箱<br/>危险品：${params[1].value}标箱`;
|
||||
const first = params && params[0];
|
||||
if (!first || first.value == null) return `${first ? first.axisValueLabel : ''}<br/>暂无数据`;
|
||||
return `${first.axisValueLabel}<br/><span style="color:#7eeeff">空箱</span>：${first.value.toLocaleString()} 标箱`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['空箱', '危险品'],
|
||||
data: ['空箱'],
|
||||
left: 'right',
|
||||
top: 0,
|
||||
icon: 'line',
|
||||
itemWidth: 30,
|
||||
itemHeight: .0,
|
||||
itemWidth: 24,
|
||||
itemHeight: 3,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#d9f5ff',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
fontFamily: 'Arial, sans-serif'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '20%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['点1', '点2', '点3', '点4', '点5', '点6', '点7']
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLine: {
|
||||
lineStyle: { color: '#558cc5', width: 1 }
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#c7e3ff',
|
||||
fontSize: 12,
|
||||
margin: 12
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#081b42' } },
|
||||
axisLabel: {
|
||||
formatter: '{value}标箱'
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 10000,
|
||||
interval: 2000,
|
||||
name: '标箱',
|
||||
nameTextStyle: {
|
||||
color: '#6edcff',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
padding: [0, 0, 0, -4]
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#558cc5'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
splitLine: { lineStyle: { color: '#081b42' } },
|
||||
axisLabel: {
|
||||
formatter: '{value}标箱'
|
||||
}
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: 'rgba(49, 123, 181, 0.42)', type: 'dashed' } },
|
||||
axisLabel: {
|
||||
color: '#c7e3ff',
|
||||
fontSize: 12,
|
||||
formatter: value => `${(value / 1000).toFixed(0)}k`
|
||||
}
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '空箱',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: {color: 'orange'},
|
||||
data: [5528, 3041, 2963, 3310, 8410, 6885, 9440, 2279, null, null, null, null],
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
showSymbol: true,
|
||||
itemStyle: {
|
||||
color: '#78eeff',
|
||||
borderColor: '#062551',
|
||||
borderWidth: 2,
|
||||
shadowBlur: 9,
|
||||
shadowColor: 'rgba(51, 222, 255, 0.85)'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(48, 216, 255, 0.38)' },
|
||||
{ offset: 0.65, color: 'rgba(31, 164, 234, 0.14)' },
|
||||
{ offset: 1, color: 'rgba(20, 94, 169, 0.02)' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
focus: 'series',
|
||||
scale: true
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
lineStyle: {
|
||||
color: 'orange', // 线条颜色
|
||||
width: 2, // 线条宽度
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '危险品',
|
||||
type: 'line',
|
||||
yAxisIndex: 1, // 使用第二个Y轴
|
||||
stack: '总量',
|
||||
areaStyle: {color: 'blue'},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
lineStyle: {
|
||||
color: 'blue', // 线条颜色
|
||||
width: 2, // 线条宽度
|
||||
color: '#32d8ff',
|
||||
width: 3,
|
||||
shadowBlur: 8,
|
||||
shadowColor: 'rgba(38, 204, 255, 0.75)'
|
||||
},
|
||||
connectNulls: false
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
resizeChart() {
|
||||
if (this.chart) this.chart.resize();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user