修改bug

This commit is contained in:
‘937886381’ 2024-05-14 08:46:58 +08:00
parent 097bab8241
commit 6f0c8503c6
5 changed files with 47 additions and 33 deletions

View File

@ -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);
},
},

View File

@ -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);
},
},

View File

@ -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);
},
},

View File

@ -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: {

View File

@ -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: {