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();

}

}