Echarts多个图标，window.onresize只生效最后

解决方案：把多个图表放到一个方法中去绘制，然后使用window.onresize就ok

代码部分（其中有注释）

        <template>
          <div class="tab">
            <div class="tab_box" id="bar_one"></div>
            <div class="tab_box" id="bar_two"></div>
          </div>
        </template>

        <script>
        export default {
          name: "Tab",
          data() {
            return {};
          },
          mounted() {
            this.drawBar();
          },
          methods: {
            drawBar: function() {
              let myChartFirst = this.$echarts.init(document.getElementById("bar_one"));
              let myChartSecond = this.$echarts.init(
                document.getElementById("bar_two")
              );
              // 绘制图表
              //First Start
              let optionFrist = {
                backgroundColor: "#f4f2e3",
                title: {
                  text: "Super",

                  textStyle: {
                    color: "#fff",
                    fontSize: 60,
                    fontWeight: "bold"
                  },
                  left: "center",
                  bottom: "49%",

                  itemGap: 60
                },
                tooltip: {
                  show: false
                },
                legend: {},
                series: [
                  {
                    name: "内圈",
                    type: "pie",
                    hoverAnimation: false,
                    tooltip: {},
                    radius: [0, "38%"],
                    color: ["#55a2f2", "#0065ba", "#35a2ff", "#12cbf6"],
                    label: {
                      normal: {
                        show: false,
                        position: "center",
                        color: "#fff",
                        formatter: function(params) {
                          return params.value;
                        }
                      }
                    },
                    labelLine: {
                      normal: {
                        show: false
                      }
                    },
                    data: [
                      {
                        value: 0,
                        itemStyle: {
                          normal: {
                            color: "rgba(20,198,249,1)"
                          }
                        }
                      }
                    ]
                  },

                  {
                    name: "数据",
                    type: "pie",
                    startAngle: 315,
                    radius: ["50%", "60%"],
                    legendHoverLink: false,
                    hoverAnimation: false,
                    avoidLabelOverlap: false,
                    label: {
                      normal: {
                        show: false,
                        position: "center"
                      },
                      emphasis: {
                        show: true,
                        textStyle: {
                          fontSize: "30",
                          fontWeight: "bold"
                        }
                      }
                    },
                    labelLine: {
                      normal: {
                        show: false
                      }
                    },
                    data: [
                      {
                        value: 25,
                        itemStyle: {
                          normal: {
                            color: "rgba(0,0,0,0)"
                          }
                        }
                      },
                      {
                        value: 25,
                        itemStyle: {
                          normal: {
                            color: "rgba(20,198,249,1)"
                          }
                        }
                      },
                      {
                        value: 50,
                        itemStyle: {
                          normal: {
                            color: "rgba(4,40,50,1)"
                          }
                        }
                      }
                    ]
                  },

                  {
                    name: "外圈",
                    type: "pie",
                    startAngle: 315,
                    hoverAnimation: false,
                    radius: ["68%", "69%"],
                    label: {
                      normal: {
                        show: false,
                        position: "center"
                      },
                      emphasis: {
                        show: true,
                        textStyle: {
                          fontSize: "10",
                          fontWeight: "bold"
                        }
                      }
                    },
                    labelLine: {
                      normal: {
                        show: false
                      }
                    },
                    data: [
                      {
                        value: 25,
                        itemStyle: {
                          normal: {
                            color: "rgba(0,0,0,0)"
                          }
                        }
                      },
                      {
                        value: 75,
                        itemStyle: {
                          normal: {
                            color: "rgba(20,198,249,1)"
                          }
                        }
                      }
                    ]
                  }
                ]
              };
              //Second Start
              let dataStyle = {
                normal: {
                  label: { show: false },
                  labelLine: { show: false },
                  shadowBlur: 40,
                  shadowColor: "rgba(40, 40, 40, 0.5)"
                }
              };
              let placeHolderStyle = {
                normal: {
                  color: "rgba(0,0,0,0)",
                  label: { show: false },
                  labelLine: { show: false }
                },
                emphasis: {
                  color: "rgba(0,0,0,0)"
                }
              };
              let optionSecond = {
                backgroundColor: "#f4f2e3",
                color: ["#85b6b2", "#6d4f8d", "#cd5e7e", "#e38980", "#f7db88"],
                tooltip: {
                  show: true,
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                  itemGap: 12,
                  top: "93%",
                  data: ["01", "02", "03", "04", "05", "06"]
                },
                toolbox: {
                  show: false,
                  feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                series: [
                  {
                    name: "Line 1",
                    type: "pie",
                    clockWise: false,
                    radius: [180, 200],
                    itemStyle: dataStyle,
                    hoverAnimation: false,

                    data: [
                      {
                        value: 300,
                        name: "01"
                      },
                      {
                        value: 50,
                        name: "invisible",
                        itemStyle: placeHolderStyle
                      }
                    ]
                  },
                  {
                    name: "Line 2",
                    type: "pie",
                    clockWise: false,
                    radius: [160, 180],
                    itemStyle: dataStyle,
                    hoverAnimation: false,

                    data: [
                      {
                        value: 150,
                        name: "02"
                      },
                      {
                        value: 60,
                        name: "invisible",
                        itemStyle: placeHolderStyle
                      }
                    ]
                  },
                  {
                    name: "Line 3",
                    type: "pie",
                    clockWise: false,
                    hoverAnimation: false,
                    radius: [140, 160],
                    itemStyle: dataStyle,

                    data: [
                      {
                        value: 80,
                        name: "03"
                      },
                      {
                        value: 50,
                        name: "invisible",
                        itemStyle: placeHolderStyle
                      }
                    ]
                  },
                  {
                    name: "Line 4",
                    type: "pie",
                    clockWise: false,
                    hoverAnimation: false,
                    radius: [120, 140],
                    itemStyle: dataStyle,

                    data: [
                      {
                        value: 45,
                        name: "04"
                      },
                      {
                        value: 30,
                        name: "invisible",
                        itemStyle: placeHolderStyle
                      }
                    ]
                  },
                  {
                    name: "Line 5",
                    type: "pie",
                    clockWise: false,
                    hoverAnimation: false,
                    radius: [100, 120],
                    itemStyle: dataStyle,

                    data: [
                      {
                        value: 30,
                        name: "05"
                      },
                      {
                        value: 30,
                        name: "invisible",
                        itemStyle: placeHolderStyle
                      }
                    ]
                  }
                ]
              };
              //使用刚指定的配置项和数据显示图表
              myChartFirst.setOption(optionFrist);
              myChartSecond.setOption(optionSecond);
              setTimeout(() => {
                /*窗口自适应，关键代码*/
                window.onresize = function() {
                  myChartFirst.resize();
                  myChartSecond.resize();
                };
              }, 200);
            }
          }
        };
        </script>

        <style scoped>
        .tab {
          width: 100%;
          height: 6rem;
          font-size: 22px;
          display: flex;
        }
        .tab_box {
          width: 100%;
          height: 5rem;
          border: 1px dashed rgb(29, 33, 34);
        }
        .tab_box:nth-of-type(1) {
          border-right: none;
        }
        </style>

顺便找了两个比较好看的图标抄了上去

这里卿洋
愿喜❤️