【JavaScript】Echarts+JQuery+AJAX 异步请求刷新图表
# 引入 Echarts、JQuery
本地、CDN 都行
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
# 初始化 Echarts 实例
官方教程是一个柱状图，这里我用以一个折线图演示，道理都一样。
# 先上代码
<!DOCTYPE html>
<html>
<head>
<title>Echarts+JQuery 异步请求刷新图表</title>
<meta charset="utf-8">
<!-- 第一步 引入echarts JQuery -->
<!-- 引入echarts -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
<!-- 引入JQuery -->
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
</head>
<body>
<!-- 初始化ECharts实例 -->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 异步刷新折线图实例',
x: 'center'
},
tooltip: {},
xAxis: {
data: [] //与折线的数据点数据对应的X轴数据
},
yAxis: {},
series: [] //折线的数据点数据
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 显示等待画面
myChart.showLoading();
</script>
</body>
</html>
# 效果
折线图中的数据，我们用 ajax 异步请求获取，因此初始化时，使用 myChart.showLoading(); 动画，让用户等待异步请求响应。
# 添加 AJAX 代码
在 myChart.showLoading(); 下一行， </script> 上一行的位置
// 2. 调用了ajaxRequest()方法
// 封装一个发送ajax请求、响应、加载数据到图表的方法函数
function ajaxRequest() {
//声明用于存放响应数据的数组
var series_data = [];
var xAxis_data = [];
//声明 用于请求时的请求参数 JSON格式
var args = {"name": "NipGeihou"};
// 3. 向服务器发送请求，获取JSON数据 这里的`money.json`是一个静态文件，实际使用中，应为一个服务器api地址
//GET请求来获得 JSON 数据 （url,请求参数args，请求成功时运行的函数）
$.getJSON("money.json", args, function (data) {
// 4.存在data时，遍历data中存放数据数组，这里第一个data是返回的json数据，第二个data是json数据里的key
if (data) {
for (var i = 0; i < data.data.length; i++) {
series_data.push(data.data[i].money);
xAxis_data.push(data.data[i].month);
}
//关闭等待动画
myChart.hideLoading();
//加载数据到图表
myChart.setOption({
xAxis: {
data: xAxis_data
},
series: [{
// 根据名字对应到相应的系列
name: '工资',
type:'line',
data: series_data
}]
});
}
});
}
// 1. 从这开始执行
$(function () {
//用于页面打开时的首次刷新
ajaxRequest();
//定时器 5秒后执行定时执行
setInterval(function () {
ajaxRequest();
}, 5 * 1000); //每5秒执行
});
用来演示的 money.json 内容
{
"data":[
{
"name":"NipGeihou",
"money":"8000",
"month":"2019-01"
},
{
"name":"NipGeihou",
"money":"9000",
"month":"2019-02"
},
{
"name":"NipGeihou",
"money":"10000",
"month":"2019-03"
},
{
"name":"NipGeihou",
"money":"11000",
"month":"2019-04"
}
]
}
# 总结
写的可能不好，因为我也是刚接触 AJAX，JQuery 也只是接触 AJAX 时用到，之前没有学过，因此说得可能不是很对，没学 AJAX 之前，找网上 echarts 异步刷新的教程，也是看不懂，如果你之前没有学过 AJAX 的话，可能你也会和我一样看得不是很懂，那么我建议你先学习一下 AJAX 的基本用法，这里我推荐一个《尚硅谷 Ajax 教程》 (opens new window)的视频教程，视频有点旧，但内容还是可以的。
但总的来讲，还是比较容易实现的， getJSON() 请求，获取到 JSON 数据，无需解析，直接使用 data.xxx 即可调用
上次更新: 2024/03/11, 22:37:05