307 lines
9.4 KiB
Vue
307 lines
9.4 KiB
Vue
<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>
|