ECharts設置容器寬高為rem，或者初始化加載會縮小在一起的問題

1.問題：

關於這兩天寫的一個APP需要在一個頁面用多個圖表，發現一個問題，只要啟動項目初始化首頁進來圖表會縮小，查找資料發現主要是因為div還沒有創建出來echarts就已經加載了，因為獲取不到寬高就會默認寬高100%為100px，所以會縮小在一起，注：我把容器寬高設置回px就解決了，但是我寫的是移動端需要適配所以必須rem。

解決方法：

利用百度查找，給echarts設置延遲加載，用

1：setTimeout包裹調用echarts函數設置延遲時間沒用

2：利用this.$nextTick來處理也沒用

3：用window.onresize = echarts.resize;也沒用

幾乎百度查到的大眾答案全部無效

后來轉變思維，既然都說了需要延遲調用，我為什么非要去把mounted里邊調用echarts方法來延遲呢？

於是乎我就直接在這個echarts里邊進行延遲，下邊是代碼，可能表達的不清楚，但是我相信用我這個方法可以解決大部分類似的問題

  //初始化數據
    initData() {
      setTimeout(function(){    //在我們的echarts方法外邊直接套上setTimeout 然后設置上延時時間就可以解決了
      // 基於准備好的dom，初始化echarts實例
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("main1"));
      // 繪制圖表a
      myChart.setOption({
        // color: ["#FF8D56", "#69ADF2"],
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
          backgroundColor: 'rgba(0,0,0,0.4)',
          border:0,
          position: ["40%", "0%"],
                textStyle : {
            color: '#FFFFFF',
       
        },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["30%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 1440000,
                name: "已達成金額",
                itemStyle: {
                  normal: {
                    //顏色漸變
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 1, color: "#FBB475" },
                      { offset: 0.5, color: "#FF8D56" },
                    ]),
                  },
                },
              },
              {
                value: 360000,
                name: "已達成差額",
                itemStyle: {
                  normal: {
                    //顏色漸變
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#3082D5" },
                      { offset: 0.5, color: "#3F8DDC" },
                    ],true),
                  },
                },
              },
            ],
          },
        ],
      });
    },
      ),200}