|
|
@@ -9,19 +9,14 @@ |
|
|
|
>{{ item.label }}</span |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
ref="chart" |
|
|
|
style="width: 100%" |
|
|
|
:style="{ height: vHeight + 'vh' }" |
|
|
|
></div> |
|
|
|
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import chartMixin from "@/mixins/chart.js"; |
|
|
|
import { debounce } from "@/utils/debounce"; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
export default { |
|
|
|
name: "Energy", |
|
|
|
mixins: [chartMixin], |
|
|
|
props: { |
|
|
|
vHeight: { |
|
|
|
type: Number, |
|
|
@@ -44,6 +39,7 @@ export default { |
|
|
|
return { |
|
|
|
isFullscreen: false, |
|
|
|
actualOptions: null, |
|
|
|
chart: "", |
|
|
|
options: { |
|
|
|
color: ["#FFD160", "#2760FF", "#12FFF5"], |
|
|
|
grid: { |
|
|
@@ -205,49 +201,67 @@ export default { |
|
|
|
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; |
|
|
|
// this.initOptions(this.actualOptions); |
|
|
|
// }, |
|
|
|
series(val) { |
|
|
|
if (!val) { |
|
|
|
this.initOptions(this.options); |
|
|
|
return; |
|
|
|
} |
|
|
|
const actualOptions = JSON.parse(JSON.stringify(this.options)); |
|
|
|
actualOptions.series[0].data = val[0].data; |
|
|
|
actualOptions.series[0].name = val[0].name; |
|
|
|
actualOptions.series[1].data = val[1].data; |
|
|
|
actualOptions.series[1].name = val[1].name; |
|
|
|
actualOptions.series[2].data = val[2].data; |
|
|
|
actualOptions.series[2].name = val[2].name; |
|
|
|
this.actualOptions = actualOptions; |
|
|
|
this.initOptions(actualOptions); |
|
|
|
}, |
|
|
|
// series(val) { |
|
|
|
// if (!val) { |
|
|
|
// this.initOptions(this.options); |
|
|
|
// return; |
|
|
|
// } |
|
|
|
// const actualOptions = JSON.parse(JSON.stringify(this.options)); |
|
|
|
// actualOptions.series[0].data = val[0].data; |
|
|
|
// actualOptions.series[0].name = val[0].name; |
|
|
|
// actualOptions.series[1].data = val[1].data; |
|
|
|
// actualOptions.series[1].name = val[1].name; |
|
|
|
// actualOptions.series[2].data = val[2].data; |
|
|
|
// actualOptions.series[2].name = val[2].name; |
|
|
|
// this.actualOptions = actualOptions; |
|
|
|
// this.initOptions(actualOptions); |
|
|
|
// }, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
console.log("00000000000000000000"); |
|
|
|
const actualOptions = JSON.parse(JSON.stringify(this.options)); |
|
|
|
actualOptions.series[0].data = this.series[0].data; |
|
|
|
actualOptions.series[0].name = this.series[0].name; |
|
|
|
actualOptions.series[1].data = this.series[1].data; |
|
|
|
actualOptions.series[1].name = this.series[1].name; |
|
|
|
actualOptions.series[2].data = this.series[2].data; |
|
|
|
actualOptions.series[2].name = this.series[2].name; |
|
|
|
this.actualOptions = actualOptions; |
|
|
|
console.log(actualOptions); |
|
|
|
console.log("1111111111"); |
|
|
|
this.initOptions(actualOptions); |
|
|
|
// this.actualOptions = this.options; |
|
|
|
// this.initOptions(this.options); |
|
|
|
|
|
|
|
// if (screenfull.isEnabled) { |
|
|
|
// screenfull.on("change", () => { |
|
|
|
// this.isFullscreen = screenfull.isFullscreen; |
|
|
|
// }); |
|
|
|
// } |
|
|
|
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(document.getElementById("factoryEnergyChart")); |
|
|
|
const actualOptions = JSON.parse(JSON.stringify(this.options)); |
|
|
|
actualOptions.series[0].data = this.series[0].data; |
|
|
|
actualOptions.series[0].name = this.series[0].name; |
|
|
|
actualOptions.series[1].data = this.series[1].data; |
|
|
|
actualOptions.series[1].name = this.series[1].name; |
|
|
|
actualOptions.series[2].data = this.series[2].data; |
|
|
|
actualOptions.series[2].name = this.series[2].name; |
|
|
|
this.actualOptions = actualOptions; |
|
|
|
this.chart.setOption(actualOptions); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.left-chart-base { |
|
|
|
// position: relative; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.legend { |
|
|
|
position: absolute; |
|
|
|