echarts 图表 展示 练习二 (ajax 后台加载数据)
来源:互联网 发布:安卓登录注册界面源码 编辑:程序博客网 时间:2024/05/29 19:08
上次写了基础的图表展示,这次简单介绍一下ajax后台取的数据并展示的练习,一上次为基础。
jsp页面配置和之前一样就有一点不同,讲解一下。
第一步:(不变)
<!-- 引入echarts.js 框架文件 -->
<script type="text/javascript"
src="${path}/js/echarts/build/dist/echarts.js"></script>
<script type="text/javascript" src="${path}/js/jquery-1.11.1.min.js"></script>
第二步:(不变)
<!-- 为模块加载器配置echarts和所需图表的路径 -->
<script type="text/javascript">
require.config({
paths : {
echarts : '${path}/js/echarts/build/dist'
}
});
</script>
第三步:(有变化)
去掉定义方法获取dom的部分 就是这个方法 function(ec) 去掉
<!-- 使用 -->
<script type="text/javascript">
require([
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
]);
</script>
第四步:ajax调用
<script type="text/javascript">
//jsp初始化调用方法
$(document).ready(function(){
//获取展示 图表div 的ID(main)
var myChart = require('echarts').init(document.getElementById('main'));
myChart.showLoading({
text: '正在努力的读取数据中...', //loading话术
});
//ajax get data ing...
var url="${path}/echarts/bar.do";
$.ajax({
type:"post",
url:url,
dataType: "json",
success:function(data){
myChart.hideLoading();
// 图表使用-------------------
var option=data;
myChart.setOption(option);
},
error:function(error){
alert("错误:"+error);
}
});
});
</script>
第五步:springmvc 下 controller 的代码我也贴出来吧
@RequestMapping(value="/bar.do")
public void ajaxtest(HttpServletRequest request,HttpServletResponse response ){
System.out.println("init bar ajaxtest");
PrintWriter out=null;
try {
out=response.getWriter();
String data="{\"tooltip\":{\"show\" : \"true\"},\"legend\":{\"data\":[\"销量\"]},"
+ "\"xAxis\":[{\"type\":\"category\",\"data\":[\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"]}],"
+ "\"yAxis\":[{\"type\" : \"value\"}],\"series\":[{\"name\":\"销量\",\"type\" : \"bar\",\"data\":[ 7, 23, 123, 3, 44, 69 ]}]}";
System.out.println(data);
//数据输出到前端
out.println(data);
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
- echarts 图表 展示 练习二 (ajax 后台加载数据)
- echarts 图表展示 练习一 (基础页面加载数据)
- echarts图表动态获取后台数据详解(二)
- Echarts 动态从后台获取数据进行图表的展示
- 使用ajax加载echarts图表
- echarts图表动态获取后台数据详解(三)--ajax跨域请求
- ECharts通过Ajax动态加载数据到图表
- asp.net使用echarts展示图表数据
- echarts图表动态获取后台数据详解(一)
- ECharts动态图表展示
- Echarts图表通过Ajax动态更新数据
- echarts图表ajax获取数据填充
- 通过百度echarts实现数据图表展示功能
- Echarts 动态获取数据进行图表的展示
- 基于echarts实现图表展示
- 基于echarts实现图表展示
- 前端 js图表展示 Echarts
- ajax+echarts图表
- ThinkPHP的RBAC权限控制
- apk反编译详解
- 翻转单链表
- Implement Stack using Queues
- 使用Thread+Handler实现非UI线程更新UI界面
- echarts 图表 展示 练习二 (ajax 后台加载数据)
- JDK各个版本的新特性jdk1.5-jdk8
- 配置环境变量 解决tomcat启动闪退现象
- sql联合查询inner join
- css样式学习
- 如何在Android开发中使用自定义的字体库
- Num 22 : NYOJ : 0055 懒省事的小明 [ 优先队列 ]
- jquery全选
- 【Launcher 教程】从 URL Schemes 入门到用 Launcher 调用各效率软件