这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 。
首先,创建一个index.html的文件,我用的vscode打开的,进行编写。
1.插入一个标签
<div id="main" style="width:600px;height:400px;"></div>
设置他的一些style(可自行美化,我很懒!!!)。
2.在body下建一个<script>脚本(为什么要在body下写js脚本呢?因为这是提高用户体验,可自行百度深层次的原因~~~)。
3.脚本写啥呢?别急,慢慢来啊~~
(1)首先,我们来建一个echarts的对象,就叫他MyChart吧
var myChart = echarts.init(document.getElementById('main'));
(2)建一个setoption这是初始化图的,填一些基本参数(可通过此链接飞到Echarts官网的配置参考一下)
(3)初始化了之后,我们就可以ajax异步读取本地文件了~~~~
其中不懂堆栈的(链接在此这个是我Google的,有可能被墙~~)不懂push,shift操作数据的(链接在此这个应该不会被墙~~)
$.ajax({ type:"get", // async:true, url:"test_data.json", data:{}, dataType:"json", success:function(result){ var datas=result if(result){ var m=0; for(var i=0;i<result.length;i++){ if(m<1000){ datas.shift(); date.push(result[i]["time"]); data.push(result[i]["AM23SIG0206.AV"]); m+=1; } else{ break; } myChart.hideLoading(); setInterval(function(){ for(var n=0;n<2;n++){ date.shift(); date.push(datas[n]["time"]); data.shift(); data.push(datas[n]["AM23SIG0206.AV"]); } myChart.setOption({ xAxis:{ data:date }, series:[ { name:"参数", data:data } ]}); for(var nn=0;nn<2;nn++){ datas.shift() } },2000); } } }, error:function(errorMsg){ alert("图表请求数据失败!"); myChart.hideLoading(); myChart_2.hideLoading(); } })
我来解释一下,这个异步加载的原理是这样子的:
(1)我们现在加载一个.json文件,存在一个变量result里,开始进行数据的操作,利用堆栈的概念先存一个图上要显示的数据量,假设是1000个点,存到data里(这是一个队列)你如果要实现动态的实时的数据,看着数据他会动~~~~你需要存一个数据进去,但是呢这个队列只有1000个容量,放不下怎么办,没关系啊,你先取一个出来不就行了嘛,就这样循环下去~~~~
(2)但是啊,取一个存一个太麻烦了,我们在设置一个定时器setInterval()在这个里面,每过2s更新2个点(怎么更新呢,就是data.shift()
data.push()
模拟了堆栈~~~~
这样就达到了动态数据了~~~~
好吧,如果只是这样也太low了,我要实现一个框架+数据库+前端的真正数据动起来~~~~让我在研究几天~~~~~~
好了,不废话了,下面是源码,有需要的童鞋可以自己跑一下,看看可不可以动~~~~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Charts</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/echarts.min.js">[ { "AM23SIG0206.AV": "594.4071", "time": "2016-05-01 00:00:01" }, { "AM23SIG0206.AV": "594.4207", "time": "2016-05-01 00:00:04" }, { "AM23SIG0206.AV": "594.3883", "time": "2016-05-01 00:00:07" }, { "AM23SIG0206.AV": "594.3586", "time": "2016-05-01 00:00:10" }, { "AM23SIG0206.AV": "594.3883", "time": "2016-05-01 00:00:13" }, { "AM23SIG0206.AV": "594.3398", "time": "2016-05-01 00:00:16" }, { "AM23SIG0206.AV": "594.3398", "time": "2016-05-01 00:00:19" }, { "AM23SIG0206.AV": "594.3075", "time": "2016-05-01 00:00:22" }, { "AM23SIG0206.AV": "594.3076", "time": "2016-05-01 00:00:25" }, { "AM23SIG0206.AV": "594.2753", "time": "2016-05-01 00:00:28" }, { "AM23SIG0206.AV": "594.2753", "time": "2016-05-01 00:00:31" }, { "AM23SIG0206.AV": "594.2429", "time": "2016-05-01 00:00:34" }, { "AM23SIG0206.AV": "594.2753", "time": "2016-05-01 00:00:37" }, { "AM23SIG0206.AV": "594.2429", "time": "2016-05-01 00:00:40" }, { "AM23SIG0206.AV": "594.2565", "time": "2016-05-01 00:00:43" }, { "AM23SIG0206.AV": "594.3075", "time": "2016-05-01 00:00:46" }, { "AM23SIG0206.AV": "594.2726", "time": "2016-05-01 00:00:49" }, { "AM23SIG0206.AV": "594.2752", "time": "2016-05-01 00:00:52" }, { "AM23SIG0206.AV": "594.2914", "time": "2016-05-01 00:00:55" }, { "AM23SIG0206.AV": "594.2726", "time": "2016-05-01 00:00:58" }, { "AM23SIG0206.AV": "594.3075", "time": "2016-05-01 00:01:01" }, { "AM23SIG0206.AV": "594.3075", "time": "2016-05-01 00:01:04" }, { "AM23SIG0206.AV": "594.2752", "time": "2016-05-01 00:01:07" }, { "AM23SIG0206.AV": "594.259", "time": "2016-05-01 00:01:10" }, { "AM23SIG0206.AV": "594.2752", "time": "2016-05-01 00:01:13" }, { "AM23SIG0206.AV": "594.2403", "time": "2016-05-01 00:01:16" }, { "AM23SIG0206.AV": "594.2402", "time": "2016-05-01 00:01:19" }, { "AM23SIG0206.AV": "594.1918", "time": "2016-05-01 00:01:22" }, { "AM23SIG0206.AV": "594.2241", "time": "2016-05-01 00:01:25" }, { "AM23SIG0206.AV": "594.1918", "time": "2016-05-01 00:01:28" }, { "AM23SIG0206.AV": "594.1595", "time": "2016-05-01 00:01:31" }, { "AM23SIG0206.AV": "594.0975", "time": "2016-05-01 00:01:34" }, { "AM23SIG0206.AV": "594.1272", "time": "2016-05-01 00:01:37" }, { "AM23SIG0206.AV": "594.111", "time": "2016-05-01 00:01:40" }, { "AM23SIG0206.AV": "594.1136", "time": "2016-05-01 00:01:43" }, { "AM23SIG0206.AV": "594.0787", "time": "2016-05-01 00:01:46" }, { "AM23SIG0206.AV": "594.0813", "time": "2016-05-01 00:01:49" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:01:52" }, { "AM23SIG0206.AV": "594.014", "time": "2016-05-01 00:01:55" }, { "AM23SIG0206.AV": "594.014", "time": "2016-05-01 00:01:58" }, { "AM23SIG0206.AV": "594.0328", "time": "2016-05-01 00:02:01" }, { "AM23SIG0206.AV": "594.049", "time": "2016-05-01 00:02:04" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:07" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:10" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:13" }, { "AM23SIG0206.AV": "594.0787", "time": "2016-05-01 00:02:16" }, { "AM23SIG0206.AV": "594.049", "time": "2016-05-01 00:02:19" }, { "AM23SIG0206.AV": "594.0625", "time": "2016-05-01 00:02:22" }, { "AM23SIG0206.AV": "594.0948", "time": "2016-05-01 00:02:25" }, { "AM23SIG0206.AV": "594.0774", "time": "2016-05-01 00:02:28" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:31" }, { "AM23SIG0206.AV": "594.0948", "time": "2016-05-01 00:02:34" }, { "AM23SIG0206.AV": "594.0625", "time": "2016-05-01 00:02:37" }, { "AM23SIG0206.AV": "594.0625", "time": "2016-05-01 00:02:40" }, { "AM23SIG0206.AV": "594.0625", "time": "2016-05-01 00:02:43" }, { "AM23SIG0206.AV": "594.0787", "time": "2016-05-01 00:02:46" }, { "AM23SIG0206.AV": "594.045", "time": "2016-05-01 00:02:49" }, { "AM23SIG0206.AV": "594.0127", "time": "2016-05-01 00:02:52" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:55" }, { "AM23SIG0206.AV": "594.014", "time": "2016-05-01 00:02:58" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:03:01" }, { "AM23SIG0206.AV": "593.9818", "time": "2016-05-01 00:03:04" }, { "AM23SIG0206.AV": "593.9495", "time": "2016-05-01 00:03:07" }, { "AM23SIG0206.AV": "593.9481", "time": "2016-05-01 00:03:10" }, { "AM23SIG0206.AV": "593.8997", "time": "2016-05-01 00:03:13" }, { "AM23SIG0206.AV": "593.8997", "time": "2016-05-01 00:03:16" }, { "AM23SIG0206.AV": "593.8673", "time": "2016-05-01 00:03:19" }, { "AM23SIG0206.AV": "593.835", "time": "2016-05-01 00:03:22" }, { "AM23SIG0206.AV": "593.8027", "time": "2016-05-01 00:03:25" }, { "AM23SIG0206.AV": "593.7704", "time": "2016-05-01 00:03:28" }, { "AM23SIG0206.AV": "593.7704", "time": "2016-05-01 00:03:31" }, { "AM23SIG0206.AV": "593.7193", "time": "2016-05-01 00:03:34" }, { "AM23SIG0206.AV": "593.7193", "time": "2016-05-01 00:03:37" }, { "AM23SIG0206.AV": "593.6735", "time": "2016-05-01 00:03:40" }, { "AM23SIG0206.AV": "593.625", "time": "2016-05-01 00:03:43" }, { "AM23SIG0206.AV": "593.6062", "time": "2016-05-01 00:03:46" }, { "AM23SIG0206.AV": "593.6062", "time": "2016-05-01 00:03:49" }, { "AM23SIG0206.AV": "593.5442", "time": "2016-05-01 00:03:52" }, { "AM23SIG0206.AV": "593.528", "time": "2016-05-01 00:03:55" }, { "AM23SIG0206.AV": "593.4931", "time": "2016-05-01 00:03:58" }, { "AM23SIG0206.AV": "593.4931", "time": "2016-05-01 00:04:01" }, { "AM23SIG0206.AV": "593.4446", "time": "2016-05-01 00:04:04" }, { "AM23SIG0206.AV": "593.4285", "time": "2016-05-01 00:04:07" }, { "AM23SIG0206.AV": "593.3962", "time": "2016-05-01 00:04:10" }, { "AM23SIG0206.AV": "593.38", "time": "2016-05-01 00:04:13" }, { "AM23SIG0206.AV": "593.3774", "time": "2016-05-01 00:04:16" }, { "AM23SIG0206.AV": "593.38", "time": "2016-05-01 00:04:19" }, { "AM23SIG0206.AV": "593.3154", "time": "2016-05-01 00:04:22" }, { "AM23SIG0206.AV": "593.3477", "time": "2016-05-01 00:04:25" }, { "AM23SIG0206.AV": "593.3477", "time": "2016-05-01 00:04:28" }, { "AM23SIG0206.AV": "593.3451", "time": "2016-05-01 00:04:31" }, { "AM23SIG0206.AV": "593.3451", "time": "2016-05-01 00:04:34" }, { "AM23SIG0206.AV": "593.3451", "time": "2016-05-01 00:04:37" }, { "AM23SIG0206.AV": "593.3425", "time": "2016-05-01 00:04:40" }, { "AM23SIG0206.AV": "593.4097", "time": "2016-05-01 00:04:43" }, { "AM23SIG0206.AV": "593.4097", "time": "2016-05-01 00:04:46" }, { "AM23SIG0206.AV": "593.4581", "time": "2016-05-01 00:04:49" }, { "AM23SIG0206.AV": "593.4608", "time": "2016-05-01 00:04:52" }, { "AM23SIG0206.AV": "593.5228", "time": "2016-05-01 00:04:55" }, { "AM23SIG0206.AV": "593.5066", "time": "2016-05-01 00:04:58" }, { "AM23SIG0206.AV": "593.5739", "time": "2016-05-01 00:05:01" }, { "AM23SIG0206.AV": "593.6035", "time": "2016-05-01 00:05:04" }, { "AM23SIG0206.AV": "593.6036", "time": "2016-05-01 00:05:07" }, { "AM23SIG0206.AV": "593.6359", "time": "2016-05-01 00:05:10" }, { "AM23SIG0206.AV": "593.6843", "time": "2016-05-01 00:05:13" }, { "AM23SIG0206.AV": "593.7141", "time": "2016-05-01 00:05:16" }, { "AM23SIG0206.AV": "593.7463", "time": "2016-05-01 00:05:19" }, { "AM23SIG0206.AV": "593.749", "time": "2016-05-01 00:05:22" }, { "AM23SIG0206.AV": "593.7787", "time": "2016-05-01 00:05:25" }, { "AM23SIG0206.AV": "593.7974", "time": "2016-05-01 00:05:28" }, { "AM23SIG0206.AV": "593.8297", "time": "2016-05-01 00:05:31" }, { "AM23SIG0206.AV": "593.8782", "time": "2016-05-01 00:05:34" }, { "AM23SIG0206.AV": "593.9241", "time": "2016-05-01 00:05:37" }, { "AM23SIG0206.AV": "593.9105", "time": "2016-05-01 00:05:40" }, { "AM23SIG0206.AV": "593.9752", "time": "2016-05-01 00:05:43" }, { "AM23SIG0206.AV": "593.9887", "time": "2016-05-01 00:05:46" }, { "AM23SIG0206.AV": "594.0049", "time": "2016-05-01 00:05:49" }, { "AM23SIG0206.AV": "594.0049", "time": "2016-05-01 00:05:52" }, { "AM23SIG0206.AV": "594.021", "time": "2016-05-01 00:05:55" }, { "AM23SIG0206.AV": "594.0372", "time": "2016-05-01 00:05:58" }, { "AM23SIG0206.AV": "594.021", "time": "2016-05-01 00:06:01" }, { "AM23SIG0206.AV": "594.0695", "time": "2016-05-01 00:06:04" }, { "AM23SIG0206.AV": "594.0856", "time": "2016-05-01 00:06:07" }, { "AM23SIG0206.AV": "594.0857", "time": "2016-05-01 00:06:10" }, { "AM23SIG0206.AV": "594.0857", "time": "2016-05-01 00:06:13" }, { "AM23SIG0206.AV": "594.1476", "time": "2016-05-01 00:06:16" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:19" }, { "AM23SIG0206.AV": "594.1154", "time": "2016-05-01 00:06:22" }, { "AM23SIG0206.AV": "594.1179", "time": "2016-05-01 00:06:25" }, { "AM23SIG0206.AV": "594.1179", "time": "2016-05-01 00:06:28" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:31" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:34" }, { "AM23SIG0206.AV": "594.0507", "time": "2016-05-01 00:06:37" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:40" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:43" }, { "AM23SIG0206.AV": "594.0507", "time": "2016-05-01 00:06:46" }, { "AM23SIG0206.AV": "594.0345", "time": "2016-05-01 00:06:49" }, { "AM23SIG0206.AV": "594.0022", "time": "2016-05-01 00:06:52" }, { "AM23SIG0206.AV": "593.9861", "time": "2016-05-01 00:06:55" }, { "AM23SIG0206.AV": "593.9699", "time": "2016-05-01 00:06:58" }, { "AM23SIG0206.AV": "593.9363", "time": "2016-05-01 00:07:01" }, { "AM23SIG0206.AV": "593.9039", "time": "2016-05-01 00:07:04" }, { "AM23SIG0206.AV": "593.8568", "time": "2016-05-01 00:07:07" }, { "AM23SIG0206.AV": "593.8555", "time": "2016-05-01 00:07:10" }, { "AM23SIG0206.AV": "593.8568", "time": "2016-05-01 00:07:13" }, { "AM23SIG0206.AV": "593.8232", "time": "2016-05-01 00:07:16" }, { "AM23SIG0206.AV": "593.776", "time": "2016-05-01 00:07:19" }, { "AM23SIG0206.AV": "593.7747", "time": "2016-05-01 00:07:22" }, { "AM23SIG0206.AV": "593.7263", "time": "2016-05-01 00:07:25" }, { "AM23SIG0206.AV": "593.7424", "time": "2016-05-01 00:07:28" }, { "AM23SIG0206.AV": "593.6778", "time": "2016-05-01 00:07:31" }, { "AM23SIG0206.AV": "593.6616", "time": "2016-05-01 00:07:34" }, { "AM23SIG0206.AV": "593.6589", "time": "2016-05-01 00:07:37" }, { "AM23SIG0206.AV": "593.6293", "time": "2016-05-01 00:07:40" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:07:43" }, { "AM23SIG0206.AV": "593.6267", "time": "2016-05-01 00:07:46" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:07:49" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:07:52" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:07:55" }, { "AM23SIG0206.AV": "593.5782", "time": "2016-05-01 00:07:58" }, { "AM23SIG0206.AV": "593.5647", "time": "2016-05-01 00:08:01" }, { "AM23SIG0206.AV": "593.562", "time": "2016-05-01 00:08:04" }, { "AM23SIG0206.AV": "593.5782", "time": "2016-05-01 00:08:07" }, { "AM23SIG0206.AV": "593.5298", "time": "2016-05-01 00:08:10" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:08:13" }, { "AM23SIG0206.AV": "593.5621", "time": "2016-05-01 00:08:16" }, { "AM23SIG0206.AV": "593.5621", "time": "2016-05-01 00:08:19" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:08:22" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:08:25" }, { "AM23SIG0206.AV": "593.5917", "time": "2016-05-01 00:08:28" }, { "AM23SIG0206.AV": "593.659", "time": "2016-05-01 00:08:31" }, { "AM23SIG0206.AV": "593.6887", "time": "2016-05-01 00:08:34" }, { "AM23SIG0206.AV": "593.6564", "time": "2016-05-01 00:08:37" }, { "AM23SIG0206.AV": "593.6402", "time": "2016-05-01 00:08:40" }, { "AM23SIG0206.AV": "593.6752", "time": "2016-05-01 00:08:43" }, { "AM23SIG0206.AV": "593.6725", "time": "2016-05-01 00:08:46" }, { "AM23SIG0206.AV": "593.6725", "time": "2016-05-01 00:08:49" }, { "AM23SIG0206.AV": "593.6725", "time": "2016-05-01 00:08:52" }, { "AM23SIG0206.AV": "593.7022", "time": "2016-05-01 00:08:55" }, { "AM23SIG0206.AV": "593.6699", "time": "2016-05-01 00:08:58" }, { "AM23SIG0206.AV": "593.6402", "time": "2016-05-01 00:09:01" }, { "AM23SIG0206.AV": "593.6699", "time": "2016-05-01 00:09:04" }, { "AM23SIG0206.AV": "593.6564", "time": "2016-05-01 00:09:07" }, { "AM23SIG0206.AV": "593.6537", "time": "2016-05-01 00:09:10" }, { "AM23SIG0206.AV": "593.5917", "time": "2016-05-01 00:09:13" }, { "AM23SIG0206.AV": "593.5568", "time": "2016-05-01 00:09:16" }, { "AM23SIG0206.AV": "593.573", "time": "2016-05-01 00:09:19" }, { "AM23SIG0206.AV": "593.5083", "time": "2016-05-01 00:09:22" }, { "AM23SIG0206.AV": "593.4922", "time": "2016-05-01 00:09:25" }, { "AM23SIG0206.AV": "593.4786", "time": "2016-05-01 00:09:28" }, { "AM23SIG0206.AV": "593.4463", "time": "2016-05-01 00:09:31" }, { "AM23SIG0206.AV": "593.4114", "time": "2016-05-01 00:09:34" }, { "AM23SIG0206.AV": "593.3953", "time": "2016-05-01 00:09:37" }, { "AM23SIG0206.AV": "593.3791", "time": "2016-05-01 00:09:40" }, { "AM23SIG0206.AV": "593.3306", "time": "2016-05-01 00:09:43" }, { "AM23SIG0206.AV": "593.3009", "time": "2016-05-01 00:09:46" }, { "AM23SIG0206.AV": "593.2983", "time": "2016-05-01 00:09:49" }, { "AM23SIG0206.AV": "593.266", "time": "2016-05-01 00:09:52" }, { "AM23SIG0206.AV": "593.2499", "time": "2016-05-01 00:09:55" }, { "AM23SIG0206.AV": "593.3145", "time": "2016-05-01 00:09:58" }, { "AM23SIG0206.AV": "593.2821", "time": "2016-05-01 00:10:01" }, { "AM23SIG0206.AV": "593.266", "time": "2016-05-01 00:10:04" }, { "AM23SIG0206.AV": "593.2485", "time": "2016-05-01 00:10:07" }, { "AM23SIG0206.AV": "593.2809", "time": "2016-05-01 00:10:10" }, { "AM23SIG0206.AV": "593.2485", "time": "2016-05-01 00:10:13" }, { "AM23SIG0206.AV": "593.2809", "time": "2016-05-01 00:10:16" }, { "AM23SIG0206.AV": "593.2809", "time": "2016-05-01 00:10:19" }, { "AM23SIG0206.AV": "593.2809", "time": "2016-05-01 00:10:22" }, { "AM23SIG0206.AV": "593.297", "time": "2016-05-01 00:10:25" }, { "AM23SIG0206.AV": "593.2646", "time": "2016-05-01 00:10:28" }, { "AM23SIG0206.AV": "593.297", "time": "2016-05-01 00:10:31" }, { "AM23SIG0206.AV": "593.297", "time": "2016-05-01 00:10:34" }, { "AM23SIG0206.AV": "593.3293", "time": "2016-05-01 00:10:37" }, { "AM23SIG0206.AV": "593.3131", "time": "2016-05-01 00:10:40" }, { "AM23SIG0206.AV": "593.3293", "time": "2016-05-01 00:10:43" }, { "AM23SIG0206.AV": "593.3293", "time": "2016-05-01 00:10:46" } ]这个是.json文件(python的大数据模型预测产生的数据我拿来用一哈)
总结
以上所述是小编给大家介绍的HTML5+JS+JQuery+ECharts实现异步加载问题,希望对大家有所帮助,如果大家有任何问题欢迎给我留言,小编会及时回复大家的!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 5.2版本恰斯卡专属武器介绍,版本新信息
- 瓶子解说 王者荣耀女娲视频教学
- 新版回忆礼册系统详解!魔盒获取速度加快
- 黄翊.1989-冬季等到夏季【新艺宝】【WAV+CUE】
- 群星.1998-百代情歌竞技长女子组【EMI百代】【WAV+CUE】
- 巫奇.1995-犯错【滚石】【WAV+CUE】
- 《COD21》本周即将上线丧尸模式与“核弹小镇”地图
- 《龙腾世纪:影障守护者》IGN 9分:重振系列荣光!
- 《怪物猎人:荒野》玩家评分4.9 支持画面或性能模式
- 七日世界影日洞穴据点神秘宝箱在哪 影日洞穴据点神秘宝箱收集攻略
- 光遇姆明季先祖在哪里 姆明季先祖位置一览
- 原神5.4卡池爆料角色 5.4卡池预测
- 炉石传说亡灵流最终阵容推荐 酒馆战棋亡灵流最终阵容图文一览
- 炉石传说海盗流最终阵容推荐 酒馆战棋海盗流最终阵容图文一览
- 炉石传说元素流最终阵容推荐 酒馆战棋元素流最终阵容图文一览