你的位置:首页 > 软件开发 > Java > Echarts通过ajax实现动态数据加载

Echarts通过ajax实现动态数据加载

发布时间:2016-05-02 21:00:12
Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通过ajax发送请求;2.服务器端Servlet接收请求;3.生成json数据并返 ...

Echarts通过ajax实现动态数据加载

Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通过ajax发送请求;2.服务器端Servlet接收请求;3.生成json数据并返回给客户端;4.客户端接收数据后显示。

 

 

1.客户端通过ajax发送请求

先绘制一个最简单的Echarts图表:

(这里就直接贴上代码了,直接用的是官网教程里异步数据加载和更新里的代码)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-CN"><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>ECharts</title>    <!-- 引入 echarts.js -->  <script type="text/javascript" src='/images/loading.gif' data-original="echarts.min.js"></script>  <!-- 引入jquery.js -->  <script type="text/javascript" src='/images/loading.gif' data-original="jquery-1.12.3.js"></script></head><body>  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->  <div id="main" ></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: []       }]     });

原标题:Echarts通过ajax实现动态数据加载

关键词:ajax

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。