longyvfengyun
2023-11-21 f012458151f57d1f3d6753908a1213ae6c86927d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<script setup>
import {computed, onMounted, onUnmounted, ref, watch} from "vue";
import "./transparent";
import usePageMenuStore from "@/stores/pageMenu";
import * as echarts from "echarts";
import "echarts-liquidfill";
const pageMenu = usePageMenuStore()
const hdwChart = ref({});
let chart = "";
 
const init = (container)=>{
    chart = echarts.init(container);
}
 
/**
 * 设置图表内容
 * @param option 生成图表的配置项
 */
const setOption = (option)=> {
    if (chart) {
        chart.clear();
        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);
  resize();
});
onMounted(()=>{
    init(hdwChart.value);
 
    // 监听windows窗口的缩放,绑定resize事件
    window.addEventListener("resize", resize);
});
 
onUnmounted(()=>{
    // 销毁resize事件
    window.removeEventListener("resize", resize);
    dispose();
});
 
defineExpose({
    setOption,
    resize,
    getChart
});
</script>
 
<template>
    <div class="e-chart-wrapper">
    <div class="e-chart-container">
      <div class="e-chart-content" ref="hdwChart"></div>
    </div>
  </div>
</template>
 
<style scoped lang="less">
.e-chart-wrapper {
  position: relative;
    height: 100%;
  .e-chart-container {
    position: absolute;
    width: 100%;
    height: 100%;
    .e-chart-content {
      height: 100%;
    }
  }
}
</style>