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}

ECharts设置容器宽高为rem，或者初始化加载会缩小在一起的问题

推荐阅读