修改bug

This commit is contained in:
‘937886381’ 2024-05-20 13:32:36 +08:00
parent 83ad88858b
commit 923323a8df

View File

@ -8,33 +8,25 @@
<template> <template>
<chart-container class="bar-chart-base"> <chart-container class="bar-chart-base">
<div class="legend"> <div class="legend">
<span <span v-for="item in legend" :key="item.label" class="legend-item"
v-for="item in legend" :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
</div> </div>
<div <div ref="chart" :style="{ height: '95%',width: width}"></div>
ref="chart"
style="max-width: 40vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container> </chart-container>
</template> </template>
<script> <script>
import screenfull from "screenfull"; import screenfull from "screenfull";
import ChartContainer from "./ChartContainer.vue"; import ChartContainer from "./ChartContainer.vue";
import chartMixin from "@/mixins/chart.js"; import { debounce } from "@/utils/debounce";
// import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default { export default {
name: "BarChartBase", name: "BarChartBase",
components: { components: {
ChartContainer, ChartContainer,
}, },
mixins: [chartMixin], // mixins: [chartMixin],
props: { props: {
vHeight: { vHeight: {
type: Number, type: Number,
@ -59,6 +51,7 @@ export default {
}, },
data() { data() {
return { return {
width: '',
isFullscreen: false, isFullscreen: false,
actualOptions: null, actualOptions: null,
options: { options: {
@ -182,8 +175,26 @@ export default {
}, },
}; };
}, },
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: { watch: {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isOpen(val) {
// console.log(val)
if (val === true) {
console.log('ztl')
this.width = 95 + '%'
this.canvasReset()
console.log(this.width)
} else {
this.watch = 100 + '%'
this.canvasReset()
}
},
isFullscreen(val) { isFullscreen(val) {
this.actualOptions.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
@ -191,11 +202,26 @@ export default {
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initOptions(this.actualOptions); this.initChart(this.actualOptions);
if (val === false && this.isOpen === true) {
console.log(val)
this.width = 97 + '%'
this.canvasReset()
} else if (val === false && this.isOpen === false) {
this.watch = 100 + '%'
this.canvasReset()
}
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
}, },
series(val) { series(val) {
if (!val) { if (!val) {
this.initOptions(this.options); this.initChart(this.options);
return; return;
} }
const actualOptions = JSON.parse(JSON.stringify(this.options)); const actualOptions = JSON.parse(JSON.stringify(this.options));
@ -205,18 +231,41 @@ export default {
actualOptions.series[1].data = val?.[1]?.data || []; actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || ""; actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initOptions(actualOptions); this.initChart(actualOptions);
}, },
}, },
mounted() { mounted() {
this.actualOptions = this.options;
this.initOptions(this.options);
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.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.actualOptions);
},
}, },
}; };
</script> </script>