2.窗口大小改变和侧边栏收缩的时候，echarts图表的自适应_左侧导航栏收缩 echarts图表也变化

1.窗口缩小放大的时候，图表的大小自适应

宽非固定的
使用resize

windouw.addEventListener("resize",()=>{
	myEchart.resize()
})
1
2
3

2.侧边栏收缩的时候，图表的大小自适应

侧边栏收缩的时候

侧边栏展开的时候,内容显示不全

2.1 监听侧边栏的收缩

 watch: {
    "$store.state.collapse"(val) {
      console.log(val)
      setTimeout(() => {
        // myChart.resize() //echarts得重绘方法
        this.myChart1.resize()
      }, 300);
    },
  },
1
2
3
4
5
6
7
8
9

2.1.1 这里为什么加了个定时器，时间为什么是300s

因为elementUI的侧边栏收缩展开的延时时间是300

具体看官方文档

elementUI-navMenu侧边栏

3.实际使用

<template>
  <div style="padding:20px;">
    <el-card>
      <el-tabs type="border-card" v-model="tabName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="用户管理">
          <div class="echart-top">
            <div id="echart1" style="width:100%;height:100%;"></div>
            <div id="echart2" style="width:100%;height:100%;"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="配置管理">
          <div class="echart-top">
            <div id="echart3" style="width:100%;height:100%;"></div>
            <div id="echart4" style="width:100%;height:100%;"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tabName: "配置管理",
      myChart1: "",
      myChart2: "",
      myChart3: "",
      myChart4: "",
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    "$store.state.collapse"(val) {
      console.log(val)
      setTimeout(() => {
        //echarts得重绘方法
        this.myChart1.resize()
        this.myChart2.resize()
        this.myChart3.resize()
        this.myChart4.resize()
      }, 300);
    },
  },
  methods: {
    init() {
      this.getEchart1();
      this.getEchart2();
      this.getEchart3();
      this.getEchart4();
    },
    handleClick(value) {
      console.log("value", value);
      if (value.name === "用户管理") {
        this.getEchart1();
        this.getEchart2();
      } else {
        this.getEchart3();
      }
    },
    getEchart1() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart1")).dispose();
        this.myChart1 = this.$echarts.init(document.getElementById("echart1"));
        let option = {
          legend: {
            top: "bottom",
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          series: [
            {
              name: "面积模式",
              type: "pie",
              radius: [50, 250],
              center: ["50%", "50%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 8,
              },
              data: [
                { value: 40, name: "rose 1" },
                { value: 38, name: "rose 2" },
                { value: 32, name: "rose 3" },
                { value: 30, name: "rose 4" },
                { value: 28, name: "rose 5" },
                { value: 26, name: "rose 6" },
                { value: 22, name: "rose 7" },
                { value: 18, name: "rose 8" },
              ],
            },
          ],
        };
        this.myChart1.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart1.resize();
        });
      });
    },
    getEchart2() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart2")).dispose();
        this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
        let option = {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        };
        this.myChart2.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart2.resize();
        });
      });
    },
    getEchart3() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart3")).dispose();
        this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
        let option = {
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: "line",
              areaStyle: {},
            },
          ],
        };
        this.myChart3.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart3.resize();
        });
      });
    },
    getEchart4() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart4")).dispose();
        this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
        let option = {
          xAxis: {},
          yAxis: {},
          series: [
            {
              data: [
                [10, 40],
                [50, 100],
                [40, 20],
              ],
              type: "line",
            },
          ],
        };
        this.myChart4.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart4.resize();
        });
      });
    },
  },
};
</script>

<style scoped>
.echart-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 500px;
}
</style>
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202