HTML5+JS+JQuery+ECharts实现异步加载问题

2023-09-19 08:00:05 146

这几天，看了一下ECharts官网的API和Demo发现很有意思，于是就利用模型预测产生的数据做一个伪实时的动态数据显示。

首先，创建一个index.html的文件，我用的vscode打开的，进行编写。

1.插入一个标签

设置他的一些style（可自行美化，我很懒！！！）。

2.在body下建一个

varmyChart=echarts.init(document.getElementById('main')); varmyChart_2=echarts.init(document.getElementById('main_2')); myChart.setOption({ title:{ text:'异步数据加载' }, tooltip:{ show:true, }, xAxis:{ type:'category', boundaryGap:false, data:[], splitLine:{ show:false }, }, yAxis:{ boundaryGap:[0,'100%'], type:'value', min:'dataMin', max:'dataMax', splitLine:{ show:false }, }, series:[{ name:'参数', type:'line', data:[] }] }); myChart_2.setOption({ title:{ text:'异步数据加载' }, tooltip:{ show:true, }, xAxis:{ type:'category', boundaryGap:false, data:[], splitLine:{ show:false }, }, yAxis:{ boundaryGap:[0,'100%'], type:'value', min:'dataMin', max:'dataMax', splitLine:{ show:false }, }, series:[{ name:'参数', type:'line', data:[] }] }); myChart.showLoading(); myChart_2.showLoading(); vardate=[]; vardata=[]; $.ajax({ type:"get", //async:true, url:"test_data.json", data:{}, dataType:"json", success:function(result){ vardatas=result if(result){ varm=0; for(vari=0;i

[
{
"AM23SIG0206.AV":"594.4071",
"time":"2016-05-0100:00:01"
},
{
"AM23SIG0206.AV":"594.4207",
"time":"2016-05-0100:00:04"
},
{
"AM23SIG0206.AV":"594.3883",
"time":"2016-05-0100:00:07"
},
{
"AM23SIG0206.AV":"594.3586",
"time":"2016-05-0100:00:10"
},
{
"AM23SIG0206.AV":"594.3883",
"time":"2016-05-0100:00:13"
},
{
"AM23SIG0206.AV":"594.3398",
"time":"2016-05-0100:00:16"
},
{
"AM23SIG0206.AV":"594.3398",
"time":"2016-05-0100:00:19"
},
{
"AM23SIG0206.AV":"594.3075",
"time":"2016-05-0100:00:22"
},
{
"AM23SIG0206.AV":"594.3076",
"time":"2016-05-0100:00:25"
},
{
"AM23SIG0206.AV":"594.2753",
"time":"2016-05-0100:00:28"
},
{
"AM23SIG0206.AV":"594.2753",
"time":"2016-05-0100:00:31"
},
{
"AM23SIG0206.AV":"594.2429",
"time":"2016-05-0100:00:34"
},
{
"AM23SIG0206.AV":"594.2753",
"time":"2016-05-0100:00:37"
},
{
"AM23SIG0206.AV":"594.2429",
"time":"2016-05-0100:00:40"
},
{
"AM23SIG0206.AV":"594.2565",
"time":"2016-05-0100:00:43"
},
{
"AM23SIG0206.AV":"594.3075",
"time":"2016-05-0100:00:46"
},
{
"AM23SIG0206.AV":"594.2726",
"time":"2016-05-0100:00:49"
},
{
"AM23SIG0206.AV":"594.2752",
"time":"2016-05-0100:00:52"
},
{
"AM23SIG0206.AV":"594.2914",
"time":"2016-05-0100:00:55"
},
{
"AM23SIG0206.AV":"594.2726",
"time":"2016-05-0100:00:58"
},
{
"AM23SIG0206.AV":"594.3075",
"time":"2016-05-0100:01:01"
},
{
"AM23SIG0206.AV":"594.3075",
"time":"2016-05-0100:01:04"
},
{
"AM23SIG0206.AV":"594.2752",
"time":"2016-05-0100:01:07"
},
{
"AM23SIG0206.AV":"594.259",
"time":"2016-05-0100:01:10"
},
{
"AM23SIG0206.AV":"594.2752",
"time":"2016-05-0100:01:13"
},
{
"AM23SIG0206.AV":"594.2403",
"time":"2016-05-0100:01:16"
},
{
"AM23SIG0206.AV":"594.2402",
"time":"2016-05-0100:01:19"
},
{
"AM23SIG0206.AV":"594.1918",
"time":"2016-05-0100:01:22"
},
{
"AM23SIG0206.AV":"594.2241",
"time":"2016-05-0100:01:25"
},
{
"AM23SIG0206.AV":"594.1918",
"time":"2016-05-0100:01:28"
},
{
"AM23SIG0206.AV":"594.1595",
"time":"2016-05-0100:01:31"
},
{
"AM23SIG0206.AV":"594.0975",
"time":"2016-05-0100:01:34"
},
{
"AM23SIG0206.AV":"594.1272",
"time":"2016-05-0100:01:37"
},
{
"AM23SIG0206.AV":"594.111",
"time":"2016-05-0100:01:40"
},
{
"AM23SIG0206.AV":"594.1136",
"time":"2016-05-0100:01:43"
},
{
"AM23SIG0206.AV":"594.0787",
"time":"2016-05-0100:01:46"
},
{
"AM23SIG0206.AV":"594.0813",
"time":"2016-05-0100:01:49"
},
{
"AM23SIG0206.AV":"594.0464",
"time":"2016-05-0100:01:52"
},
{
"AM23SIG0206.AV":"594.014",
"time":"2016-05-0100:01:55"
},
{
"AM23SIG0206.AV":"594.014",
"time":"2016-05-0100:01:58"
},
{
"AM23SIG0206.AV":"594.0328",
"time":"2016-05-0100:02:01"
},
{
"AM23SIG0206.AV":"594.049",
"time":"2016-05-0100:02:04"
},
{
"AM23SIG0206.AV":"594.0464",
"time":"2016-05-0100:02:07"
},
{
"AM23SIG0206.AV":"594.0464",
"time":"2016-05-0100:02:10"
},
{
"AM23SIG0206.AV":"594.0464",
"time":"2016-05-0100:02:13"
},
{
"AM23SIG0206.AV":"594.0787",
"time":"2016-05-0100:02:16"
},
{
"AM23SIG0206.AV":"594.049",
"time":"2016-05-0100:02:19"
},
{
"AM23SIG0206.AV":"594.0625",
"time":"2016-05-0100:02:22"
},
{
"AM23SIG0206.AV":"594.0948",
"time":"2016-05-0100:02:25"
},
{
"AM23SIG0206.AV":"594.0774",
"time":"2016-05-0100:02:28"
},
{
"AM23SIG0206.AV":"594.0464",
"time":"2016-05-0100:02:31"
},
{
"AM23SIG0206.AV":"594.0948",
"time":"2016-05-0100:02:34"
},
{
"AM23SIG0206.AV":"594.0625",
"time":"2016-05-0100:02:37"
},
{
"AM23SIG0206.AV":"594.0625",
"time":"2016-05-0100:02:40"
},
{
"AM23SIG0206.AV":"594.0625",
"time":"2016-05-0100:02:43"
},
{
"AM23SIG0206.AV":"594.0787",
"time":"2016-05-0100:02:46"
},
{
"AM23SIG0206.AV":"594.045",
"time":"2016-05-0100:02:49"
},
{
"AM23SIG0206.AV":"594.0127",
"time":"2016-05-0100:02:52"
},
{
"AM23SIG0206.AV":"594.0464",
"time":"2016-05-0100:02:55"
},
{
"AM23SIG0206.AV":"594.014",
"time":"2016-05-0100:02:58"
},
{
"AM23SIG0206.AV":"594.0464",
"time":"2016-05-0100:03:01"
},
{
"AM23SIG0206.AV":"593.9818",
"time":"2016-05-0100:03:04"
},
{
"AM23SIG0206.AV":"593.9495",
"time":"2016-05-0100:03:07"
},
{
"AM23SIG0206.AV":"593.9481",
"time":"2016-05-0100:03:10"
},
{
"AM23SIG0206.AV":"593.8997",
"time":"2016-05-0100:03:13"
},
{
"AM23SIG0206.AV":"593.8997",
"time":"2016-05-0100:03:16"
},
{
"AM23SIG0206.AV":"593.8673",
"time":"2016-05-0100:03:19"
},
{
"AM23SIG0206.AV":"593.835",
"time":"2016-05-0100:03:22"
},
{
"AM23SIG0206.AV":"593.8027",
"time":"2016-05-0100:03:25"
},
{
"AM23SIG0206.AV":"593.7704",
"time":"2016-05-0100:03:28"
},
{
"AM23SIG0206.AV":"593.7704",
"time":"2016-05-0100:03:31"
},
{
"AM23SIG0206.AV":"593.7193",
"time":"2016-05-0100:03:34"
},
{
"AM23SIG0206.AV":"593.7193",
"time":"2016-05-0100:03:37"
},
{
"AM23SIG0206.AV":"593.6735",
"time":"2016-05-0100:03:40"
},
{
"AM23SIG0206.AV":"593.625",
"time":"2016-05-0100:03:43"
},
{
"AM23SIG0206.AV":"593.6062",
"time":"2016-05-0100:03:46"
},
{
"AM23SIG0206.AV":"593.6062",
"time":"2016-05-0100:03:49"
},
{
"AM23SIG0206.AV":"593.5442",
"time":"2016-05-0100:03:52"
},
{
"AM23SIG0206.AV":"593.528",
"time":"2016-05-0100:03:55"
},
{
"AM23SIG0206.AV":"593.4931",
"time":"2016-05-0100:03:58"
},
{
"AM23SIG0206.AV":"593.4931",
"time":"2016-05-0100:04:01"
},
{
"AM23SIG0206.AV":"593.4446",
"time":"2016-05-0100:04:04"
},
{
"AM23SIG0206.AV":"593.4285",
"time":"2016-05-0100:04:07"
},
{
"AM23SIG0206.AV":"593.3962",
"time":"2016-05-0100:04:10"
},
{
"AM23SIG0206.AV":"593.38",
"time":"2016-05-0100:04:13"
},
{
"AM23SIG0206.AV":"593.3774",
"time":"2016-05-0100:04:16"
},
{
"AM23SIG0206.AV":"593.38",
"time":"2016-05-0100:04:19"
},
{
"AM23SIG0206.AV":"593.3154",
"time":"2016-05-0100:04:22"
},
{
"AM23SIG0206.AV":"593.3477",
"time":"2016-05-0100:04:25"
},
{
"AM23SIG0206.AV":"593.3477",
"time":"2016-05-0100:04:28"
},
{
"AM23SIG0206.AV":"593.3451",
"time":"2016-05-0100:04:31"
},
{
"AM23SIG0206.AV":"593.3451",
"time":"2016-05-0100:04:34"
},
{
"AM23SIG0206.AV":"593.3451",
"time":"2016-05-0100:04:37"
},
{
"AM23SIG0206.AV":"593.3425",
"time":"2016-05-0100:04:40"
},
{
"AM23SIG0206.AV":"593.4097",
"time":"2016-05-0100:04:43"
},
{
"AM23SIG0206.AV":"593.4097",
"time":"2016-05-0100:04:46"
},
{
"AM23SIG0206.AV":"593.4581",
"time":"2016-05-0100:04:49"
},
{
"AM23SIG0206.AV":"593.4608",
"time":"2016-05-0100:04:52"
},
{
"AM23SIG0206.AV":"593.5228",
"time":"2016-05-0100:04:55"
},
{
"AM23SIG0206.AV":"593.5066",
"time":"2016-05-0100:04:58"
},
{
"AM23SIG0206.AV":"593.5739",
"time":"2016-05-0100:05:01"
},
{
"AM23SIG0206.AV":"593.6035",
"time":"2016-05-0100:05:04"
},
{
"AM23SIG0206.AV":"593.6036",
"time":"2016-05-0100:05:07"
},
{
"AM23SIG0206.AV":"593.6359",
"time":"2016-05-0100:05:10"
},
{
"AM23SIG0206.AV":"593.6843",
"time":"2016-05-0100:05:13"
},
{
"AM23SIG0206.AV":"593.7141",
"time":"2016-05-0100:05:16"
},
{
"AM23SIG0206.AV":"593.7463",
"time":"2016-05-0100:05:19"
},
{
"AM23SIG0206.AV":"593.749",
"time":"2016-05-0100:05:22"
},
{
"AM23SIG0206.AV":"593.7787",
"time":"2016-05-0100:05:25"
},
{
"AM23SIG0206.AV":"593.7974",
"time":"2016-05-0100:05:28"
},
{
"AM23SIG0206.AV":"593.8297",
"time":"2016-05-0100:05:31"
},
{
"AM23SIG0206.AV":"593.8782",
"time":"2016-05-0100:05:34"
},
{
"AM23SIG0206.AV":"593.9241",
"time":"2016-05-0100:05:37"
},
{
"AM23SIG0206.AV":"593.9105",
"time":"2016-05-0100:05:40"
},
{
"AM23SIG0206.AV":"593.9752",
"time":"2016-05-0100:05:43"
},
{
"AM23SIG0206.AV":"593.9887",
"time":"2016-05-0100:05:46"
},
{
"AM23SIG0206.AV":"594.0049",
"time":"2016-05-0100:05:49"
},
{
"AM23SIG0206.AV":"594.0049",
"time":"2016-05-0100:05:52"
},
{
"AM23SIG0206.AV":"594.021",
"time":"2016-05-0100:05:55"
},
{
"AM23SIG0206.AV":"594.0372",
"time":"2016-05-0100:05:58"
},
{
"AM23SIG0206.AV":"594.021",
"time":"2016-05-0100:06:01"
},
{
"AM23SIG0206.AV":"594.0695",
"time":"2016-05-0100:06:04"
},
{
"AM23SIG0206.AV":"594.0856",
"time":"2016-05-0100:06:07"
},
{
"AM23SIG0206.AV":"594.0857",
"time":"2016-05-0100:06:10"
},
{
"AM23SIG0206.AV":"594.0857",
"time":"2016-05-0100:06:13"
},
{
"AM23SIG0206.AV":"594.1476",
"time":"2016-05-0100:06:16"
},
{
"AM23SIG0206.AV":"594.0830000000001",
"time":"2016-05-0100:06:19"
},
{
"AM23SIG0206.AV":"594.1154",
"time":"2016-05-0100:06:22"
},
{
"AM23SIG0206.AV":"594.1179",
"time":"2016-05-0100:06:25"
},
{
"AM23SIG0206.AV":"594.1179",
"time":"2016-05-0100:06:28"
},
{
"AM23SIG0206.AV":"594.0830000000001",
"time":"2016-05-0100:06:31"
},
{
"AM23SIG0206.AV":"594.0830000000001",
"time":"2016-05-0100:06:34"
},
{
"AM23SIG0206.AV":"594.0507",
"time":"2016-05-0100:06:37"
},
{
"AM23SIG0206.AV":"594.0830000000001",
"time":"2016-05-0100:06:40"
},
{
"AM23SIG0206.AV":"594.0830000000001",
"time":"2016-05-0100:06:43"
},
{
"AM23SIG0206.AV":"594.0507",
"time":"2016-05-0100:06:46"
},
{
"AM23SIG0206.AV":"594.0345",
"time":"2016-05-0100:06:49"
},
{
"AM23SIG0206.AV":"594.0022",
"time":"2016-05-0100:06:52"
},
{
"AM23SIG0206.AV":"593.9861",
"time":"2016-05-0100:06:55"
},
{
"AM23SIG0206.AV":"593.9699",
"time":"2016-05-0100:06:58"
},
{
"AM23SIG0206.AV":"593.9363",
"time":"2016-05-0100:07:01"
},
{
"AM23SIG0206.AV":"593.9039",
"time":"2016-05-0100:07:04"
},
{
"AM23SIG0206.AV":"593.8568",
"time":"2016-05-0100:07:07"
},
{
"AM23SIG0206.AV":"593.8555",
"time":"2016-05-0100:07:10"
},
{
"AM23SIG0206.AV":"593.8568",
"time":"2016-05-0100:07:13"
},
{
"AM23SIG0206.AV":"593.8232",
"time":"2016-05-0100:07:16"
},
{
"AM23SIG0206.AV":"593.776",
"time":"2016-05-0100:07:19"
},
{
"AM23SIG0206.AV":"593.7747",
"time":"2016-05-0100:07:22"
},
{
"AM23SIG0206.AV":"593.7263",
"time":"2016-05-0100:07:25"
},
{
"AM23SIG0206.AV":"593.7424",
"time":"2016-05-0100:07:28"
},
{
"AM23SIG0206.AV":"593.6778",
"time":"2016-05-0100:07:31"
},
{
"AM23SIG0206.AV":"593.6616",
"time":"2016-05-0100:07:34"
},
{
"AM23SIG0206.AV":"593.6589",
"time":"2016-05-0100:07:37"
},
{
"AM23SIG0206.AV":"593.6293",
"time":"2016-05-0100:07:40"
},
{
"AM23SIG0206.AV":"593.5944",
"time":"2016-05-0100:07:43"
},
{
"AM23SIG0206.AV":"593.6267",
"time":"2016-05-0100:07:46"
},
{
"AM23SIG0206.AV":"593.5944",
"time":"2016-05-0100:07:49"
},
{
"AM23SIG0206.AV":"593.5944",
"time":"2016-05-0100:07:52"
},
{
"AM23SIG0206.AV":"593.5944",
"time":"2016-05-0100:07:55"
},
{
"AM23SIG0206.AV":"593.5782",
"time":"2016-05-0100:07:58"
},
{
"AM23SIG0206.AV":"593.5647",
"time":"2016-05-0100:08:01"
},
{
"AM23SIG0206.AV":"593.562",
"time":"2016-05-0100:08:04"
},
{
"AM23SIG0206.AV":"593.5782",
"time":"2016-05-0100:08:07"
},
{
"AM23SIG0206.AV":"593.5298",
"time":"2016-05-0100:08:10"
},
{
"AM23SIG0206.AV":"593.5944",
"time":"2016-05-0100:08:13"
},
{
"AM23SIG0206.AV":"593.5621",
"time":"2016-05-0100:08:16"
},
{
"AM23SIG0206.AV":"593.5621",
"time":"2016-05-0100:08:19"
},
{
"AM23SIG0206.AV":"593.5944",
"time":"2016-05-0100:08:22"
},
{
"AM23SIG0206.AV":"593.5944",
"time":"2016-05-0100:08:25"
},
{
"AM23SIG0206.AV":"593.5917",
"time":"2016-05-0100:08:28"
},
{
"AM23SIG0206.AV":"593.659",
"time":"2016-05-0100:08:31"
},
{
"AM23SIG0206.AV":"593.6887",
"time":"2016-05-0100:08:34"
},
{
"AM23SIG0206.AV":"593.6564",
"time":"2016-05-0100:08:37"
},
{
"AM23SIG0206.AV":"593.6402",
"time":"2016-05-0100:08:40"
},
{
"AM23SIG0206.AV":"593.6752",
"time":"2016-05-0100:08:43"
},
{
"AM23SIG0206.AV":"593.6725",
"time":"2016-05-0100:08:46"
},
{
"AM23SIG0206.AV":"593.6725",
"time":"2016-05-0100:08:49"
},
{
"AM23SIG0206.AV":"593.6725",
"time":"2016-05-0100:08:52"
},
{
"AM23SIG0206.AV":"593.7022",
"time":"2016-05-0100:08:55"
},
{
"AM23SIG0206.AV":"593.6699",
"time":"2016-05-0100:08:58"
},
{
"AM23SIG0206.AV":"593.6402",
"time":"2016-05-0100:09:01"
},
{
"AM23SIG0206.AV":"593.6699",
"time":"2016-05-0100:09:04"
},
{
"AM23SIG0206.AV":"593.6564",
"time":"2016-05-0100:09:07"
},
{
"AM23SIG0206.AV":"593.6537",
"time":"2016-05-0100:09:10"
},
{
"AM23SIG0206.AV":"593.5917",
"time":"2016-05-0100:09:13"
},
{
"AM23SIG0206.AV":"593.5568",
"time":"2016-05-0100:09:16"
},
{
"AM23SIG0206.AV":"593.573",
"time":"2016-05-0100:09:19"
},
{
"AM23SIG0206.AV":"593.5083",
"time":"2016-05-0100:09:22"
},
{
"AM23SIG0206.AV":"593.4922",
"time":"2016-05-0100:09:25"
},
{
"AM23SIG0206.AV":"593.4786",
"time":"2016-05-0100:09:28"
},
{
"AM23SIG0206.AV":"593.4463",
"time":"2016-05-0100:09:31"
},
{
"AM23SIG0206.AV":"593.4114",
"time":"2016-05-0100:09:34"
},
{
"AM23SIG0206.AV":"593.3953",
"time":"2016-05-0100:09:37"
},
{
"AM23SIG0206.AV":"593.3791",
"time":"2016-05-0100:09:40"
},
{
"AM23SIG0206.AV":"593.3306",
"time":"2016-05-0100:09:43"
},
{
"AM23SIG0206.AV":"593.3009",
"time":"2016-05-0100:09:46"
},
{
"AM23SIG0206.AV":"593.2983",
"time":"2016-05-0100:09:49"
},
{
"AM23SIG0206.AV":"593.266",
"time":"2016-05-0100:09:52"
},
{
"AM23SIG0206.AV":"593.2499",
"time":"2016-05-0100:09:55"
},
{
"AM23SIG0206.AV":"593.3145",
"time":"2016-05-0100:09:58"
},
{
"AM23SIG0206.AV":"593.2821",
"time":"2016-05-0100:10:01"
},
{
"AM23SIG0206.AV":"593.266",
"time":"2016-05-0100:10:04"
},
{
"AM23SIG0206.AV":"593.2485",
"time":"2016-05-0100:10:07"
},
{
"AM23SIG0206.AV":"593.2809",
"time":"2016-05-0100:10:10"
},
{
"AM23SIG0206.AV":"593.2485",
"time":"2016-05-0100:10:13"
},
{
"AM23SIG0206.AV":"593.2809",
"time":"2016-05-0100:10:16"
},
{
"AM23SIG0206.AV":"593.2809",
"time":"2016-05-0100:10:19"
},
{
"AM23SIG0206.AV":"593.2809",
"time":"2016-05-0100:10:22"
},
{
"AM23SIG0206.AV":"593.297",
"time":"2016-05-0100:10:25"
},
{
"AM23SIG0206.AV":"593.2646",
"time":"2016-05-0100:10:28"
},
{
"AM23SIG0206.AV":"593.297",
"time":"2016-05-0100:10:31"
},
{
"AM23SIG0206.AV":"593.297",
"time":"2016-05-0100:10:34"
},
{
"AM23SIG0206.AV":"593.3293",
"time":"2016-05-0100:10:37"
},
{
"AM23SIG0206.AV":"593.3131",
"time":"2016-05-0100:10:40"
},
{
"AM23SIG0206.AV":"593.3293",
"time":"2016-05-0100:10:43"
},
{
"AM23SIG0206.AV":"593.3293",
"time":"2016-05-0100:10:46"
}
]

这个是.json文件（python的大数据模型预测产生的数据我拿来用一哈）

总结

以上所述是小编给大家介绍的HTML5+JS+JQuery+ECharts实现异步加载问题，希望对大家有所帮助，如果大家有任何问题欢迎给我留言，小编会及时回复大家的！

HTML5+JS+JQuery+ECharts实现异步加载问题

热门推荐

随机推荐