|
|
|
|
@ -62,44 +62,94 @@ export default {
|
|
|
|
|
if (item.timeStr) { |
|
|
|
|
this.bottomData = item.timeStr; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (item.dataList) { |
|
|
|
|
// 用于存储 name 的数组 |
|
|
|
|
const names = []; |
|
|
|
|
// 用于存储 chartData 的数组 |
|
|
|
|
const chartData = []; |
|
|
|
|
|
|
|
|
|
item.dataList.forEach((val, index) => { |
|
|
|
|
// 查找包含“负载”的数据 |
|
|
|
|
let loadDataIndex = -1; |
|
|
|
|
for (let i = 0; i < item.dataList.length; i++) { |
|
|
|
|
if ( |
|
|
|
|
item.dataList[i].name && |
|
|
|
|
item.dataList[i].name.includes("负载") |
|
|
|
|
) { |
|
|
|
|
loadDataIndex = i; |
|
|
|
|
this.chartData5 = item.dataList[i].value; |
|
|
|
|
name5 = item.dataList[i].name; |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 剔除包含“负载”的数据 |
|
|
|
|
if (loadDataIndex !== -1) { |
|
|
|
|
item.dataList.splice(loadDataIndex, 1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 处理剩下的数据 |
|
|
|
|
item.dataList.slice(0, 4).forEach((val, index) => { |
|
|
|
|
if (val.name) { |
|
|
|
|
// 只处理前 5 个元素 |
|
|
|
|
if (index < 5) { |
|
|
|
|
chartData[index] = val.value; |
|
|
|
|
names[index] = val.name; |
|
|
|
|
console.log("多少个name",chartData[index] ) |
|
|
|
|
} |
|
|
|
|
chartData[index] = val.value; |
|
|
|
|
names[index] = val.name; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 将 chartData 数组的值赋值给 this.chartDataX |
|
|
|
|
this.chartData1 = chartData[0]; |
|
|
|
|
this.chartData2 = chartData[1]; |
|
|
|
|
this.chartData3 = chartData[2]; |
|
|
|
|
this.chartData4 = chartData[3]; |
|
|
|
|
this.chartData5 = chartData[4]; |
|
|
|
|
this.chartData1 = chartData[0] || ""; |
|
|
|
|
this.chartData2 = chartData[1] || ""; |
|
|
|
|
this.chartData3 = chartData[2] || ""; |
|
|
|
|
this.chartData4 = chartData[3] || ""; |
|
|
|
|
|
|
|
|
|
// 将 names 数组的值赋值给外部作用域的变量 |
|
|
|
|
name1 = names[0] || ""; |
|
|
|
|
name2 = names[1] || ""; |
|
|
|
|
name3 = names[2] || ""; |
|
|
|
|
name4 = names[3] || ""; |
|
|
|
|
name5 = names[4] || ""; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
console.log("this.chartData1", this.chartData1); |
|
|
|
|
console.log("this.chartData2", this.chartData2); |
|
|
|
|
console.log("this.chartData3", this.chartData3); |
|
|
|
|
console.log("this.chartData4", this.chartData4); |
|
|
|
|
console.log("this.chartData5", this.chartData5); |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
// 计算双y轴最大最小值， |
|
|
|
|
var Min1 = 0, |
|
|
|
|
Min2 = 0, |
|
|
|
|
Max1 = Math.ceil( |
|
|
|
|
Math.max( |
|
|
|
|
...this.chartData1, |
|
|
|
|
...this.chartData2, |
|
|
|
|
...this.chartData3, |
|
|
|
|
...this.chartData4 |
|
|
|
|
) |
|
|
|
|
), |
|
|
|
|
Max2 = Math.ceil(Math.max(...this.chartData5)); |
|
|
|
|
console.log("Min1", Min1); |
|
|
|
|
console.log("Min2", Min2); |
|
|
|
|
console.log("Max1", Max1); |
|
|
|
|
console.log("Max2", Max2); |
|
|
|
|
const adapterOption = { |
|
|
|
|
xAxis: { |
|
|
|
|
data: this.bottomData, |
|
|
|
|
}, |
|
|
|
|
yAxis: [ |
|
|
|
|
//两个y轴 |
|
|
|
|
{ |
|
|
|
|
min: Min1, |
|
|
|
|
max: Max1, |
|
|
|
|
splitNumber: 10, |
|
|
|
|
interval: (Max1 - Min1) / 10, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
min: Min2, |
|
|
|
|
max: Max2, |
|
|
|
|
splitNumber: 10, |
|
|
|
|
interval: (Max2 - Min2) / 10, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
yAxisIndex: 0, |
|
|
|
|
@ -122,7 +172,7 @@ export default {
|
|
|
|
|
data: this.chartData4, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
yAxisIndex: 0, |
|
|
|
|
yAxisIndex: 1, |
|
|
|
|
name: name5, |
|
|
|
|
data: this.chartData5, |
|
|
|
|
}, |
|
|
|
|
@ -138,6 +188,21 @@ export default {
|
|
|
|
|
xAxis: { |
|
|
|
|
data: [], |
|
|
|
|
}, |
|
|
|
|
yAxis: [ |
|
|
|
|
//两个y轴 |
|
|
|
|
{ |
|
|
|
|
min: 0, |
|
|
|
|
max: 0, |
|
|
|
|
splitNumber: 10, |
|
|
|
|
interval: 0, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
min: 0, |
|
|
|
|
max: 0, |
|
|
|
|
splitNumber: 10, |
|
|
|
|
interval: 0, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
yAxisIndex: 0, |
|
|
|
|
@ -193,6 +258,17 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
//初始化chartInstance对象 |
|
|
|
|
initChart() { |
|
|
|
|
var Min1 = 0, |
|
|
|
|
Min2 = 0, |
|
|
|
|
Max1 = Math.ceil( |
|
|
|
|
Math.max( |
|
|
|
|
...this.chartData1, |
|
|
|
|
...this.chartData2, |
|
|
|
|
...this.chartData3, |
|
|
|
|
...this.chartData4 |
|
|
|
|
) + 4 |
|
|
|
|
), |
|
|
|
|
Max2 = Math.ceil(Math.max(...this.chartData5) + 4); |
|
|
|
|
const chartRef = this.$refs.chart_ref; |
|
|
|
|
if (chartRef) { |
|
|
|
|
// 初始化图表的代码 |
|
|
|
|
@ -200,6 +276,42 @@ export default {
|
|
|
|
|
this.option = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "axis", |
|
|
|
|
// 自定义 tooltip 内容 |
|
|
|
|
formatter: function (params) { |
|
|
|
|
var res = params[0].name + "<br/>"; |
|
|
|
|
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) |
|
|
|
|
var marker = |
|
|
|
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
|
|
|
|
params[i].color + |
|
|
|
|
'"></span>'; |
|
|
|
|
// 根据不同的seriesName 返回不同的单位 |
|
|
|
|
if (seriesName.includes("负载")) { |
|
|
|
|
res += |
|
|
|
|
marker + |
|
|
|
|
seriesName + |
|
|
|
|
":" + |
|
|
|
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
|
|
|
value + |
|
|
|
|
" " + |
|
|
|
|
"%" + |
|
|
|
|
"</span><br>"; |
|
|
|
|
} else { |
|
|
|
|
res += |
|
|
|
|
marker + |
|
|
|
|
seriesName + |
|
|
|
|
":" + |
|
|
|
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
|
|
|
value + |
|
|
|
|
" " + |
|
|
|
|
"℃" + |
|
|
|
|
"</span><br>"; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return res; |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
show: true, |
|
|
|
|
@ -242,46 +354,86 @@ export default {
|
|
|
|
|
}, //x轴分割线 |
|
|
|
|
data: this.bottomData, |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
min: 0, |
|
|
|
|
// max:20, |
|
|
|
|
// // // min:'dataMin', |
|
|
|
|
// // // max:'dataMax', |
|
|
|
|
// name: "kwh", // 第一个 y 轴的单位描述 |
|
|
|
|
// 设置 name 的样式 |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
fontSize: 12, |
|
|
|
|
}, |
|
|
|
|
miniInterval: 5, |
|
|
|
|
type: "value", |
|
|
|
|
// 修饰刻度标签的颜色即y坐标数据 |
|
|
|
|
axisLabel: { |
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
}, |
|
|
|
|
// 显示y坐标轴 |
|
|
|
|
axisLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#365576", // 设置 y 轴线的颜色 |
|
|
|
|
yAxis: [ |
|
|
|
|
{ |
|
|
|
|
min: Min1, |
|
|
|
|
max: Max1, |
|
|
|
|
splitNumber: 10, |
|
|
|
|
interval: (Max1 - Min1) / 10, |
|
|
|
|
// 设置 name 的样式 |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
fontSize: 12, |
|
|
|
|
}, |
|
|
|
|
miniInterval: 5, |
|
|
|
|
type: "value", |
|
|
|
|
// 修饰刻度标签的颜色即y坐标数据 |
|
|
|
|
axisLabel: { |
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
}, |
|
|
|
|
// 显示y坐标轴 |
|
|
|
|
axisLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#365576", // 设置 y 轴线的颜色 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
//y轴分割线段数 |
|
|
|
|
// splitNumber: 10, |
|
|
|
|
// 修改y轴分割线的颜色 |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#1a3d62", // 设置分割线的颜色 |
|
|
|
|
type: "dashed", // 设置分割线为虚线 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
//y轴分割线段数 |
|
|
|
|
// splitNumber: 10, |
|
|
|
|
// 修改y轴分割线的颜色 |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#1a3d62", // 设置分割线的颜色 |
|
|
|
|
type: "dashed", // 设置分割线为虚线 |
|
|
|
|
{ |
|
|
|
|
min: Min2, |
|
|
|
|
max: Max2, |
|
|
|
|
splitNumber: 10, |
|
|
|
|
interval: (Max2 - Min2) / 10, |
|
|
|
|
// 设置 name 的样式 |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
fontSize: 12, |
|
|
|
|
}, |
|
|
|
|
miniInterval: 5, |
|
|
|
|
type: "value", |
|
|
|
|
name: "负载", // y 轴的单位描述 |
|
|
|
|
// 修饰刻度标签的颜色即y坐标数据 |
|
|
|
|
axisLabel: { |
|
|
|
|
color: "#ffffff", |
|
|
|
|
}, |
|
|
|
|
// 修饰刻度标签的颜色即y坐标数据 |
|
|
|
|
axisLabel: { |
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
}, |
|
|
|
|
// 显示y坐标轴 |
|
|
|
|
axisLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#365576", // 设置 y 轴线的颜色 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
//y轴分割线段数 |
|
|
|
|
// splitNumber: 10, |
|
|
|
|
// 修改y轴分割线的颜色 |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: "#1a3d62", // 设置分割线的颜色 |
|
|
|
|
type: "dashed", // 设置分割线为虚线 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: "line", |
|
|
|
|
// 拐点大小 |
|
|
|
|
symbolSize: 8, |
|
|
|
|
data: this.chartData1, |
|
|
|
|
yAxisIndex: 0, |
|
|
|
|
//折线颜色 |
|
|
|
|
itemStyle: { |
|
|
|
|
color: "#00CED1", //折线点的颜色 |
|
|
|
|
@ -292,33 +444,13 @@ export default {
|
|
|
|
|
smooth: false, |
|
|
|
|
// 不显示折线点 |
|
|
|
|
showSymbol: false, |
|
|
|
|
// // 区域填充样式，添加渐变背景 |
|
|
|
|
// areaStyle: { |
|
|
|
|
// color: { |
|
|
|
|
// type: "linear", |
|
|
|
|
// x: 0, |
|
|
|
|
// y: 0, |
|
|
|
|
// x2: 0, |
|
|
|
|
// y2: 1, |
|
|
|
|
// colorStops: [ |
|
|
|
|
// { |
|
|
|
|
// offset: 0, |
|
|
|
|
// color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色 |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// offset: 1, |
|
|
|
|
// color: "rgba(26, 105, 241, 0)", // 渐变结束颜色 |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// global: false, // 缺省为 false |
|
|
|
|
// }, |
|
|
|
|
// }, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
type: "line", |
|
|
|
|
// 拐点大小 |
|
|
|
|
symbolSize: 8, |
|
|
|
|
data: this.chartData2, |
|
|
|
|
yAxisIndex: 0, |
|
|
|
|
//折线颜色 |
|
|
|
|
itemStyle: { |
|
|
|
|
color: "#3ba272", //折线的颜色 |
|
|
|
|
@ -326,125 +458,48 @@ export default {
|
|
|
|
|
smooth: false, |
|
|
|
|
// 不显示折线点 |
|
|
|
|
showSymbol: false, |
|
|
|
|
// areaStyle: { |
|
|
|
|
// color: { |
|
|
|
|
// type: "linear", |
|
|
|
|
// x: 0, |
|
|
|
|
// y: 0, |
|
|
|
|
// x2: 0, |
|
|
|
|
// y2: 1, |
|
|
|
|
// colorStops: [ |
|
|
|
|
// { |
|
|
|
|
// offset: 0, |
|
|
|
|
// color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// offset: 1, |
|
|
|
|
// color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// global: false, // 缺省为 false |
|
|
|
|
// }, |
|
|
|
|
// }, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
type: "line", |
|
|
|
|
// 拐点大小 |
|
|
|
|
symbolSize: 8, |
|
|
|
|
data: this.chartData3, |
|
|
|
|
yAxisIndex: 0, |
|
|
|
|
//折线颜色 |
|
|
|
|
itemStyle: { |
|
|
|
|
color: "#fac858", //折线的颜色 |
|
|
|
|
color: "#1a69f1", //折线的颜色 |
|
|
|
|
}, |
|
|
|
|
smooth: false, |
|
|
|
|
// 不显示折线点 |
|
|
|
|
showSymbol: false, |
|
|
|
|
// areaStyle: { |
|
|
|
|
// color: { |
|
|
|
|
// type: "linear", |
|
|
|
|
// x: 0, |
|
|
|
|
// y: 0, |
|
|
|
|
// x2: 0, |
|
|
|
|
// y2: 1, |
|
|
|
|
// colorStops: [ |
|
|
|
|
// { |
|
|
|
|
// offset: 0, |
|
|
|
|
// color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// offset: 1, |
|
|
|
|
// color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// global: false, // 缺省为 false |
|
|
|
|
// }, |
|
|
|
|
// }, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
type: "line", |
|
|
|
|
// 拐点大小 |
|
|
|
|
symbolSize: 8, |
|
|
|
|
data: this.chartData4, |
|
|
|
|
yAxisIndex: 0, |
|
|
|
|
//折线颜色 |
|
|
|
|
itemStyle: { |
|
|
|
|
color: "#1a69f1", //折线的颜色 |
|
|
|
|
color: "#ee6666", //折线的颜色 |
|
|
|
|
}, |
|
|
|
|
smooth: false, |
|
|
|
|
// 不显示折线点 |
|
|
|
|
showSymbol: false, |
|
|
|
|
// areaStyle: { |
|
|
|
|
// color: { |
|
|
|
|
// type: "linear", |
|
|
|
|
// x: 0, |
|
|
|
|
// y: 0, |
|
|
|
|
// x2: 0, |
|
|
|
|
// y2: 1, |
|
|
|
|
// colorStops: [ |
|
|
|
|
// { |
|
|
|
|
// offset: 0, |
|
|
|
|
// color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// offset: 1, |
|
|
|
|
// color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// global: false, // 缺省为 false |
|
|
|
|
// }, |
|
|
|
|
// }, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
type: "line", |
|
|
|
|
// 拐点大小 |
|
|
|
|
symbolSize: 8, |
|
|
|
|
data: this.chartData5, |
|
|
|
|
yAxisIndex: 1, |
|
|
|
|
//折线颜色 |
|
|
|
|
itemStyle: { |
|
|
|
|
color: "#ee6666", //折线的颜色 |
|
|
|
|
color: "#fac858", //折线的颜色 |
|
|
|
|
}, |
|
|
|
|
smooth: false, |
|
|
|
|
// 不显示折线点 |
|
|
|
|
showSymbol: false, |
|
|
|
|
// areaStyle: { |
|
|
|
|
// color: { |
|
|
|
|
// type: "linear", |
|
|
|
|
// x: 0, |
|
|
|
|
// y: 0, |
|
|
|
|
// x2: 0, |
|
|
|
|
// y2: 1, |
|
|
|
|
// colorStops: [ |
|
|
|
|
// { |
|
|
|
|
// offset: 0, |
|
|
|
|
// color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// offset: 1, |
|
|
|
|
// color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// global: false, // 缺省为 false |
|
|
|
|
// }, |
|
|
|
|
// }, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
|
