<script setup>
|
import {computed, onMounted, onUnmounted, ref, watch} from "vue";
|
import "./transparent";
|
import usePageMenuStore from "@/stores/pageMenu";
|
import * as echarts from "echarts";
|
const pageMenu = usePageMenuStore()
|
const hdwChart = ref({});
|
let chart = "";
|
|
const init = (container)=>{
|
chart = echarts.init(container);
|
}
|
|
/**
|
* 设置图表内容
|
* @param option 生成图表的配置项
|
*/
|
const setOption = (option)=> {
|
if (chart) {
|
chart.setOption(option);
|
}
|
}
|
|
/**
|
* 重置图表的大小
|
*/
|
const resize = ()=>{
|
if (chart) {
|
chart.resize();
|
setTimeout(()=>{
|
chart.resize();
|
});
|
}
|
}
|
|
/**
|
* 销毁echarts实例释放内存
|
* @return {[type]} [return description]
|
*/
|
const dispose = ()=>{
|
// 销毁chart
|
if(chart) {
|
chart.dispose();
|
}
|
}
|
|
/**
|
* 获取图表对象
|
* @return {string}
|
*/
|
const getChart=()=>{
|
return chart;
|
}
|
|
const isCollapse = computed(()=>{
|
return pageMenu.isCollapse;
|
})
|
|
watch(isCollapse, ()=>{
|
setTimeout(()=>{
|
resize();
|
}, 300);
|
});
|
onMounted(()=>{
|
init(hdwChart.value);
|
|
// 监听windows窗口的缩放,绑定resize事件
|
window.addEventListener("resize", resize);
|
});
|
|
onUnmounted(()=>{
|
// 销毁resize事件
|
window.removeEventListener("resize", resize);
|
dispose();
|
});
|
|
defineExpose({
|
setOption,
|
resize
|
});
|
</script>
|
|
<template>
|
<div class="e-chart-wrapper" ref="hdwChart"></div>
|
</template>
|
|
<style scoped lang="less">
|
.e-chart-wrapper {
|
height: 100%;
|
}
|
</style>
|
