ajax异步数据加载

ajax异步数据加载技术

在热门的图表展示工具中，echarts无疑是许多中小型企业的首选。在官网中为我们封装了js，只要会引用就会得到完美的展示效果，实现简单，各类图形都有，相应的模板，还有丰富的API及文档说明，非常详细。
今天就分享一下echarts的异步数据加载技术吧，在我学习的过程中，所用的数据都是自己随手定义的简单数据，所以我就在思考该怎么把自己想可视化展示得数据放上去用呢。于是就网上搜资料进行学习，下面为大家分享一下我的理解吧。

一般我们在自己学习时，都像下图所示随便添加数据进行实验

但是我们该如何从外部进行数据加载导入呢？
这里就用到了ajax异步数据加载。先将后台的数据转为json格式，页面再通过ajax来进行解析。于是就多了一个环节，叫做异步数据加载。

要用ajax,导入jquery-3.5.1.min.js插件是最常见的方法之一。

方案一：

在实例对象之前就将数据加载进取，如果顺序换一下（先实例化对象再加载），数据就无法被使用。

首先这是我们用到的本地json文件

下面是代码（解释都在注释中）：

效果：

第二种方案：

我们先设置好一个样式，把我们需要设置数据的地方空出来，有数据了以后再填入数据，并将在series里面的data属性设置为空数组。

再将对象实例化之后，把数据加载进去就好了。加载的时候只需要填入series里的data属性就好，因为其他的东西都已经有了。

代码如下：

运行效果自然是和上面一种方案是一样的了：

当然，在领悟ajax异步数据加载技术之前要掌握好echarts基本知识，这样才能更快、更好地的去理解和掌握。文章若有解释不到位或者错误的地方欢迎大家在评论区评论留言哦！

要是如果有小伙伴需要jquery-3.5.1.min.js插件的话，就私聊小编哦！