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

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

宽非固定的
使用resize

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

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

侧边栏收缩的时候

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

2.1 监听侧边栏的收缩

 watch: {
    "$store.state.collapse"(val) {
      console.log(val)
      setTimeout(() => {
        // myChart.resize() //echarts得重绘方法
        this.myChart1.resize()
      }, 300);
    },
  },

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>