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()})
},