225 lines
6.5 KiB
Vue
225 lines
6.5 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">{{ detailData.rate || 0 }}% </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
|
||
export default {
|
||
name: 'EnergyConsumption',
|
||
// components: { Container },
|
||
// mixins: [resize],
|
||
props: {
|
||
detailData: {
|
||
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: () => ('monthG')
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// electricityChart: null,
|
||
// steamChart: null,
|
||
// specialTicks: [2, 4, 6, 8], // 统一的刻度显示
|
||
}
|
||
},
|
||
watch: {
|
||
detailData: {
|
||
deep: true,
|
||
immediate: true, // 初始化时立即执行
|
||
handler() {
|
||
this.updateGauges()
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initGauges()
|
||
// window.addEventListener('resize', this.handleResize)
|
||
this.observeContainerResize()
|
||
},
|
||
methods: {
|
||
observeContainerResize() {
|
||
// 修复：获取正确的容器（组件内的.gauge-container）
|
||
const container = this.$el.querySelector('.gauge-container')
|
||
if (container && window.ResizeObserver) {
|
||
this.resizeObserver = new ResizeObserver(entries => {
|
||
if (this.electricityChart) {
|
||
this.electricityChart.resize() // 直接触发resize，无需防抖
|
||
}
|
||
})
|
||
this.resizeObserver.observe(container)
|
||
}
|
||
},
|
||
initGauges() {
|
||
// console.log('this.id',this.id);
|
||
|
||
// 初始化电气图表实例
|
||
const electricityDom = document.getElementById(this.id)
|
||
if (electricityDom) {
|
||
// 修复：正确创建并存储图表实例
|
||
this.electricityChart = echarts.init(electricityDom)
|
||
// 首次更新数据
|
||
this.updateGauges()
|
||
}
|
||
// 蒸汽图表若未使用，可注释/删除
|
||
// const steamDom = document.getElementById('steamGauge')
|
||
// if (steamDom) {
|
||
// this.steamChart = echarts.init(steamDom)
|
||
// }
|
||
},
|
||
updateGauges() {
|
||
// 修复：先判断实例是否存在，再更新配置
|
||
if (!this.electricityChart) return
|
||
|
||
// 修复：兜底获取rate值，确保数值有效
|
||
const rate = Number(this.detailData?.rate) || 0
|
||
console.log('当前rate值：', rate); // 调试：确认rate值正确
|
||
|
||
// 关键：第二个参数传true，清空原有配置，强制更新
|
||
this.electricityChart.setOption(this.getElectricityGaugeOption(rate), true)
|
||
},
|
||
// 用电量仪表盘配置（保留原有样式，优化数值范围）
|
||
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']] }
|
||
},
|
||
splitLine: {
|
||
length: 10,
|
||
lineStyle: { width: 5, color: '#D6DAE5' },
|
||
},
|
||
axisTick: {
|
||
splitNumber: 2,
|
||
length: 6,
|
||
lineStyle: { width: 2, color: '#D6DAE5' }
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
detail: { show: false },
|
||
data: [{ value: value, unit: '' }] // 确保数值正确传入
|
||
}
|
||
]
|
||
}
|
||
},
|
||
// 未使用的蒸汽仪表盘可注释/删除
|
||
// getSteamGaugeOption(value) { ... }
|
||
}
|
||
}
|
||
</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>
|