【echart】showLoading hideLoading 无数据时显示正在加载
1.要实现的功能当echart无数据时显示数据加载中!有数据显示echarts图形

2.实现步骤(showLoading可根据要求设置样式)
myChart.showLoading({
text: '数据加载中...',
color: '#c23531',
textColor: '#ffffc2',
maskColor: 'rgba(255, 255, 255, 0)',
zlevel: 0
});
3.全部代码
<template>
<div >
<div id="top" style="width: 100%;height: 100%" ></div>
</div>
</template>
<script>
import {getFlow} from '@/api/dashboard';
export default {
name: "TopRightChart",
data(){
return{
dataFlow:{},
}
},
mounted(){
this.drawLine()
},
methods:{
drawLine() {
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('top'))
myChart.showLoading({
text: '数据加载中...',
color: '#c23531',
textColor: '#ffffc2',
maskColor: 'rgba(255, 255, 255, 0)',
zlevel: 0
});
getFlow('60').then(res=>{
this.dataFlow=res.data.data
myChart.hideLoading();
myChart.setOption({
xAxis: {
data: this.dataFlow.xdata
},
series: [{
// 根据名字对应到相应的系列
data: this.dataFlow.deny
}]
});
})
var option={
xAxis: [ //部分样式省略
{
data:[],
}
],
series: [
{
data: [] //部分样式省略
}
]
}
myChart .setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
}
}
</script>
<style scoped>
</style>

浙公网安备 33010602011771号