echarts 图表 展示 练习二 （ajax 后台加载数据）

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