css-Echarts图表初始显示异常非完全显示

1.echarts图表初始加载异常

2.问题原因

初次加载时，由于外层使用%比 echarts dom元素没有完全加载完成，canvas绘画继承本身宽高，造成Echarts图表初始显示异常非完全显示。

3.使用echarts图表可参考以下代码（实现一定的自适应）

<template>
  	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="excelC"  ref="excelChart" style="width: 90%;height:80%;"></div>
</template>
<script>
  methods: {
     setci(data) {
      // 有的话就获取已有echarts实例的DOM节点
      let myChart = echarts.getInstanceByDom(document.getElementById("cicly"))
      // 如果不存在，就进行初始化
      if (myChart == null || myChart == undefined || myChart == '') {
        myChart = echarts.init(document.getElementById("cicly"));
      }
      //对应配置内容
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '项目执行情况',
            type: 'pie',
			radius: ['40%', '70%'],
            label: {
              formatter: '{d}%',
              fontSize: 14
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 5
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            data: data,
          },
        ],
      }
      myChart.setOption(option)
	  window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
  //获取后端传输数据
  search() {
   this.setci(Data)
   }
},
mounted() {
	this.$nextTick(() => {
		this.search()
	})
},

4.核心解决代码

   myChart.setOption(option)
	  window.addEventListener('resize', function () {
        myChart.resize();
      });

mounted() {
	this.$nextTick(() => {
		this.search()
	})
},