|
|
@ -120,7 +120,7 @@ export default { |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
|
|
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
|
|
|
// 如果第1列,修改颜色 |
|
|
|
// 如果第1列,修改颜色 |
|
|
|
if (columnIndex === 0) { |
|
|
|
if (columnIndex === 0 || column.label === "合计") { |
|
|
|
return "background-color:rgb(11 ,100, 201) !important;"; |
|
|
|
return "background-color:rgb(11 ,100, 201) !important;"; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
@ -240,6 +240,15 @@ export default { |
|
|
|
// console.log("Min2", Min2); |
|
|
|
// console.log("Min2", Min2); |
|
|
|
// console.log("Max1", Max1); |
|
|
|
// console.log("Max1", Max1); |
|
|
|
// console.log("Max2", Max2); |
|
|
|
// 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); |
|
|
|
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
|
|
|
const adapterOption = { |
|
|
|
const adapterOption = { |
|
|
|
legend: { |
|
|
|
legend: { |
|
|
@ -255,12 +264,24 @@ export default { |
|
|
|
max: Max1, |
|
|
|
max: Max1, |
|
|
|
splitNumber: 10, |
|
|
|
splitNumber: 10, |
|
|
|
interval: (Max1 - Min1) / 10, |
|
|
|
interval: (Max1 - Min1) / 10, |
|
|
|
|
|
|
|
name: yAxisUnit, |
|
|
|
|
|
|
|
// 设置 name 的样式 |
|
|
|
|
|
|
|
nameTextStyle: { |
|
|
|
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
min: Min2, |
|
|
|
min: Min2, |
|
|
|
max: Max2, |
|
|
|
max: Max2, |
|
|
|
splitNumber: 10, |
|
|
|
splitNumber: 10, |
|
|
|
interval: (Max2 - Min2) / 10, |
|
|
|
interval: (Max2 - Min2) / 10, |
|
|
|
|
|
|
|
name: "%", |
|
|
|
|
|
|
|
// 设置 name 的样式 |
|
|
|
|
|
|
|
nameTextStyle: { |
|
|
|
|
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
|
|
|
|
fontSize: 12, |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
], |
|
|
|
series: [ |
|
|
|
series: [ |
|
|
@ -431,6 +452,62 @@ export default { |
|
|
|
width: "1", |
|
|
|
width: "1", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
// 自定义 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.colorStops[0].color) |
|
|
|
|
|
|
|
var marker = |
|
|
|
|
|
|
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
|
|
|
|
|
|
|
params[i].color.colorStops[0].color + |
|
|
|
|
|
|
|
'"></span>'; |
|
|
|
|
|
|
|
// 根据不同的seriesName 返回不同的单位 |
|
|
|
|
|
|
|
if (seriesName.includes("用水量")) { |
|
|
|
|
|
|
|
res += |
|
|
|
|
|
|
|
marker + |
|
|
|
|
|
|
|
seriesName + |
|
|
|
|
|
|
|
":" + |
|
|
|
|
|
|
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
|
|
|
|
|
|
value + |
|
|
|
|
|
|
|
" " + |
|
|
|
|
|
|
|
"吨" + |
|
|
|
|
|
|
|
"</span><br>"; |
|
|
|
|
|
|
|
} else if (seriesName.includes("用电量")) { |
|
|
|
|
|
|
|
res += |
|
|
|
|
|
|
|
marker + |
|
|
|
|
|
|
|
seriesName + |
|
|
|
|
|
|
|
":" + |
|
|
|
|
|
|
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
|
|
|
|
|
|
value + |
|
|
|
|
|
|
|
" " + |
|
|
|
|
|
|
|
"度" + |
|
|
|
|
|
|
|
"</span><br>"; |
|
|
|
|
|
|
|
} else 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: { |
|
|
|
legend: { |
|
|
|
// 折柱混合的图表,不显示icon,图例就可以根据不同的类型不同 |
|
|
|
// 折柱混合的图表,不显示icon,图例就可以根据不同的类型不同 |
|
|
@ -440,7 +517,7 @@ export default { |
|
|
|
color: "#ffff", |
|
|
|
color: "#ffff", |
|
|
|
fontSize: 12, //这里改字体大小 |
|
|
|
fontSize: 12, //这里改字体大小 |
|
|
|
}, |
|
|
|
}, |
|
|
|
left: "56%", |
|
|
|
left: "center", |
|
|
|
top: "5%", |
|
|
|
top: "5%", |
|
|
|
//图例距离饼图的距离 |
|
|
|
//图例距离饼图的距离 |
|
|
|
itemGap: 5, |
|
|
|
itemGap: 5, |
|
|
@ -542,67 +619,55 @@ export default { |
|
|
|
barWidth: 10, // 柱子宽度 |
|
|
|
barWidth: 10, // 柱子宽度 |
|
|
|
//折线颜色 |
|
|
|
//折线颜色 |
|
|
|
itemStyle: { |
|
|
|
itemStyle: { |
|
|
|
color: "#db9215", |
|
|
|
color: "#0b75d3", |
|
|
|
lineStyle: { |
|
|
|
// 使用颜色渐变 |
|
|
|
color: "#db9215", //折线的颜色 |
|
|
|
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 + |
|
|
|
|
|
|
|
"<br/>" + |
|
|
|
|
|
|
|
params[0].seriesName + |
|
|
|
|
|
|
|
" : " + |
|
|
|
|
|
|
|
params[0].value + |
|
|
|
|
|
|
|
" 吨"; |
|
|
|
|
|
|
|
} else if (params[0].seriesName == "用电量") { |
|
|
|
|
|
|
|
relVal = |
|
|
|
|
|
|
|
params[0].name + |
|
|
|
|
|
|
|
"<br/>" + |
|
|
|
|
|
|
|
params[0].seriesName + |
|
|
|
|
|
|
|
" : " + |
|
|
|
|
|
|
|
params[0].value + |
|
|
|
|
|
|
|
" 度"; |
|
|
|
|
|
|
|
} else if (params[0].seriesName == "耗能") { |
|
|
|
|
|
|
|
relVal = |
|
|
|
|
|
|
|
params[0].name + |
|
|
|
|
|
|
|
"<br/>" + |
|
|
|
|
|
|
|
params[0].seriesName + |
|
|
|
|
|
|
|
" : " + |
|
|
|
|
|
|
|
params[0].value + |
|
|
|
|
|
|
|
" 度/吨"; |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
relVal = |
|
|
|
|
|
|
|
params[0].name + |
|
|
|
|
|
|
|
"<br/>" + |
|
|
|
|
|
|
|
params[0].seriesName + |
|
|
|
|
|
|
|
" : " + |
|
|
|
|
|
|
|
params[0].value + |
|
|
|
|
|
|
|
" 次"; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return relVal; |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
type: "bar", |
|
|
|
barWidth: 10, // 柱子宽度 |
|
|
|
barWidth: 10, // 柱子宽度 |
|
|
|
//折线颜色 |
|
|
|
//折线颜色 |
|
|
|
itemStyle: { |
|
|
|
itemStyle: { |
|
|
|
color: "#1ab395", |
|
|
|
color: "#0b75d3", |
|
|
|
lineStyle: { |
|
|
|
// 使用颜色渐变 |
|
|
|
color: "#1ab395", //折线的颜色 |
|
|
|
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, |
|
|
|
// data: this.data3, |
|
|
|
//折线颜色 |
|
|
|
//折线颜色 |
|
|
|
itemStyle: { |
|
|
|
itemStyle: { |
|
|
|
color: "#e23131", |
|
|
|
color: "#db9215", |
|
|
|
lineStyle: { |
|
|
|
// 使用颜色渐变 |
|
|
|
color: "#e23131", //折线的颜色 |
|
|
|
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, |
|
|
|
// data: this.data4, |
|
|
|
//折线颜色 |
|
|
|
//折线颜色 |
|
|
|
itemStyle: { |
|
|
|
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: { |
|
|
|
lineStyle: { |
|
|
|
color: "#4a98ff", //折线的颜色 |
|
|
|
color: "#EE5217", //折线的颜色 |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|