您的位置：首页 > 编程语言 > Java开发

echarts动态加载数据，显示柱状图，饼图图表

2015-10-15 08:55 836 查看

第一次写博客，有点小激动。公司正在开发的web版固定资产管理软件，需要做报表，需要直观的显示一些领导感兴趣的数据。就想到百度的echarts啦，关于echarts的更多信息请移步echarts首页。

言归正传。第一步，在jsp页面，需要引入esl.js,
它是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理（必须要引入）。如我的项目“<script type="text/javascript" src="${rootPath}/capital_assets/common/echarts/esl.js" ></script>”。第二部，在项目中加入echarts包和zrender包，两者的包必须在同一目录下，如：

下面是我的JSP页面：

<script type="text/javascript" src="${rootPath}/capital_assets/common/echarts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${rootPath}/capital_assets/common/echarts/esl.js" ></script>
<script type="text/javascript">
//配置路径
require.config({
packages:[
{
name: 'zrender',
location: '../common/zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
},
{
name: 'echarts',
location: '../common/echarts2.2.7/src',
main: 'echarts'
}
]
});

// 按需加载(需要用什么图标就引入包，如柱状图：'echarts/chart/bar',)
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/pie'
],
function (ec) {
var chart1=document.getElementById('chart1');
var echart1 = ec.init(chart1);
var chart2  = document.getElementById('chart2');
var echart2 = ec.init(chart2);
var categories = [];
var values = [];
var orgs=[];
var orgVal=[];
$.ajaxSettings.async = false;
// 加载数据
$.getJSON("${request.pageContext.contextPath}/capital_assets/reporter/reporter_classfy.action", function (json) {
categories = json.categories;
values = json.values;
orgs=json.orgs;
orgVal=json.orgVal;
});
var option1={
backgroundColor:'rgba(12,121,123,0.1)',
title : {
text: '资产概览',
subtext: '饼图',
x:'center',
backgroundColor:'rgba(12,121,123,0.1)'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:categories,
},
toolbox: {
show : true,
feature : {
restore : {show: true},
}
},
calculable : true,
series : [
{
name:'详情',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data: (function(){
var res = [];
var len = values.length;
while (len--) {
res.push({
name: categories[len],
value: values[len]
});
}
return res;
})()
}
]
};
var option2 = {
title:{
text:'资产科室分布',
subtext:'柱状图',
x:'center'
},
grid:{
x:80,
y:80,
x2:80,
y2:80
},
tooltip: {
show: true
},
legend: {
orient :'vertical',
x : 'left',
data:['科室总资产'],
},
xAxis: [
{
type: 'category',
data: orgs
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
'name': '详情',
'type': 'bar',
'data': orgVal,
'itemStyle': {
'normal': {
color: function(params) {
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex];
},
label:{
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
}
}
]
};
echart1.setOption(option1);
echart2.setOption(option2);
}
);
</script>
</head>
<body>
<div id="chart1" style="height:500px;"></div><br/><hr>
<div id="chart2" style="height:500px;"></div>
</body>
</html>

通过上面的代码，我们可以看出，页面通过ajax请求action(servlet)接受返回的json格式数据，然后进行图表信息的构建。我的action中部分代码如下：

<span style="font-size:18px;">public String classfy() throws IOException{
HttpServletResponse response=getResponse();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
<span style="background-color: rgb(255, 255, 255);">
<span style="color:#FF0000;">Map<String, Object> json = new HashMap<String, Object>();
int i=reporterService.getTotalClassfy();
String[] classfies=reporterService.getZCFLName();
json.put("categories", classfies); </span></span>
try{
double[] values=reporterService.getCountByName();
json.put("values", values);
}catch(Exception e) {
log.info("Service.getCountByName()从配置文件读取sql语句出现异常");
e.printStackTrace();
return null;
}
<span style="color:#FF0000;">String[] orgs=reporterService.getOrgNames();
json.put("orgs",orgs);
double[] orgVal=reporterService.getCountByOrgName();
json.put("orgVal",orgVal);</span>

out.write(JSONObject.fromObject(json).toString());
return null;
}</span>

上边标红的为核心代码。到此，就可以完整显示啦。效果图：

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

标签： java web 报表 echarts 饼图

相关文章推荐

新的分享

章节导航