您的位置：首页 > 其它

ECharts通过Ajax动态加载数据到图表

2017-12-22 16:38 633 查看

参考官网：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 onclick="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>

3.后端java代码，
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;
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航