echarts设置数据加载前显示loading动画效果:
划重点:利用echart自带showLoading()方法;
eg:
在调用setoption方法之前调用showLoadin()方法;之后再调用hideLoading()方法
import echarts from 'echarts';
const mycharts = echarts.init(document.getElementById('echart'));
// 调用showLoading方法
mycharts.showLoading({
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.2)',
zlevel: 0,
});;
setTimeout(() => {
// setOption前隐藏loading事件
mycharts.hideLoading();
mycharts.setOption(option);
}, 1000);
const option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};