|
|
@@ -510,52 +510,78 @@
|
|
|
regionId: this.regionId,
|
|
|
statisticsCycle: this.statisticsCycle
|
|
|
}).then((res) => {
|
|
|
- // 综合能费趋势
|
|
|
+ // 综合能费趋势 - 专业蓝青渐变色
|
|
|
this.feeTrendOption = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
- backgroundColor: '#fff',
|
|
|
- borderColor: '#e0e0e0',
|
|
|
+ backgroundColor: 'rgba(10, 25, 50, 0.9)',
|
|
|
+ borderColor: '#00d4ff',
|
|
|
borderWidth: 1,
|
|
|
textStyle: {
|
|
|
- color: '#333'
|
|
|
+ color: '#fff'
|
|
|
},
|
|
|
axisPointer: {
|
|
|
type: 'line',
|
|
|
lineStyle: {
|
|
|
- color: 'rgba(255, 255, 255, 0.5)'
|
|
|
+ color: 'rgba(0, 212, 255, 0.5)',
|
|
|
+ type: 'dashed'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
- top: '50px'
|
|
|
- // right: '1.25rem',
|
|
|
- // bottom: '1.875rem',
|
|
|
- // left: '3.125rem'
|
|
|
+ top: 50,
|
|
|
+ right: 20,
|
|
|
+ bottom: 30,
|
|
|
+ left: 60,
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: res.map((item) => item.time),
|
|
|
- axisLine: { lineStyle: { color: '#4a6fa5' } },
|
|
|
- axisLabel: { color: '#fff' }
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 212, 255, 0.3)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#a8c5e8',
|
|
|
+ fontSize: 11
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
name: '单位：元',
|
|
|
nameTextStyle: {
|
|
|
- color: '#fff',
|
|
|
+ color: '#00d4ff',
|
|
|
align: 'left',
|
|
|
- padding: [0, 10, 0, -35]
|
|
|
+ padding: [0, 0, 0, -45],
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 212, 255, 0.3)'
|
|
|
+ }
|
|
|
},
|
|
|
- axisLine: { lineStyle: { color: '#4a6fa5' } },
|
|
|
- axisLabel: { color: '#fff' },
|
|
|
- splitLine: { lineStyle: { color: 'rgba(74, 111, 165, 0.2)' } }
|
|
|
+ axisLabel: {
|
|
|
+ color: '#a8c5e8',
|
|
|
+ fontSize: 11
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 212, 255, 0.15)',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: res.map((item) => item.value),
|
|
|
type: 'line',
|
|
|
- smooth: true,
|
|
|
+ smooth: 0.4,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 6,
|
|
|
+ showSymbol: false,
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
@@ -564,13 +590,42 @@
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
- { offset: 0, color: 'rgba(59, 130, 246, 0.5)' },
|
|
|
- { offset: 1, color: 'rgba(59, 130, 246, 0.05)' }
|
|
|
+ { offset: 0, color: 'rgba(0, 242, 254, 0.4)' },
|
|
|
+ { offset: 0.5, color: 'rgba(0, 153, 255, 0.15)' },
|
|
|
+ { offset: 1, color: 'rgba(0, 100, 255, 0.02)' }
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- lineStyle: { color: '#3b82f6', width: 2 },
|
|
|
- itemStyle: { color: '#3b82f6' }
|
|
|
+ lineStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [
|
|
|
+ { offset: 0, color: '#00f2fe' },
|
|
|
+ { offset: 0.5, color: '#00d4ff' },
|
|
|
+ { offset: 1, color: '#0099ff' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ width: 3,
|
|
|
+ shadowColor: 'rgba(0, 212, 255, 0.5)',
|
|
|
+ shadowBlur: 10
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00f2fe',
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ showSymbol: true,
|
|
|
+ scale: true,
|
|
|
+ itemStyle: {
|
|
|
+ shadowColor: 'rgba(0, 242, 254, 0.8)',
|
|
|
+ shadowBlur: 15
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
@@ -1139,6 +1194,11 @@
|
|
|
statisticsCycle: this.statisticsCycle
|
|
|
}).then((res) => {
|
|
|
console.log(res, 'res');
|
|
|
+ // 专业配色方案 - 科技风渐变
|
|
|
+ const electricityColors = ['#00d4ff', '#00a8ff', '#0099ff', '#0077ff', '#0055ff'];
|
|
|
+ const waterColors = ['#00f5a0', '#00d4aa', '#00b894', '#009e7d', '#008b6b'];
|
|
|
+ const gasColors = ['#ff9f43', '#ff8c42', '#ff7b38', '#ff6b35', '#ff5722'];
|
|
|
+
|
|
|
this.areaCompareOption = {
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
@@ -1159,14 +1219,22 @@
|
|
|
position: 'center',
|
|
|
formatter: '用电量',
|
|
|
color: '#fff',
|
|
|
- fontSize: 14
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'bold'
|
|
|
},
|
|
|
labelLine: { show: false },
|
|
|
- itemStyle: { borderWidth: 0 },
|
|
|
- data: res.electricityCompare?.map((item) => {
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 0,
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: 'rgba(0, 212, 255, 0.3)'
|
|
|
+ },
|
|
|
+ data: res.electricityCompare?.map((item, index) => {
|
|
|
return {
|
|
|
value: item.usageValue,
|
|
|
- name: item.regionName
|
|
|
+ name: item.regionName,
|
|
|
+ itemStyle: {
|
|
|
+ color: electricityColors[index % electricityColors.length]
|
|
|
+ }
|
|
|
};
|
|
|
})
|
|
|
},
|
|
|
@@ -1181,14 +1249,22 @@
|
|
|
position: 'center',
|
|
|
formatter: '用水量',
|
|
|
color: '#fff',
|
|
|
- fontSize: 14
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'bold'
|
|
|
},
|
|
|
labelLine: { show: false },
|
|
|
- itemStyle: { borderWidth: 0 },
|
|
|
- data: res.waterCompare?.map((item) => {
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 0,
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: 'rgba(0, 245, 160, 0.3)'
|
|
|
+ },
|
|
|
+ data: res.waterCompare?.map((item, index) => {
|
|
|
return {
|
|
|
value: item.usageValue,
|
|
|
- name: item.regionName
|
|
|
+ name: item.regionName,
|
|
|
+ itemStyle: {
|
|
|
+ color: waterColors[index % waterColors.length]
|
|
|
+ }
|
|
|
};
|
|
|
})
|
|
|
},
|
|
|
@@ -1203,14 +1279,22 @@
|
|
|
position: 'center',
|
|
|
formatter: '用气量',
|
|
|
color: '#fff',
|
|
|
- fontSize: 14
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'bold'
|
|
|
},
|
|
|
labelLine: { show: false },
|
|
|
- itemStyle: { borderWidth: 0 },
|
|
|
- data: res.gasCompare?.map((item) => {
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 0,
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: 'rgba(255, 159, 67, 0.3)'
|
|
|
+ },
|
|
|
+ data: res.gasCompare?.map((item, index) => {
|
|
|
return {
|
|
|
value: item.usageValue,
|
|
|
- name: item.regionName
|
|
|
+ name: item.regionName,
|
|
|
+ itemStyle: {
|
|
|
+ color: gasColors[index % gasColors.length]
|
|
|
+ }
|
|
|
};
|
|
|
})
|
|
|
}
|
|
|
@@ -1246,23 +1330,38 @@
|
|
|
chartOption: {}
|
|
|
}
|
|
|
];
|
|
|
+ // 专业配色方案
|
|
|
+ const colorThemes = [
|
|
|
+ { line: '#00d4ff', start: 'rgba(0, 212, 255, 0.4)', end: 'rgba(0, 212, 255, 0.02)' },
|
|
|
+ { line: '#00f5a0', start: 'rgba(0, 245, 160, 0.4)', end: 'rgba(0, 245, 160, 0.02)' },
|
|
|
+ { line: '#f59e0b', start: 'rgba(245, 158, 11, 0.4)', end: 'rgba(245, 158, 11, 0.02)' },
|
|
|
+ { line: '#0099ff', start: 'rgba(0, 153, 255, 0.4)', end: 'rgba(0, 153, 255, 0.02)' }
|
|
|
+ ];
|
|
|
+
|
|
|
['electricityTrend', 'waterTrend', 'gasTrend', 'costTrend'].forEach(
|
|
|
(item, index) => {
|
|
|
+ const theme = colorThemes[index];
|
|
|
this.$set(this.todayList[index], 'chartOption', {
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(10, 25, 50, 0.9)',
|
|
|
+ borderColor: theme.line,
|
|
|
+ borderWidth: 1,
|
|
|
+ textStyle: { color: '#fff', fontSize: 12 }
|
|
|
+ },
|
|
|
grid: { left: 5, right: 5, top: 10, bottom: 20 },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: res[item]?.map((item) => item.time),
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
- lineStyle: { color: 'rgba(255,255,255,0.3)' }
|
|
|
+ lineStyle: { color: 'rgba(255,255,255,0.2)' }
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
- color: '#fff',
|
|
|
- fontSize: 10,
|
|
|
- interval: 0
|
|
|
+ color: 'rgba(255,255,255,0.7)',
|
|
|
+ fontSize: 9,
|
|
|
+ interval: 'auto'
|
|
|
},
|
|
|
axisTick: { show: false }
|
|
|
},
|
|
|
@@ -1273,7 +1372,7 @@
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
- color: 'rgba(255,255,255,0.2)',
|
|
|
+ color: 'rgba(255,255,255,0.1)',
|
|
|
type: 'dashed'
|
|
|
}
|
|
|
},
|
|
|
@@ -1283,11 +1382,15 @@
|
|
|
{
|
|
|
type: 'line',
|
|
|
data: res[item]?.map((item) => item.value),
|
|
|
- smooth: true,
|
|
|
- symbol: 'none',
|
|
|
+ smooth: 0.4,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 4,
|
|
|
+ showSymbol: false,
|
|
|
lineStyle: {
|
|
|
- color: '#3b82f6',
|
|
|
- width: 2
|
|
|
+ color: theme.line,
|
|
|
+ width: 2.5,
|
|
|
+ shadowColor: theme.line,
|
|
|
+ shadowBlur: 8
|
|
|
},
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
@@ -1297,10 +1400,18 @@
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
- { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
|
|
|
- { offset: 1, color: 'rgba(59, 130, 246, 0.05)' }
|
|
|
+ { offset: 0, color: theme.start },
|
|
|
+ { offset: 1, color: theme.end }
|
|
|
]
|
|
|
}
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ showSymbol: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ borderColor: theme.line,
|
|
|
+ borderWidth: 2
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
@@ -1322,49 +1433,78 @@
|
|
|
regionId: this.regionId,
|
|
|
statisticsCycle: this.statisticsCycle
|
|
|
}).then((res) => {
|
|
|
- // 综合能费趋势
|
|
|
+ // 综合用能趋势 - 科技蓝色渐变色
|
|
|
this.trendOption = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
- backgroundColor: '#fff',
|
|
|
- borderColor: '#e0e0e0',
|
|
|
+ backgroundColor: 'rgba(10, 25, 50, 0.9)',
|
|
|
+ borderColor: '#0099ff',
|
|
|
borderWidth: 1,
|
|
|
textStyle: {
|
|
|
- color: '#333'
|
|
|
+ color: '#fff'
|
|
|
},
|
|
|
axisPointer: {
|
|
|
type: 'line',
|
|
|
lineStyle: {
|
|
|
- color: 'rgba(255, 255, 255, 0.5)'
|
|
|
+ color: 'rgba(0, 153, 255, 0.5)',
|
|
|
+ type: 'dashed'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
- top: '50px'
|
|
|
+ top: 50,
|
|
|
+ right: 20,
|
|
|
+ bottom: 30,
|
|
|
+ left: 60,
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: res.map((item) => item.time),
|
|
|
- axisLine: { lineStyle: { color: '#4a6fa5' } },
|
|
|
- axisLabel: { color: '#fff' }
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 153, 255, 0.3)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#7dd3fc',
|
|
|
+ fontSize: 11
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
- name: '单位：Kwh',
|
|
|
+ name: '单位：kWh',
|
|
|
nameTextStyle: {
|
|
|
- color: '#fff',
|
|
|
+ color: '#0099ff',
|
|
|
align: 'left',
|
|
|
- padding: [0, 10, 0, -35]
|
|
|
+ padding: [0, 0, 0, -50],
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 153, 255, 0.3)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#7dd3fc',
|
|
|
+ fontSize: 11
|
|
|
},
|
|
|
- axisLine: { lineStyle: { color: '#4a6fa5' } },
|
|
|
- axisLabel: { color: '#fff' },
|
|
|
- splitLine: { lineStyle: { color: 'rgba(74, 111, 165, 0.2)' } }
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(0, 153, 255, 0.15)',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: res.map((item) => item.value),
|
|
|
type: 'line',
|
|
|
- smooth: true,
|
|
|
+ smooth: 0.4,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 6,
|
|
|
+ showSymbol: false,
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
@@ -1373,13 +1513,42 @@
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
- { offset: 0, color: 'rgba(59, 130, 246, 0.5)' },
|
|
|
- { offset: 1, color: 'rgba(59, 130, 246, 0.05)' }
|
|
|
+ { offset: 0, color: 'rgba(0, 212, 255, 0.4)' },
|
|
|
+ { offset: 0.5, color: 'rgba(0, 153, 255, 0.15)' },
|
|
|
+ { offset: 1, color: 'rgba(0, 100, 255, 0.02)' }
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- lineStyle: { color: '#3b82f6', width: 2 },
|
|
|
- itemStyle: { color: '#3b82f6' }
|
|
|
+ lineStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [
|
|
|
+ { offset: 0, color: '#00d4ff' },
|
|
|
+ { offset: 0.5, color: '#0099ff' },
|
|
|
+ { offset: 1, color: '#0064ff' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ width: 3,
|
|
|
+ shadowColor: 'rgba(0, 153, 255, 0.5)',
|
|
|
+ shadowBlur: 10
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00d4ff',
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ showSymbol: true,
|
|
|
+ scale: true,
|
|
|
+ itemStyle: {
|
|
|
+ shadowColor: 'rgba(0, 212, 255, 0.8)',
|
|
|
+ shadowBlur: 15
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
]
|
|
|
};
|
yusheng