上次写了基础的图表展示,这次简单介绍一下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();
}
}