前言
使用Echarts画图时，数据一般不是静态写死的，而是通过后端接口动态获取的，因此本文结合官网提供的demo来演示Echarts怎么获取动态数据
Echarts读取动态数据
ECharts 中实现异步数据的更新很简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。
step1:创建好相关的工程文件
工程文件目录如下：
-
js文件夹：
存放的是echarts和jquery的相关文件，有了这些文件我们才能使用echarts和jquery的功能：
-
data文件夹：
存放json格式的数据文件，该文件用来模拟我们从后端获取的数据，json文件的内容如下：
step2:ECharts绑定数据
ECharts 绑定数据的方式有两种：
（1）方法一：
直接异步读取数据的同时设置好图表参数和数据绑定
-
核心代码：
可以根据实际情况按照下方标注的地方进行修改：
-
结果：
-
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/echarts.min.js"></script> <script src="./js/jquery.js"></script> </head> <body> <div id="main" style="width: 400px;height:400px;border: 1px solid gray"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); $.get('data/data.json').done(function(data) { myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: {}, xAxis: { data: data.categories }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: data.values } ] }); }); </script> </body> </html>
（2）方法二：
先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据
-
核心代码：
可以根据实际情况按照下方标注的地方进行修改：
-
结果:
- 完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/echarts.min.js"></script> <script src="./js/jquery.js"></script> </head> <body> <div id="main" style="width: 400px;height:400px;border: 1px solid gray"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 显示标题，图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [] } ] }); // 异步加载数据 $.get('data/data.json').done(function(data) { // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, series: [ { // 根据名字对应到相应的系列 name: '销量', data: data.values } ] }); }); </script> </body> </html>
