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

首先先把官网上的demo拿过来，这时候的柱状图数据以及xy的数据都为空

样式如下

<!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 src="../js/echarts.min.js"></script><script src="../js/echarts.js"></script><!--引入js--><script src="../js/jquery-1.10.2.js"></script>
</head><body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></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: []}]});</script></body>
</html>

现在我们执行服务器的接口请求把，这张空的柱状图填满，代码如下

<!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 src="../js/echarts.min.js"></script><script src="../js/echarts.js"></script><!--引入js--><script src="../js/jquery-1.10.2.js"></script>
</head><body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></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: []}]});myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画var names=[];    //类别数组（实际用来盛放X轴坐标值）var nums=[];    //销量数组（实际用来盛放Y坐标值）
$.ajax({type : "post",async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "TestServlet",    //请求发送到TestServlet处
        data : {},dataType : "json",        //返回数据形式为json
        success : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {for(var i=0;i<result.length;i++){names.push(result[i].name);    //挨个取出类别并填入类别数组
                }for(var i=0;i<result.length;i++){nums.push(result[i].num);    //挨个取出销量并填入销量数组
                }myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {data: names},series: [{// 根据名字对应到相应的系列
                        name: '销量',data: nums}]});}},error : function(errorMsg) {//请求失败时执行该函数
            alert("图表请求数据失败!");myChart.hideLoading();}})</script></body>
</html>

转载于:https://www.cnblogs.com/xy-milu/p/9372987.html

echarts 通过ajax实现动态数据加载相关推荐

Echarts使用心得总结——异步数据加载
异步加载 Echarts的数据一般是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入.ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要使用 ...
echarts中饼图的异步数据加载绘制
ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行,但是从后台异步获取数据后,需要在前台 ...
openlayers如何使用（三）动态数据加载
如何在地图中动态添加点元素,并动态加载数据 ① 循环获取数据 mounted() {this.mapT();this.drowMap();this.clickOnMap();this.addOverl ...
jsTree ajax 获取json数据加载树
后台获取json格式数据. 直接上代码. 最后有一张官方ajax获取tree的说明. var ajaxTreeSample = function() {$("#tree_4").j ...
TreeView的图标个性化和动态数据加载
1.简述如图,需要在页面上实现一个这样的树状图,具体要求如下: 1.最顶层的行的收缩图标为绿色小三角,其余层存在子节点的行的收缩图标为一个朝右的尖括号和一个绿色小三角,无子节点的行无需图 ...
bootstrap table 动态列数据加载（一）
bootstrap table 动态列数据加载(一) 我想把所有的收费项目作为表头,不固定死收费项目,数据库中有啥就显示啥. 动态数据加载时,不能用bean的嵌套,源码中加载表头和数据是分开的,第几列 ...
flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
php ajax 加载列表,Ajax点击不断加载数据列表（图文教程）
这篇文章主要介绍了Ajax点击不断加载数据列表的相关资料,需要的朋友可以参考下 Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步Ja ...
动态页面html jquery ajax,JQuery / AJAX：使用动态内容加载外部DIV
我需要创建一个页面,该页面将使用Jquery和AJAX从外部页面加载div. 我遇到了一些很好的教程,但是它们都是基于静态内容的,我的链接和内容是由PHP生成的. 我基于我的代码的主要教程来自:htt ...

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

echarts 通过ajax实现动态数据加载相关推荐

最新文章

热门文章