首页 > 代码库 > Echarts--异步数据加载和更新

Echarts--异步数据加载和更新

2024-10-15 08:00:39   215人阅读

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步数据加载和更新</title>
</head>
<body>
<div id="main" style="width:800px;height:600px;"></div>
<script src="jquery.min.js"></script>
<script src="echarts.js"></script>
<script>
$(function(){
myChart = echarts.init(document.querySelector(‘#main‘));
myChart.setOption({
title:{
text:‘异步数据加载示例‘
},
tooltip:{},
legend:{
data:[‘销量‘]
},
xAxis:{
data:[]
// data:[‘衬衫‘,‘羊毛衫‘,‘雪纺衫‘,‘裤子‘,‘高跟鞋‘,‘袜子‘]
},
yAxis:{},
series:[{
name:‘销量‘,
type:‘bar‘,
data:[]
// data:[12,45,32,61,24,11]/
}]
})
myChart.showLoading();
var json=[{name:‘衬衫‘,value:12},{name:‘羊毛衫‘,value:45},{name:‘雪纺衫‘,value:32},{name:‘裤子‘,value:61},{name:‘高跟鞋‘,value:24},{name:‘袜子‘,value:11}]
var dataName = [];
var dataVal = [];
for(var i=0;i< json.length; i++){
dataName[i] = json[i].name;
dataVal[i] = json[i].value;
}
var time = setTimeout(function(){
clearTimeout(time);
myChart.setOption({
xAxis:{
data:dataName
},
series:[{
name:‘销量‘,
data:dataVal
}]
})
},3000)
var time1 = setTimeout(function(){
myChart.hideLoading();
},2800)

})

</script>
</body>
</html>

 

Echarts--异步数据加载和更新


联系
我们