参考官网:http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2
要展示的图表像这样:
现在开始前后端代码展示。by the way,使用的开发框架为nutz,重点还是echarts数据。不要本末倒置。
1.从官网下载包
使用其中的dist文件夹和echarts.js,将dist文件夹和echarts.js放在工程的js目录下。
2.前端js代码echartsOneTest.jsp:
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>统计</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<%@ include file="/WEB-INF/jsp/tag.jsp" %>
<%@ include file="/WEB-INF/jsp/common_css.jsp" %>
<%@ include file="/WEB-INF/jsp/common_js.jsp" %>
<%@ include file="/WEB-INF/jsp/common_tool.jsp" %>
</head>
<body>
<div>
<button οnclick="getJson()">查询</button>
</div>
<div id="main" style="height:400px;"></div>
<%--echarts.js的路径可以随便放,只要这里能获取到就行了--%>
<script src="../../static/js/echarts.js"></script>
<script type="text/javascript">
var myChart;//定义一个全局的图表变量,供后面动态加载时使用
require.config({
paths: {
echarts: '../../static/js/dist' //将dist文件夹和echarts.js放在同一目录下
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
myChart = ec.init(document.getElementById('main'));
//下面的option可以为空{},ajax动态添加数据时会加上相应的属性
//var option = {};
var option = {
legend: {
data:['蒸发量','降水量']
},
xAxis : {
data : []
},
yAxis : {},
series : [
{
name:'蒸发量',
type:'bar',
data:[]
},
{
name:'降水量',
type:'bar',
data:[]
}
]
};
myChart.setOption(option);
}
);
function getJson() {
//获取数据时显示加载状态图
myChart.showLoading();
var months=[];//用来盛放X轴坐标值:月份
var evapCapacitys=[];//用来盛放Y坐标值:蒸发量
var precipitations=[];//用来盛放Y坐标值:降雨量
$.ajax({
type : "post",
async : true, //异步请求
url : "${ctx}/echarts/getJson",
data : {},
dataType : "json",
success : function(result) {
if (result.status) {
var list = result.list;
for(var i=0;i<list.length;i++){
months.push(list[i].month); //遍历月份并填入数组
}
for(var i=0;i<list.length;i++){
evapCapacitys.push(list[i].evapCapacity); //遍历蒸发量并填入数组
}
for(var i=0;i<list.length;i++){
precipitations.push(list[i].precipitation); //遍历降水量并填入数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
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: {
data: months
},
yAxis:{},//注意一定不能丢了这个,不然图表Y轴不显示
series: [{
// 根据名字对应到相应的系列,并且要注明type
name: '蒸发量',
type:'bar',
data: evapCapacitys
},{
// 根据名字对应到相应的系列,并且要注明type
name: '降水量',
type:'bar',
data: precipitations
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
}
</script>
</body>
</html>
EChartsModule.java
package com.kp.module;
import com.kp.entity.EchartsEntity;
import org.nutz.ioc.loader.annotation.IocBean;
import org.nutz.lang.util.NutMap;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;
import java.util.ArrayList;
import java.util.List;
/**
* Created by admin on 2017/12/22.
*/
@IocBean
@At("/echarts")
public class EChartsModule {
@At("/index")
@Ok("jsp:jsp.echartsOneTest")
public void index() {
}
@At("/getJson")
@Ok("json")
public NutMap getJson(){
NutMap nutMap = new NutMap();
List<EchartsEntity> list = new ArrayList<>();
list.add(new EchartsEntity("1月份",2.0f, 2.6f));
list.add(new EchartsEntity("2月份",4.9f, 5.9f));
list.add(new EchartsEntity("3月份",7.0f, 9.0f));
list.add(new EchartsEntity("4月份",23.2f, 26.4f));
nutMap.put("list", list);
nutMap.put("status", "ok");
return nutMap;
}
}
EchartsEntity.java
package com.kp.entity;
/**
* Created by admin on 2017/12/22.
*/
public class EchartsEntity {
private String month;
private Float evapCapacity;
private Float precipitation;
public EchartsEntity(String month, Float evapCapacity, Float precipitation) {
this.month = month;
this.evapCapacity = evapCapacity;
this.precipitation = precipitation;
}
public String getMonth() {
return month;
}
public void setMonth(String month) {
this.month = month;
}
public Float getEvapCapacity() {
return evapCapacity;
}
public void setEvapCapacity(Float evapCapacity) {
this.evapCapacity = evapCapacity;
}
public Float getPrecipitation() {
return precipitation;
}
public void setPrecipitation(Float precipitation) {
this.precipitation = precipitation;
}
}