echart 和ajax实现动态刷新
将整个设置echart部分代码设置为一个函数
function create(){
var myChart = echarts.init(document.getElementById('main'));
var arr1=[],arr2=[];
function arrTest(){
$.ajax({
type:"post",
url:"finally.php",
dataType:"json",
async:false,
data:{},
success:function(result){
if (result){
for (var i = 0; i < result.length; i++) {
arr1.push(result[i].id);
arr2.push(result[i].num);
}
}
},
error:function(errorMsg) {
alert("数据读取失败");
}
})
return arr1,arr2;
}
// setInterval(arrTest(),300);
// while(1){
arrTest();
// setInterval(arrTest(),300);
console.log(arr1[0]);
// window.function(){
// setInterval(arrTest(),300);
// }
var option = {
tooltip: {
show: true
},
legend: {
data:['num']
},
xAxis : [
{
type : 'category',
data : arr1
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"num",
"type":"bar",
"data":arr2
}
]
};
myChart.setOption(option);
// }
// setInterval(arrTest(),300);
// sjetInterval(myChart.setOption(option),3000);
}
再通过setInterval重复调用这个函数
$(function (){
setInterval("create()",1000);
})
整体代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../echart test/js/echarts.min.js"></script>
<script src="../echart test/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="main" style="height:400px"></div>
<script type="text/javascript">
function create(){
var myChart = echarts.init(document.getElementById('main'));
var arr1=[],arr2=[];
function arrTest(){
$.ajax({
type:"post",
url:"finally.php",
dataType:"json",
async:false,
data:{},
success:function(result){
if (result){
for (var i = 0; i < result.length; i++) {
arr1.push(result[i].id);
arr2.push(result[i].num);
}
}
},
error:function(errorMsg) {
alert("数据读取失败");
}
})
return arr1,arr2;
}
// setInterval(arrTest(),300);
// while(1){
arrTest();
// setInterval(arrTest(),300);
console.log(arr1[0]);
// window.function(){
// setInterval(arrTest(),300);
// }
var option = {
tooltip: {
show: true
},
legend: {
data:['num']
},
xAxis : [
{
type : 'category',
data : arr1
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"num",
"type":"bar",
"data":arr2
}
]
};
myChart.setOption(option);
// }
// setInterval(arrTest(),300);
// sjetInterval(myChart.setOption(option),3000);
}
$(function (){
setInterval("create()",1000);
})
</script>
</body>
</html>