@@ -11,7 +11,7 @@ | |||
<span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | |||
</div> | |||
<div ref="chart" :style="{ height: '100%',width: width}"></div> | |||
<div ref="elsChart" :style="{ height: '100%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
@@ -51,7 +51,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
width:'100%', | |||
width: '100%', | |||
isFullscreen: false, | |||
actualOptions: null, | |||
options: { | |||
@@ -367,8 +367,9 @@ export default { | |||
watch: { | |||
isOpen(val) { | |||
if (val === true) { | |||
this.width = '100%-128px' | |||
this.width = '99%' | |||
this.canvasReset() | |||
console.log(this.width) | |||
} else { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
@@ -427,7 +428,7 @@ export default { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(this.$refs.chart); | |||
this.chart = echarts.init(this.$refs.elsChart); | |||
this.chart.setOption(this.actualOptions); | |||
}, | |||
}, | |||
@@ -11,7 +11,7 @@ | |||
<span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | |||
</div> | |||
<div ref="chart" :style="{ height: '100%',width: width}"></div> | |||
<div ref="waterChart" :style="{ height: '100%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
@@ -51,12 +51,12 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
width: '100%', | |||
width:'', | |||
isFullscreen: false, | |||
actualOptions: null, | |||
options: { | |||
grid: { | |||
left: "5%", | |||
left: "1%", | |||
right: "4%", | |||
bottom: "3%", | |||
top: "15%", | |||
@@ -361,9 +361,12 @@ export default { | |||
}, | |||
watch: { | |||
isOpen(val) { | |||
// console.log(val) | |||
if (val === true) { | |||
this.width = '100%-128px' | |||
console.log('ztl') | |||
this.width = '99%' | |||
this.canvasReset() | |||
console.log(this.width) | |||
} else { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
@@ -371,6 +374,9 @@ export default { | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
isFullscreen(val) { | |||
if (val === true && this.isOpen === true) { | |||
this.width = '99%' | |||
} | |||
this.actualOptions.series.map((item) => { | |||
item.barWidth = val ? 18 : 12; | |||
}); | |||
@@ -399,11 +405,11 @@ export default { | |||
}, | |||
}, | |||
mounted() { | |||
// if (screenfull.isEnabled) { | |||
// screenfull.on("change", () => { | |||
// this.isFullscreen = screenfull.isFullscreen; | |||
// }); | |||
// } | |||
if (screenfull.isEnabled) { | |||
screenfull.on("change", () => { | |||
this.isFullscreen = screenfull.isFullscreen; | |||
}); | |||
} | |||
this.actualOptions = this.options | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
@@ -426,7 +432,7 @@ export default { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(this.$refs.chart); | |||
this.chart = echarts.init(this.$refs.waterChart); | |||
this.chart.setOption(this.actualOptions); | |||
}, | |||
}, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-13 14:08:51 | |||
* @LastEditTime: 2024-05-13 16:19:44 | |||
* @LastEditTime: 2024-05-14 08:46:07 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -9,10 +9,10 @@ | |||
<template> | |||
<chart-container class="bar-chart-base"> | |||
<div class="legend"> | |||
<span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | |||
<!-- <span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> --> | |||
</div> | |||
<div id="chart" ref="chart" :style="{ height: '100%',width: width}"></div> | |||
<div ref="gasChart" :style="{ height: '100%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
@@ -52,12 +52,13 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
width: '100%', | |||
isFullscreen: false, | |||
actualOptions: null, | |||
options: { | |||
grid: { | |||
left: "5%", | |||
right: "1%", | |||
left: "1%", | |||
right: "4%", | |||
bottom: "3%", | |||
top: "15%", | |||
containLabel: true, | |||
@@ -182,9 +183,12 @@ export default { | |||
}, | |||
watch: { | |||
isOpen(val) { | |||
// console.log(val) | |||
if (val === true) { | |||
this.width = '100%-128px' | |||
console.log('ryf') | |||
this.width = '99%' | |||
this.canvasReset() | |||
console.log(this.width) | |||
} else { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
@@ -192,6 +196,9 @@ export default { | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
isFullscreen(val) { | |||
if (val === true && this.isOpen === true) { | |||
this.width = '99%' | |||
} | |||
this.actualOptions.series.map((item) => { | |||
item.barWidth = val ? 18 : 12; | |||
}); | |||
@@ -216,11 +223,11 @@ export default { | |||
}, | |||
}, | |||
mounted() { | |||
// if (screenfull.isEnabled) { | |||
// screenfull.on("change", () => { | |||
// this.isFullscreen = screenfull.isFullscreen; | |||
// }); | |||
// } | |||
if (screenfull.isEnabled) { | |||
screenfull.on("change", () => { | |||
this.isFullscreen = screenfull.isFullscreen; | |||
}); | |||
} | |||
this.actualOptions = this.options | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
@@ -243,7 +250,7 @@ export default { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(this.$refs.chart); | |||
this.chart = echarts.init(this.$refs.gasChart); | |||
this.chart.setOption(this.actualOptions); | |||
}, | |||
}, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 13:22:43 | |||
* @LastEditTime: 2024-05-13 16:19:17 | |||
* @LastEditTime: 2024-05-14 08:32:44 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -51,6 +51,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
width: '100%', | |||
isFullscreen: false, | |||
actualOptions: null, | |||
options: { | |||
@@ -7,31 +7,30 @@ | |||
<template> | |||
<LineChartBase | |||
v-if="1" | |||
:legend="legend" | |||
:series="series" | |||
:xAxis="xAxis" | |||
in="elecCost" | |||
class="elec-cost" | |||
/> | |||
<BarChartBase | |||
<!-- <BarChartBase | |||
v-else | |||
:legend="legend" | |||
:series="series" | |||
:xAxis="xAxis" | |||
in="elecCost" | |||
class="elec-cost" | |||
/> | |||
/> --> | |||
</template> | |||
<script> | |||
import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue"; | |||
// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue"; | |||
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue"; | |||
export default { | |||
name: "ElecCost", | |||
components: { | |||
BarChartBase: BarChartBaseVue, | |||
// BarChartBase: BarChartBaseVue, | |||
LineChartBase: LineChartBaseVue, | |||
}, | |||
props: { | |||