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