修改bug
This commit is contained in:
parent
097bab8241
commit
6f0c8503c6
@ -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);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -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);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -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);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -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: {
|
||||||
|
@ -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: {
|
||||||
|
Loading…
Reference in New Issue
Block a user