The DataV Border12 renders Echarts to fit the screen

Render Echarts using a DataV component – DV-border-box-12 as a container not adaptive

<div
      class="grid-content bg-purple"
      ref="pie2"
      :key="key"
      style="height: 100%"
    >
Copy the code

First, dv-border-box-12 bindingkeyCan be bound to the outer div if the layout is raster

    <div
      class="grid-content bg-purple"
      ref="pie2"
      :key="key"
      style="height: 100%"
    ></div>
Copy the code

Listen for changes in the height and width of the interface container to change the key and trigger the container to render again

    window.addEventListener("resize", function (e) {
    this.$nextTick(() => {
      _this.key++;
    });
  });  
Copy the code

If the el-Menu component is indented, changes in the interface container cannot be monitored

computed: { listData() { return this.$store.state.isCollapseVal; }, watch: {listData(val) {if (val == false) {this.fontsizeTrue = true; } else { this.fontsizeTrue = false; } var chart_1 = echarts.init(document.getElementById("main2")); chart_1.resize(); this.key++; Echarts also ADAPTS to rendering by listening for changes in the store declaration variable isCollapseVal, which triggers key changes to the container againCopy the code