ECharts初使用,从后台得到数据源
首先，这是国产的，百度出品，大家支持下国产软件！！！
github：https://github.com/ecomfe/echarts
官网：http://echarts.baidu.com/
我今天用echarts插件显示商品的预定情况，数据是用ajax从后台拿的，贴下代码记录下：
jsp代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>预定情况图表</title>
<script type="text/javascript" src="js/jquery.min.js"></script> //因为用到了ajax
<script src="echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'echarts-2.2.7/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
var goodsName=new Array();
var goodsReserveNum=new Array();
var goodsPrice=new Array();
$.ajax({
method:'GET',
async:true,
url:'ordersAction!Report', //这里我是action
dataType :'json',
success:function(data){
for(var i=0;i<data.rows.length;i++){
goodsName[i]=data.rows[i].g_name; //将数据从json中分离出来
goodsReserveNum[i]=data.rows[i].total;
goodsPrice[i]=data.rows[i].g_price;
}
}
});
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('charts'));
alert("数据加载中……");
var date=new Date();
var time=date.toLocaleDateString(); //拿到当前日期
var option = {
title : {
text: '商品预定情况统计:'+time,
subtext: '预定量'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:["预定数量",'价格']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : goodsName
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'预定数量',
type:'bar',
data:goodsReserveNum,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
/* itemStyle: { //设置是否在柱上显示具体数值
normal: {
label: {
show:true,
position:'top'
},
}
} */
} ,
{
name:'价格',
type:'bar',
data:goodsPrice,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
}
],
};
/* for(var i=0;i<goodsName.length;i++){
option.series.push({ //动态添加数据
type:'bar',
data:goodsNum
})
} */
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</head>
<body>
<div id="charts" style="height:400px;margin-top:100px"></div>
</body>
</html>
下面是效果图：
顺便贴下后台对应的action：
public void Report() throws IOException{
List<ReserveReport> report=null;
Map<String, String> map = null;
try {
report=ordersService.getReport();
} catch (Exception e) {
e.printStackTrace();
}
JSONObject json=new JSONObject();
json.accumulate("rows", report);
System.out.println(json.toString());
response.setContentType("application/json;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(json);
out.flush();
out.close();
}