@@ -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> | ||||
@@ -51,7 +51,7 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
width:'100%', | |||||
width: '100%', | |||||
isFullscreen: false, | isFullscreen: false, | ||||
actualOptions: null, | actualOptions: null, | ||||
options: { | options: { | ||||
@@ -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) { | |||||
// screenfull.on("change", () => { | |||||
// this.isFullscreen = screenfull.isFullscreen; | |||||
// }); | |||||
// } | |||||
if (screenfull.isEnabled) { | |||||
screenfull.on("change", () => { | |||||
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" | |||||
: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> | ||||
<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%", | |||||
right: "1%", | |||||
left: "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) { | |||||
// screenfull.on("change", () => { | |||||
// this.isFullscreen = screenfull.isFullscreen; | |||||
// }); | |||||
// } | |||||
if (screenfull.isEnabled) { | |||||
screenfull.on("change", () => { | |||||
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: { | ||||