您的位置：首页 > 产品设计 > UI/UE

第一次使用echart从后台获取数据动态显示到页面

2017-02-14 18:23 751 查看

第一次使用Echart绘制图表，看了两天，终于结合后台给整出来了。走过之后再看看，其实很简单的。不多说了，直接上图：

第一步：去echarts官方下载最新的js; 官方地址：
echarts.baidu.com

我下的是3.4.0版的：echarts.min.js

第二步：创建一个ReportDataBean，在该类中设置两个属性：List<String>categories 和 List<Integer> data，具体如下图

ReportDataBean:用来记录和存储需要传递到前台页面中显示的数据集合

public class ReportDataBean {
private List<String> categories;
private List<Integer> data;
public List<String> getCategories() {
return categories;
}
public void setCategories(List<String> categories) {
this.categories = categories;
}
public List<Integer> getData() {
return data;
}
public void setData(List<Integer> data) {
this.data = data;
}
}

第三步：创建EchartReportService ，TestDataService，和各自实现。EchartReportService是所以对外调用的主Service，而TestDataService是具体的业务Service

1.EchartReportService:模板接口，用来以后进行不同模板间进行扩展

public interface EchartReportService {
public JSONObject getDataJson();
}

2.TestDataService ：具体实现数据实现接口,用来实现获取具体业务相关的数据，继承了EchartReportService

public interface TestDataService extends EchartReportService {
}

3.EchartReportServiceImpl

@Service
public class EchartReportServiceImpl implements EchartReportService {
@Override
public JSONObject getDataJson() {
return null;
}
}

4.TestDataServiceImpl

@Service
public class TestDataServiceImpl extends EchartReportServiceImpl implements TestDataService {
/**
* 模拟获取数据库后的数据
* @return
*/
@Override
public JSONObject getDataJson() {
ReportDataBean bean = new ReportDataBean();
List<String> categories = Arrays.asList("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子");
List<Integer> data = Arrays.asList(5, 20, 36, 10, 10, 20);
bean.setCategories(categories);
bean.setData(data);
JSONObject jsonObj = (JSONObject) JSON.toJSON(bean);
return jsonObj;
}
}

第四步：testReport.jsp是具体显示统计图表的页面，里面有三个最重要的方法。这里只做最简单的实现

            callbackFn方法是处理从后台获取的数据然后前台解析的。

            initReport方法是初始化基本图标横轴和纵轴的方法。在这个方法里，只留有xAxis.data和series.data是动态从数据库获取后赋值的。

            createTestReport方法是将callbackFn和initReport方法合并的入口方法。这样为以后可以在同一类型的图表显示模板进行编辑和处理进行扩充

            testReport.jsp 代码如下:

<#assign base=request.contextPath />
<!DOCTYPE html>
<html>

<head>

<title>报表测试</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">

<link href="${base}/statics/css/bootstrap.min.css" rel="stylesheet">
<link href="${base}/statics/css/font-awesome.css?v=4.4.0"  rel="stylesheet">
<link href="${base}/statics/css/animate.css"  rel="stylesheet">
<link href="${base}/statics/css/style.css?v=4.1.0"  rel="stylesheet"><base target="_blank">
<!-- jqgrid-->
<link href="${base}/statics/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">

<style>
/* Additional style to fix warning dialog position */

#alertmod_table_list_2 {
top: 900px !important;
}
</style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox ">
<div class="ibox-title">
<h5>测试报表</h5>
</div>
<div class="ibox-content">
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</div>
</div>
</div>
</div>

<script src="${base}/statics/js/jquery.min.js?v=2.1.4"></script>
<script src="${base}/statics/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${base}/statics/js/plugins/layer/layer.min.js"></script>
<script src="${base}/statics/js/demo/layer-demo.js"></script>
<script src="${base}/statics/js/plugins/peity/jquery.peity.min.js" ></script>
<script src="${base}/statics/js/plugins/jqgrid/i18n/grid.locale-cn.js" ></script>
<script src="${base}/statics/js/plugins/jqgrid/jquery.jqGrid.min.js" ></script>
<script src="${base}/statics/js/content.js" ></script>
<script src="${base}/statics/js/jgrid/data.js"></script>
<script src="${base}/statics/js/echarts/echarts.min.js"></script>

<script type="text/javascript">
// 直接页面写的调用ajax的方法
function callbackFn(myChart,jsonURL){
$.ajax({
url:jsonURL,
dataType:"json",
success:function(jsonData){

myChart.setOption({
xAxis: {
data: jsonData.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: jsonData.data
}]
});
// 设置加载等待隐藏
myChart.hideLoading();
}
});
}
// 初始化echar报表的方法
function initReport(myChart){

// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
}

function createTestReport(showDivId,jsonURL){
var myChart = echarts.init(document.getElementById(showDivId));
// 初始化report对象
initReport(myChart);
myChart.showLoading({text: '正在努力的读取数据中...'  });
// 调用后台获取json数据
callbackFn(myChart,jsonURL);
}
</script>

<script type="text/javascript">
$(document).ready(function(){
var showDivId = 'main';
var jsonURL = "${base}/report/v1/getTestReportJson.do";
createTestReport(showDivId,jsonURL);
});
</script>

</body>

</html>

注意事项及说明：

由于此功能是集成到其他功能上的，所以只进行了涉及到的基本的代码编写和上传。功能扩展和细节还不完善，只是做个引子抛砖引玉用

执行结果：

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

标签： echarts UI Java统计图

相关文章推荐

新的分享

章节导航