修改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" <span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div> </div>
<div ref="chart" :style="{ height: '100%',width: width}"></div> <div ref="elsChart" :style="{ height: '100%',width: width}"></div>
</chart-container> </chart-container>
</template> </template>
@ -367,8 +367,9 @@ export default {
watch: { watch: {
isOpen(val) { isOpen(val) {
if (val === true) { if (val === true) {
this.width = '100%-128px' this.width = '99%'
this.canvasReset() this.canvasReset()
console.log(this.width)
} else { } else {
this.watch = 100 + '%' this.watch = 100 + '%'
this.canvasReset() this.canvasReset()
@ -427,7 +428,7 @@ export default {
if (this.chart) { if (this.chart) {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.elsChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.actualOptions);
}, },
}, },

View File

@ -11,7 +11,7 @@
<span v-for="item in legend" :key="item.label" class="legend-item" <span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div> </div>
<div ref="chart" :style="{ height: '100%',width: width}"></div> <div ref="waterChart" :style="{ height: '100%',width: width}"></div>
</chart-container> </chart-container>
</template> </template>
@ -51,12 +51,12 @@ export default {
}, },
data() { data() {
return { return {
width: '100%', width:'',
isFullscreen: false, isFullscreen: false,
actualOptions: null, actualOptions: null,
options: { options: {
grid: { grid: {
left: "5%", left: "1%",
right: "4%", right: "4%",
bottom: "3%", bottom: "3%",
top: "15%", top: "15%",
@ -361,9 +361,12 @@ export default {
}, },
watch: { watch: {
isOpen(val) { isOpen(val) {
// console.log(val)
if (val === true) { if (val === true) {
this.width = '100%-128px' console.log('ztl')
this.width = '99%'
this.canvasReset() this.canvasReset()
console.log(this.width)
} else { } else {
this.watch = 100 + '%' this.watch = 100 + '%'
this.canvasReset() this.canvasReset()
@ -371,6 +374,9 @@ export default {
}, },
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) { isFullscreen(val) {
if (val === true && this.isOpen === true) {
this.width = '99%'
}
this.actualOptions.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
@ -399,11 +405,11 @@ export default {
}, },
}, },
mounted() { mounted() {
// if (screenfull.isEnabled) { if (screenfull.isEnabled) {
// screenfull.on("change", () => { screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
// }); });
// } }
this.actualOptions = this.options this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
@ -426,7 +432,7 @@ export default {
if (this.chart) { if (this.chart) {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.waterChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.actualOptions);
}, },
}, },

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-13 14:08:51 * @Date: 2024-05-13 14:08:51
* @LastEditTime: 2024-05-13 16:19:44 * @LastEditTime: 2024-05-14 08:46:07
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -9,10 +9,10 @@
<template> <template>
<chart-container class="bar-chart-base"> <chart-container class="bar-chart-base">
<div class="legend"> <div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item" <!-- <span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> -->
</div> </div>
<div id="chart" ref="chart" :style="{ height: '100%',width: width}"></div> <div ref="gasChart" :style="{ height: '100%',width: width}"></div>
</chart-container> </chart-container>
</template> </template>
@ -52,12 +52,13 @@ export default {
}, },
data() { data() {
return { return {
width: '100%',
isFullscreen: false, isFullscreen: false,
actualOptions: null, actualOptions: null,
options: { options: {
grid: { grid: {
left: "5%", left: "1%",
right: "1%", right: "4%",
bottom: "3%", bottom: "3%",
top: "15%", top: "15%",
containLabel: true, containLabel: true,
@ -182,9 +183,12 @@ export default {
}, },
watch: { watch: {
isOpen(val) { isOpen(val) {
// console.log(val)
if (val === true) { if (val === true) {
this.width = '100%-128px' console.log('ryf')
this.width = '99%'
this.canvasReset() this.canvasReset()
console.log(this.width)
} else { } else {
this.watch = 100 + '%' this.watch = 100 + '%'
this.canvasReset() this.canvasReset()
@ -192,6 +196,9 @@ export default {
}, },
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) { isFullscreen(val) {
if (val === true && this.isOpen === true) {
this.width = '99%'
}
this.actualOptions.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
@ -216,11 +223,11 @@ export default {
}, },
}, },
mounted() { mounted() {
// if (screenfull.isEnabled) { if (screenfull.isEnabled) {
// screenfull.on("change", () => { screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
// }); });
// } }
this.actualOptions = this.options this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
@ -243,7 +250,7 @@ export default {
if (this.chart) { if (this.chart) {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.gasChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.actualOptions);
}, },
}, },

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 13:22:43 * @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-05-13 16:19:17 * @LastEditTime: 2024-05-14 08:32:44
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -51,6 +51,7 @@ export default {
}, },
data() { data() {
return { return {
width: '100%',
isFullscreen: false, isFullscreen: false,
actualOptions: null, actualOptions: null,
options: { options: {

View File

@ -7,31 +7,30 @@
<template> <template>
<LineChartBase <LineChartBase
v-if="1"
:legend="legend" :legend="legend"
:series="series" :series="series"
:xAxis="xAxis" :xAxis="xAxis"
in="elecCost" in="elecCost"
class="elec-cost" class="elec-cost"
/> />
<BarChartBase <!-- <BarChartBase
v-else v-else
:legend="legend" :legend="legend"
:series="series" :series="series"
:xAxis="xAxis" :xAxis="xAxis"
in="elecCost" in="elecCost"
class="elec-cost" class="elec-cost"
/> /> -->
</template> </template>
<script> <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"; import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
export default { export default {
name: "ElecCost", name: "ElecCost",
components: { components: {
BarChartBase: BarChartBaseVue, // BarChartBase: BarChartBaseVue,
LineChartBase: LineChartBaseVue, LineChartBase: LineChartBaseVue,
}, },
props: { props: {