From a41b7e1cf87154b4a4dde24e67228f3ac6c27f39 Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Thu, 14 Aug 2025 14:31:24 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=B8=BB=E6=9C=BA=E5=8F=82=E6=95=B0=E5=90=AF?=
=?UTF-8?q?=E5=8A=A8=E5=81=9C=E6=AD=A2=E9=A2=9C=E8=89=B2=E5=88=86=E5=88=AB?=
=?UTF-8?q?=E7=94=A8=E7=BB=BF=E8=89=B2=E5=92=8C=E8=93=9D=E8=89=B2=EF=BC=9B?=
=?UTF-8?q?=202.=E5=8E=86=E5=8F=B2=E5=A4=A9=E6=B0=94=E6=9F=A5=E8=AF=A2?=
=?UTF-8?q?=E5=AF=BC=E5=87=BAexcel=EF=BC=9B=203.=E7=83=AD=E6=B0=B4?=
=?UTF-8?q?=E7=B3=BB=E7=BB=9F=E2=86=92=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90?=
=?UTF-8?q?=E7=BA=B5=E5=9D=90=E6=A0=87=E6=B7=BB=E5=8A=A0=E5=8D=95=E4=BD=8D?=
=?UTF-8?q?=EF=BC=9B=204.=E9=A3=8E=E6=9F=9C=E7=B3=BB=E7=BB=9F=E6=89=8B?=
=?UTF-8?q?=E6=9C=BA=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96=E8=BF=9B=E8=A1=8C?=
=?UTF-8?q?=E6=8E=A7=E5=88=B6=EF=BC=88=E9=87=8D=E7=82=B9=EF=BC=89=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/styles/index.scss | 7 +
src/store/modules/permission.js | 29 +
.../awSysMonitor/asSysMonitorDetails.vue | 2110 +++++++++++++++++
.../aircAndWindc/awSysMonitor/index copy.vue | 1840 ++++++++++++++
src/views/aircAndWindc/awSysMonitor/index.vue | 1676 +------------
.../centerairC/sysMonitor/hostDetails.vue | 77 +-
.../centerairC/sysMonitor/monitorCenter.vue | 4 +-
.../centerairC/temHistoryQuery/index.vue | 78 +-
.../dataAnalysis/components/analyzeMonth.vue | 174 +-
.../dataAnalysis/components/analyzeYear.vue | 218 +-
10 files changed, 4418 insertions(+), 1795 deletions(-)
create mode 100644 src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
create mode 100644 src/views/aircAndWindc/awSysMonitor/index copy.vue
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index c27719a..4a96aed 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -775,3 +775,10 @@ table th {
}
}
}
+/* 手机端样式 */
+@media (min-width: 0px) and (max-width: 990px) {
+ .app-main {
+ height: 100% !important;
+ overflow-y: hidden !important;
+ }
+}
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 882a08b..a2fdcd1 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -90,6 +90,35 @@ const permission = {
// console.log("不满足条件");
}
+ // 风柜
+ const result2 = sidebarRoutes.find(
+ (item) => item.name === "AircAndWindc"
+ );
+ if (result2) {
+ // 定义要添加的多个路由对象数组
+ const additionalRoutes2 = [
+ {
+ path: "/asSysMonitorDetails",
+ name: "asSysMonitorDetails",
+ hidden: true,
+ component: () =>
+ import(
+ "@/views/aircAndWindc/awSysMonitor/asSysMonitorDetails"
+ ),
+ meta: { title: "系统监控", icon: "screen" },
+ },
+ // 可以继续添加更多路由对象
+ ];
+ // 循环添加额外的路由对象到各路由数组
+ additionalRoutes2.forEach((route) => {
+ sidebarRoutes.push(route);
+ rewriteRoutes.push(route);
+ asyncRoutes.push(route);
+ });
+ } else {
+ // console.log("不满足条件");
+ }
+
commit("SET_ROUTES", rewriteRoutes);
commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
commit("SET_DEFAULT_ROUTES", sidebarRoutes);
diff --git a/src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue b/src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
new file mode 100644
index 0000000..38a7517
--- /dev/null
+++ b/src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
@@ -0,0 +1,2110 @@
+
+
+
+

+

+

+
铭汉高效冷源站管理系统
+
+

+
{{ formattedDate }}
+
已监测时长:{{ dayData }}天
+

+

+

+
+
+
+
+
+
+
+
+
+
+
+ {{ node.label }}
+
+
+
+
+
+
+
+
+

+
位置:{{ currentName }}
+
+
+
+
+
+
+

+
+

+
+
+
+
+
+
+
+
+
风机故障状态:
+
+ 故障
+
+
正常
+
+
+
风机运行状态:
+
+ 运行
+
+
不运行
+
+
+
+
+
+
+
新风阀反馈:
+
{{ airValveBackObj.collectValue }}%
+
+
+
+
+
+
+
+
+
+
+
定时名称
+
定时开机
+
定时关机
+
启动状态
+
+
+
{{ item.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/aircAndWindc/awSysMonitor/index copy.vue b/src/views/aircAndWindc/awSysMonitor/index copy.vue
new file mode 100644
index 0000000..918e631
--- /dev/null
+++ b/src/views/aircAndWindc/awSysMonitor/index copy.vue
@@ -0,0 +1,1840 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ node.label }}
+
+
+
+
+
+
+
+
+

+
位置:{{ currentName }}
+
+
+
+
+
+
+

+
+

+
+
+
+
+
+
+
+
+
风机故障状态:
+
+ 故障
+
+
正常
+
+
+
风机运行状态:
+
+ 运行
+
+
不运行
+
+
+
+
+
+
+
新风阀反馈:
+
{{ airValveBackObj.collectValue }}%
+
+
+
+
+
+
+
+
+
+
+
定时名称
+
定时开机
+
定时关机
+
启动状态
+
+
+
{{ item.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/aircAndWindc/awSysMonitor/index.vue b/src/views/aircAndWindc/awSysMonitor/index.vue
index e677c8e..562b546 100644
--- a/src/views/aircAndWindc/awSysMonitor/index.vue
+++ b/src/views/aircAndWindc/awSysMonitor/index.vue
@@ -1,1682 +1,20 @@
-
-
-
-
-
-
-
-
-
-
- {{ node.label }}
-
-
-
-
-
-
-
-
-

-
位置:{{ currentName }}
-
-
-
-
-
-
-

-
-

-
-
-
-
-
-
-
-
-
风机故障状态:
-
- 故障
-
-
正常
-
-
-
风机运行状态:
-
- 运行
-
-
不运行
-
-
-
-
-
-
-
新风阀反馈:
-
{{ airValveBackObj.collectValue }}%
-
-
-
-
-
-
-
-
-
-
-
定时名称
-
定时开机
-
定时关机
-
启动状态
-
-
-
{{ item.name }}
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
\ No newline at end of file
diff --git a/src/views/centerairC/sysMonitor/hostDetails.vue b/src/views/centerairC/sysMonitor/hostDetails.vue
index fb4d891..3abb38a 100644
--- a/src/views/centerairC/sysMonitor/hostDetails.vue
+++ b/src/views/centerairC/sysMonitor/hostDetails.vue
@@ -155,7 +155,14 @@
{{ item.otherName }}:
- {{ item.curValue }}
+ {{ item.curValue }}
{{ item.unit }}
@@ -179,7 +186,14 @@
{{ subItem.otherName }}:
- {{ subItem.curValue }}
+ {{ subItem.curValue }}
{{ subItem.unit }}
@@ -639,6 +653,11 @@ export default {
this.exitFullscreen();
this.$router.push("/alarm/alarmRecord");
},
+ // 判断 curValue 是否为特定值
+ isSpecialValue(value) {
+ const specialValues = ["运行", "启动", "正常"];
+ return specialValues.includes(value);
+ },
},
};
@@ -868,33 +887,6 @@ export default {
white-space: nowrap;
}
}
- .dotData {
- font-weight: bold;
- margin: 0 0.06rem;
- color: #3b80ff;
- display: flex;
- align-items: center;
- }
- .goodData {
- font-weight: bold;
- margin: 0 0.06rem;
- color: #3df574;
- }
- .badData {
- font-weight: bold;
- margin: 0 0.06rem;
- color: #cf3607;
- }
- .automaticData {
- font-weight: bold;
- margin: 0 0.06rem;
- color: #da7b10;
- }
- .timeData {
- font-weight: bold;
- margin: 0 0.06rem;
- color: #1df3e8;
- }
}
.water-flow3 {
z-index: 10;
@@ -1210,4 +1202,31 @@ export default {
.timeStyle {
color: #ffffff !important;
}
+.dotData {
+ font-weight: bold;
+ margin: 0 0.06rem;
+ color: #3b80ff;
+ display: flex;
+ align-items: center;
+}
+.goodData {
+ font-weight: bold;
+ margin: 0 0.06rem;
+ color: #3df574;
+}
+.badData {
+ font-weight: bold;
+ margin: 0 0.06rem;
+ color: #cf3607;
+}
+.automaticData {
+ font-weight: bold;
+ margin: 0 0.06rem;
+ color: #da7b10;
+}
+.timeData {
+ font-weight: bold;
+ margin: 0 0.06rem;
+ color: #1df3e8;
+}
diff --git a/src/views/centerairC/sysMonitor/monitorCenter.vue b/src/views/centerairC/sysMonitor/monitorCenter.vue
index 49fc345..eab299f 100644
--- a/src/views/centerairC/sysMonitor/monitorCenter.vue
+++ b/src/views/centerairC/sysMonitor/monitorCenter.vue
@@ -145,10 +145,10 @@
{{ startOrStopStatus }}
-
-
-
-
-
{
+ if (response.code == 200) {
+ import("@/assets/excel/Export2Excel").then((excel) => {
+ var tHeader = ["日期", "最高气温", "最低气温", "天气", "风向"]; // 导出的excel表头名信息 改参数
+ var filterVal = [
+ "dateAndWeek",
+ "maxTemp",
+ "minTemp",
+ "weatherConditions",
+ "windDirection",
+ ];
+ const data = this.formatJson(filterVal, response.rows);
+ const autoWidth = true;
+ excel.export_json_to_excel({
+ header: tHeader, //表头
+ data, //数据
+ filename: "历史天气报表", //名称
+ autoWidth: true, //宽度自适应
+ });
+ this.$message({
+ type: "success",
+ message: "导出成功!",
+ });
+ });
+ } else {
+ this.$message.error("导出失败!");
+ }
+ });
+ },
+ //格式转换,不需要改动
+ formatJson(filterVal, jsonData) {
+ return jsonData.map((v) =>
+ filterVal.map((j) => {
+ if (j === "installDate") {
+ return format(v[j]);
+ } else {
+ return v[j];
+ }
+ })
);
},
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
@@ -294,7 +326,7 @@ export default {
// interval: 0, //强制显示所有x轴数据
// rotate: 30, //x轴坐标字体倾斜30度
color: "rgba(255, 255, 255, 1)",
- fontSize: titleFontSize, //x轴文字大小
+ fontSize: titleFontSize, //x轴文字大小
},
axisTick: {
show: false, // 不显示坐标轴刻度线
@@ -319,14 +351,14 @@ export default {
// 设置 name 的样式
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
- fontSize: 12, //y轴单位文字大小
+ fontSize: 12, //y轴单位文字大小
},
miniInterval: 5,
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255, 255, 255, 1)",
- fontSize: titleFontSize, //x轴文字大小
+ fontSize: titleFontSize, //x轴文字大小
},
// 显示y坐标轴
axisLine: {
diff --git a/src/views/hotWater/dataAnalysis/components/analyzeMonth.vue b/src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
index 3b463c2..ab90e2a 100644
--- a/src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
+++ b/src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
@@ -153,8 +153,10 @@ export default {
},
methods: {
tableRowStyle({ row, column, rowIndex, columnIndex }) {
+ // console.log("row",row)
+ // console.log("column",column)
// 如果第1列,修改颜色
- if (columnIndex === 0) {
+ if (columnIndex === 0 || column.label === '合计') {
return "background-color:rgb(11 ,100, 201) !important;";
}
},
@@ -293,6 +295,15 @@ export default {
// console.log("Min2", Min2);
// console.log("Max1", Max1);
// console.log("Max2", Max2);
+ // 处理y轴文字+单位
+ var yAxisUnit = "";
+ if (this.chType === 1) {
+ yAxisUnit = "吨";
+ } else if (this.chType === 2) {
+ yAxisUnit = "度";
+ } else if (this.chType === 3) {
+ yAxisUnit = "度/吨";
+ }
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
@@ -308,12 +319,24 @@ export default {
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
+ name: yAxisUnit,
+ // 设置 name 的样式
+ nameTextStyle: {
+ color: "rgba(255, 255, 255, 1)",
+ fontSize: 12,
+ },
},
{
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
+ name: "%",
+ // 设置 name 的样式
+ nameTextStyle: {
+ color: "rgba(255, 255, 255, 1)",
+ fontSize: 12,
+ },
},
],
series: [
@@ -522,6 +545,62 @@ export default {
width: "1",
},
},
+ // 自定义 tooltip 内容
+ formatter: function (params) {
+ var res = params[0].name + "
";
+ for (var i = 0, l = params.length; i < l; i++) {
+ var seriesName = params[i].seriesName;
+ var value = params[i].value;
+ // console.log("打印颜色", params[i].color.colorStops[0].color)
+ var marker =
+ '';
+ // 根据不同的seriesName 返回不同的单位
+ if (seriesName.includes("用水量")) {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "吨" +
+ "
";
+ } else if (seriesName.includes("用电量")) {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "度" +
+ "
";
+ } else if (seriesName.includes("单耗")) {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "度/吨" +
+ "
";
+ } else {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "%" +
+ "
";
+ }
+ }
+ return res;
+ },
},
legend: {
// 折柱混合的图表,不显示icon,图例就可以根据不同的类型不同
@@ -531,7 +610,7 @@ export default {
color: "#ffff",
fontSize: 12, //这里改字体大小
},
- left: "56%",
+ left: "center",
top: "5%",
//图例距离饼图的距离
itemGap: 5,
@@ -638,10 +717,27 @@ export default {
// },
//折线颜色
itemStyle: {
- color: "#db9215",
- lineStyle: {
- color: "#db9215", //折线的颜色
+ color: "#0b75d3",
+ // 使用颜色渐变
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(1, 102, 251, 1)", // 起始颜色
+ },
+ {
+ offset: 1,
+ color: "rgba(1, 102, 251, 0)", // 结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
},
+ borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
},
},
{
@@ -654,10 +750,27 @@ export default {
barWidth: 10, // 柱子宽度
//折线颜色
itemStyle: {
- color: "#1ab395",
- lineStyle: {
- color: "#1ab395", //折线的颜色
+ color: "#0b75d3",
+ // 使用颜色渐变
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(0, 224, 225, 1)", // 起始颜色
+ },
+ {
+ offset: 1,
+ color: "rgba(0, 224, 225, 0)", // 结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
},
+ borderRadius: [5, 5, 0, 0],
},
},
{
@@ -677,10 +790,27 @@ export default {
// data: this.data3,
//折线颜色
itemStyle: {
- color: "#e23131",
- lineStyle: {
- color: "#e23131", //折线的颜色
+ color: "#db9215",
+ // 使用颜色渐变
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#db9215", // 起始颜色
+ },
+ {
+ offset: 1,
+ color: "#db9215", // 结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
},
+ borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
},
},
{
@@ -701,9 +831,27 @@ export default {
// data: this.data4,
//折线颜色
itemStyle: {
- color: "#4a98ff",
+ color: "#EE5217", //折线点的颜色
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#EE5217", // 起始颜色
+ },
+ {
+ offset: 1,
+ color: "#EE5217", // 结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
lineStyle: {
- color: "#4a98ff", //折线的颜色
+ color: "#EE5217", //折线的颜色
},
},
},
diff --git a/src/views/hotWater/dataAnalysis/components/analyzeYear.vue b/src/views/hotWater/dataAnalysis/components/analyzeYear.vue
index b39a866..eaca2a1 100644
--- a/src/views/hotWater/dataAnalysis/components/analyzeYear.vue
+++ b/src/views/hotWater/dataAnalysis/components/analyzeYear.vue
@@ -120,7 +120,7 @@ export default {
methods: {
tableRowStyle({ row, column, rowIndex, columnIndex }) {
// 如果第1列,修改颜色
- if (columnIndex === 0) {
+ if (columnIndex === 0 || column.label === "合计") {
return "background-color:rgb(11 ,100, 201) !important;";
}
},
@@ -240,6 +240,15 @@ export default {
// console.log("Min2", Min2);
// console.log("Max1", Max1);
// console.log("Max2", Max2);
+ // 处理y轴文字+单位
+ var yAxisUnit = "";
+ if (this.chType === 1) {
+ yAxisUnit = "吨";
+ } else if (this.chType === 2) {
+ yAxisUnit = "度";
+ } else if (this.chType === 3) {
+ yAxisUnit = "度/吨";
+ }
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
@@ -255,12 +264,24 @@ export default {
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
+ name: yAxisUnit,
+ // 设置 name 的样式
+ nameTextStyle: {
+ color: "rgba(255, 255, 255, 1)",
+ fontSize: 12,
+ },
},
{
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
+ name: "%",
+ // 设置 name 的样式
+ nameTextStyle: {
+ color: "rgba(255, 255, 255, 1)",
+ fontSize: 12,
+ },
},
],
series: [
@@ -431,6 +452,62 @@ export default {
width: "1",
},
},
+ // 自定义 tooltip 内容
+ formatter: function (params) {
+ var res = params[0].name + "
";
+ for (var i = 0, l = params.length; i < l; i++) {
+ var seriesName = params[i].seriesName;
+ var value = params[i].value;
+ // console.log("打印颜色", params[i].color.colorStops[0].color)
+ var marker =
+ '';
+ // 根据不同的seriesName 返回不同的单位
+ if (seriesName.includes("用水量")) {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "吨" +
+ "
";
+ } else if (seriesName.includes("用电量")) {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "度" +
+ "
";
+ } else if (seriesName.includes("单耗")) {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "度/吨" +
+ "
";
+ } else {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "%" +
+ "
";
+ }
+ }
+ return res;
+ },
},
legend: {
// 折柱混合的图表,不显示icon,图例就可以根据不同的类型不同
@@ -440,7 +517,7 @@ export default {
color: "#ffff",
fontSize: 12, //这里改字体大小
},
- left: "56%",
+ left: "center",
top: "5%",
//图例距离饼图的距离
itemGap: 5,
@@ -542,67 +619,55 @@ export default {
barWidth: 10, // 柱子宽度
//折线颜色
itemStyle: {
- color: "#db9215",
- lineStyle: {
- color: "#db9215", //折线的颜色
+ color: "#0b75d3",
+ // 使用颜色渐变
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(1, 102, 251, 1)", // 起始颜色
+ },
+ {
+ offset: 1,
+ color: "rgba(1, 102, 251, 0)", // 结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
},
+ borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
},
},
{
type: "bar",
- // tooltip: {
- // valueFormatter: function (value) {
- // return value + "吨";
- // },
- // },
- tooltip: {
- trigger: "axis",
- formatter: function (params) {
- //数据单位格式化
- var relVal = params[0].name; //x轴名称
- if (params[0].seriesName == "2022年用水量") {
- relVal =
- params[0].name +
- "
" +
- params[0].seriesName +
- " : " +
- params[0].value +
- " 吨";
- } else if (params[0].seriesName == "用电量") {
- relVal =
- params[0].name +
- "
" +
- params[0].seriesName +
- " : " +
- params[0].value +
- " 度";
- } else if (params[0].seriesName == "耗能") {
- relVal =
- params[0].name +
- "
" +
- params[0].seriesName +
- " : " +
- params[0].value +
- " 度/吨";
- } else {
- relVal =
- params[0].name +
- "
" +
- params[0].seriesName +
- " : " +
- params[0].value +
- " 次";
- }
- return relVal;
- },
- },
barWidth: 10, // 柱子宽度
//折线颜色
itemStyle: {
- color: "#1ab395",
- lineStyle: {
- color: "#1ab395", //折线的颜色
+ color: "#0b75d3",
+ // 使用颜色渐变
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(0, 224, 225, 1)", // 起始颜色
+ },
+ {
+ offset: 1,
+ color: "rgba(0, 224, 225, 0)", // 结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
},
+ borderRadius: [5, 5, 0, 0],
},
},
{
@@ -622,10 +687,27 @@ export default {
// data: this.data3,
//折线颜色
itemStyle: {
- color: "#e23131",
- lineStyle: {
- color: "#e23131", //折线的颜色
+ color: "#db9215",
+ // 使用颜色渐变
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#db9215", // 起始颜色
+ },
+ {
+ offset: 1,
+ color: "#db9215", // 结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
},
+ borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径
},
},
{
@@ -646,9 +728,27 @@ export default {
// data: this.data4,
//折线颜色
itemStyle: {
- color: "#4a98ff",
+ color: "#EE5217", //折线点的颜色
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#EE5217", // 起始颜色
+ },
+ {
+ offset: 1,
+ color: "#EE5217", // 结束颜色
+ },
+ ],
+ global: false, // 缺省为 false
+ },
lineStyle: {
- color: "#4a98ff", //折线的颜色
+ color: "#EE5217", //折线的颜色
},
},
},