|
|
@@ -8,33 +8,25 @@ |
|
|
|
<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 |
|
|
|
ref="chart" |
|
|
|
style="max-width: 40vw" |
|
|
|
:style="{ height: vHeight + 'vh' }" |
|
|
|
></div> |
|
|
|
<div ref="chart" :style="{ height: '95%',width: width}"></div> |
|
|
|
</chart-container> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import screenfull from "screenfull"; |
|
|
|
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 { |
|
|
|
name: "BarChartBase", |
|
|
|
components: { |
|
|
|
ChartContainer, |
|
|
|
}, |
|
|
|
mixins: [chartMixin], |
|
|
|
// mixins: [chartMixin], |
|
|
|
props: { |
|
|
|
vHeight: { |
|
|
|
type: Number, |
|
|
@@ -59,6 +51,7 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
width: '', |
|
|
|
isFullscreen: false, |
|
|
|
actualOptions: null, |
|
|
|
options: { |
|
|
@@ -182,8 +175,26 @@ export default { |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
isOpen() { |
|
|
|
return this.$store.getters.sidebar.opened |
|
|
|
}, |
|
|
|
}, |
|
|
|
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) { |
|
|
|
this.actualOptions.series.map((item) => { |
|
|
|
item.barWidth = val ? 18 : 12; |
|
|
@@ -191,11 +202,26 @@ export default { |
|
|
|
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.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) { |
|
|
|
if (!val) { |
|
|
|
this.initOptions(this.options); |
|
|
|
this.initChart(this.options); |
|
|
|
return; |
|
|
|
} |
|
|
|
const actualOptions = JSON.parse(JSON.stringify(this.options)); |
|
|
@@ -205,18 +231,41 @@ export default { |
|
|
|
actualOptions.series[1].data = val?.[1]?.data || []; |
|
|
|
actualOptions.series[1].name = val?.[1]?.name || ""; |
|
|
|
this.actualOptions = actualOptions; |
|
|
|
this.initOptions(actualOptions); |
|
|
|
this.initChart(actualOptions); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.actualOptions = this.options; |
|
|
|
this.initOptions(this.options); |
|
|
|
|
|
|
|
if (screenfull.isEnabled) { |
|
|
|
screenfull.on("change", () => { |
|
|
|
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> |
|
|
|