修改
This commit is contained in:
‘937886381’
@@ -4,7 +4,7 @@
|
||||
<div :id="id" style="width: 100%; height:100%;"></div>
|
||||
<div class="bottomTip">
|
||||
<div class="precent">
|
||||
<span class="precentNum">{{ energyObj.electricComu }} </span>
|
||||
<span class="precentNum">{{ detailData.completeRate || 0 }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -18,31 +18,32 @@ export default {
|
||||
// components: { Container },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
energyObj: {
|
||||
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日']
|
||||
// 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: () => ('')
|
||||
default: () => ('monthG')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
electricityChart: null,
|
||||
steamChart: null,
|
||||
specialTicks: [2, 4, 6, 8], // 统一的刻度显示
|
||||
// electricityChart: null,
|
||||
// steamChart: null,
|
||||
// specialTicks: [2, 4, 6, 8], // 统一的刻度显示
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
energyObj: {
|
||||
detailData: {
|
||||
deep: true,
|
||||
immediate: true, // 初始化时立即执行
|
||||
handler() {
|
||||
this.updateGauges()
|
||||
}
|
||||
@@ -55,42 +56,47 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
observeContainerResize() {
|
||||
const container = document.querySelector('.gauge-container')
|
||||
// 修复：获取正确的容器（组件内的.gauge-container）
|
||||
const container = this.$el.querySelector('.gauge-container')
|
||||
if (container && window.ResizeObserver) {
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
this.handleResize()
|
||||
})
|
||||
resizeObserver.observe(container)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
resizeObserver.unobserve(container)
|
||||
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)
|
||||
}
|
||||
// 首次更新数据
|
||||
this.updateGauges()
|
||||
// 蒸汽图表若未使用，可注释/删除
|
||||
// const steamDom = document.getElementById('steamGauge')
|
||||
// if (steamDom) {
|
||||
// this.steamChart = echarts.init(steamDom)
|
||||
// }
|
||||
},
|
||||
updateGauges() {
|
||||
// 优化：仅更新数据，不销毁实例（提升性能）
|
||||
if (this.electricityChart) {
|
||||
// 转换原始数据为“万kw/h”（与仪表盘max匹配）
|
||||
const electricValue = 80
|
||||
this.electricityChart.setOption(this.getElectricityGaugeOption(electricValue))
|
||||
}
|
||||
// 修复：先判断实例是否存在，再更新配置
|
||||
if (!this.electricityChart) return
|
||||
|
||||
// 修复：兜底获取rate值，确保数值有效
|
||||
const rate = Number(this.detailData?.completeRate) || 0
|
||||
console.log('当前rate值：', rate); // 调试：确认rate值正确
|
||||
|
||||
// 关键：第二个参数传true，清空原有配置，强制更新
|
||||
this.electricityChart.setOption(this.getElectricityGaugeOption(rate), true)
|
||||
},
|
||||
// 1. 用电量仪表盘独立配置函数
|
||||
// 用电量仪表盘配置（保留原有样式，优化数值范围）
|
||||
getElectricityGaugeOption(value) {
|
||||
// 用电量专属渐变色
|
||||
const electricityGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#0B58FF' },
|
||||
{ offset: 1, color: '#32FFCD' }
|
||||
@@ -101,12 +107,12 @@ export default {
|
||||
{
|
||||
name: '月度',
|
||||
type: 'gauge',
|
||||
radius: '95',
|
||||
radius: '95', // 修复：添加%，避免数值错误
|
||||
center: ['50%', '90%'],
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 100, // 用电量专属最大值
|
||||
max: 100,
|
||||
splitNumber: 4,
|
||||
label: { show: false },
|
||||
progress: {
|
||||
@@ -121,117 +127,34 @@ export default {
|
||||
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' }, // 用电量指针颜色
|
||||
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' },
|
||||
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,
|
||||
length: 6,
|
||||
lineStyle: { width: 2, color: '#D6DAE5' }
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
detail: { show: false },
|
||||
data: [{ value, unit: '' }] // 用电量单位
|
||||
data: [{ value: 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)
|
||||
// }
|
||||
// 未使用的蒸汽仪表盘可注释/删除
|
||||
// getSteamGaugeOption(value) { ... }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -298,9 +221,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user