新增页面
This commit is contained in:
‘937886381’
306
src/views/home/netPriceAnalysisComponents/electricityGauge.vue
Normal file
306
src/views/home/netPriceAnalysisComponents/electricityGauge.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="chartBox" style="width: 100%; height: 108px; position: relative;">
|
||||
<div :id="id" style="width: 100%; height:100%;"></div>
|
||||
<div class="bottomTip">
|
||||
<div class="precent">
|
||||
<span class="precentNum">{{ energyObj.electricComu }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'EnergyConsumption',
|
||||
// components: { Container },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
energyObj: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
electricComu: 0,
|
||||
steamComu: 20, // 调整为符合max范围的数值（0-8）
|
||||
// electricity: [120, 150, 130, 180, 160, 200, 190],
|
||||
// steam: [80, 95, 85, 110, 100, 120, 115],
|
||||
// dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
|
||||
})
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: () => ('')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
electricityChart: null,
|
||||
steamChart: null,
|
||||
specialTicks: [2, 4, 6, 8], // 统一的刻度显示
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
energyObj: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.updateGauges()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initGauges()
|
||||
// window.addEventListener('resize', this.handleResize)
|
||||
this.observeContainerResize()
|
||||
},
|
||||
methods: {
|
||||
observeContainerResize() {
|
||||
const container = document.querySelector('.gauge-container')
|
||||
if (container && window.ResizeObserver) {
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
this.handleResize()
|
||||
})
|
||||
resizeObserver.observe(container)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
resizeObserver.unobserve(container)
|
||||
})
|
||||
}
|
||||
},
|
||||
initGauges() {
|
||||
// 初始化电气图表实例
|
||||
const electricityDom = document.getElementById(this.id)
|
||||
if (electricityDom) {
|
||||
this.electricityChart = echarts.init(electricityDom)
|
||||
}
|
||||
// 初始化蒸汽图表实例
|
||||
const steamDom = document.getElementById('steamGauge')
|
||||
if (steamDom) {
|
||||
this.steamChart = echarts.init(steamDom)
|
||||
}
|
||||
// 首次更新数据
|
||||
this.updateGauges()
|
||||
},
|
||||
updateGauges() {
|
||||
// 优化：仅更新数据，不销毁实例（提升性能）
|
||||
if (this.electricityChart) {
|
||||
// 转换原始数据为“万kw/h”（与仪表盘max匹配）
|
||||
const electricValue = 80
|
||||
this.electricityChart.setOption(this.getElectricityGaugeOption(electricValue))
|
||||
}
|
||||
},
|
||||
// 1. 用电量仪表盘独立配置函数
|
||||
getElectricityGaugeOption(value) {
|
||||
// 用电量专属渐变色
|
||||
const electricityGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#0B58FF' },
|
||||
{ offset: 1, color: '#32FFCD' }
|
||||
])
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: '月度',
|
||||
type: 'gauge',
|
||||
radius: '95',
|
||||
center: ['50%', '90%'],
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100, // 用电量专属最大值
|
||||
splitNumber: 4,
|
||||
label: { show: false },
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
width: 14,
|
||||
itemStyle: { color: electricityGradient }
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||||
length: '75%',
|
||||
width: 16,
|
||||
itemStyle: { color: '#288AFF' }, // 用电量指针颜色
|
||||
offsetCenter: [0, '10%']
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: { width: 12, color: [[1, '#E6EBF7']] }
|
||||
},
|
||||
// axisTick: {
|
||||
// splitNumber: 2,
|
||||
// show: (val) => this.specialTicks.includes(val),
|
||||
// lineStyle: { width: 2, color: '#999' }
|
||||
// },
|
||||
splitLine: {
|
||||
length: 10, lineStyle: { width: 5, color: '#D6DAE5' },
|
||||
},
|
||||
// axisLabel: {
|
||||
// show: (val) => this.specialTicks.includes(val),
|
||||
// distance: -45,
|
||||
// color: '#ffffff',
|
||||
// fontSize: 14,
|
||||
// fontWeight: 'bold'
|
||||
// },
|
||||
axisTick: {
|
||||
splitNumber: 2,
|
||||
length:6,
|
||||
lineStyle: { width: 2, color: '#D6DAE5' }
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
detail: { show: false },
|
||||
data: [{ value, unit: '' }] // 用电量单位
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// 2. 用蒸汽仪表盘独立配置函数
|
||||
getSteamGaugeOption(value) {
|
||||
// 蒸汽专属渐变色
|
||||
const steamGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: 'rgba(11, 168, 255, 0.26)' },
|
||||
{ offset: 1, color: 'rgba(54, 239, 230, 1)' }
|
||||
])
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'gauge',
|
||||
radius: '80',
|
||||
center: ['50%', '85%'],
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 160, // 蒸汽专属最大值
|
||||
splitNumber: 4,
|
||||
label: { show: false },
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
width: 14,
|
||||
itemStyle: { color: steamGradient }
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||||
length: '75%',
|
||||
width: 16,
|
||||
itemStyle: { color: 'rgba(11, 168, 255, 1)' }, // 蒸汽指针颜色
|
||||
offsetCenter: [0, '5%']
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: { width: 14, color: [[1, 'rgba(19, 84, 122, 1)']] }
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 2,
|
||||
show: (val) => this.specialTicks.includes(val),
|
||||
lineStyle: { width: 2, color: '#999' }
|
||||
},
|
||||
splitLine: { length: 12, lineStyle: { width: 3, color: '#999' } },
|
||||
axisLabel: {
|
||||
show: (val) => this.specialTicks.includes(val),
|
||||
distance: -45,
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
detail: { show: false },
|
||||
data: [{ value, unit: 't' }] // 蒸汽单位
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// handleResize() {
|
||||
// if (this.resizeTimer) clearTimeout(this.resizeTimer)
|
||||
// this.resizeTimer = setTimeout(() => {
|
||||
// if (this.electricityChart) this.electricityChart.resize()
|
||||
// if (this.steamChart) this.steamChart.resize()
|
||||
// }, 100)
|
||||
// }
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// if (this.electricityChart) this.electricityChart.dispose()
|
||||
// if (this.steamChart) this.steamChart.dispose()
|
||||
// window.removeEventListener('resize', this.handleResize)
|
||||
// if (this.resizeTimer) clearTimeout(this.resizeTimer)
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.chartBox {
|
||||
.bottomTip {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
.precent {
|
||||
line-height: 3px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 54px;
|
||||
height: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// 用电量线条颜色
|
||||
.precent::before {
|
||||
|
||||
background: linear-gradient(90deg, rgba(40, 138, 255, 0) 0%, rgba(12, 125, 254, 0.4) 100%);
|
||||
}
|
||||
|
||||
/* ::after：从 透明 到 rgba(12, 125, 254, 0.4)（90度渐变，左到右） */
|
||||
.precent::after {
|
||||
background: linear-gradient(90deg, rgba(12, 125, 254, 0.4) 0%, rgba(40, 138, 255, 0) 100%);
|
||||
}
|
||||
|
||||
// 蒸汽线条颜色
|
||||
// .steam-precent::after,
|
||||
// .steam-precent::before {
|
||||
// background: linear-gradient(90deg, rgba(11, 168, 255, 0.26) 0%, rgba(54, 239, 230, 1) 100%);
|
||||
// }
|
||||
|
||||
.precentNum {
|
||||
display: inline-block;
|
||||
// width: 52px;
|
||||
height: 22px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #0B58FF;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// 蒸汽数字颜色
|
||||
.steam-num {
|
||||
color: rgba(54, 239, 230, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user