Echarts对于展示结果，有一个很好的表达方式。
1.首先，在官网将js下载到本地，引用到页面上
这里是在开发环境，所以下载最后源代码这个
managerResult.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="">
<meta name="keywords" content="">
<title>Echarts图表统计结果</title>
<link rel="stylesheet" type="text/css" href="../quest/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<input type="hidden" name='allNum' value="${allNum}"/>
<input type="hidden" name='listNum' value="${listNum}"/>
<textarea style="display: none;" name="condition">${condition}</textarea>
<textarea style="display: none;" name="questOptions">${questOptions}</textarea>
<div id="mainPie" style="width: 800px;height:400px;"></div>
<div id="mainBar" style="width: 1000px;height:600px;"></div>
</div>
</div>
</body>
<script type="text/javascript" src="/resources/bootstrap-3.3.5-dist/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/resources/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src= "../quest/js/echarts.js"></script>
<script type="text/javascript" src= "../quest/js/managerResult.js"></script>
</html>
页面中分别为 柱状图和 饼状图 放置了两个div作为容器
2.managerResult.js
步骤就3步
1》var myChartBar = echarts.init(document.getElementById('mainBar')); 获取容器
2》配置option
3》myChartBar.setOption(optionBar); 初始化图表进行展示
$(document).ready(function(){
//获取饼状图容器 并 初始化echarts实例
var myChartPie = echarts.init(document.getElementById('mainPie'));
//饼状图 配置
var optionPie = {
title : {//标题
text: '问卷统计调查结果',
subtext: '多条件组合',
x:'center'
},
tooltip : {//光标在上显示信息
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)",
backgroundColor : '#986c11',
},
toolbox: {//工具按钮
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {//图例
orient: 'vertical',
left: 'left' ,
data: ['统计项','未统计项']
},
series : [//系列列表 图表类型+数据源
{
name: '问卷统计',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'统计项'},
{value:310, name:'未统计项'}
],
itemStyle: {
emphasis: {
shadowBlur: 100,
shadowOffsetX: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: true,
position: 'outside',
formatter :'{a}\n{b} : {c} ({d}%)',
textStyle:{
fontSize : 2,
fontStyle : 'normal'
}
},
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChartPie.setOption(optionPie);
//获取饼状图容器 并 初始化echarts实例
var myChartBar = echarts.init(document.getElementById('mainBar'));
//柱状图配置
var optionBar = {
title:{
show : true,
text : '多条件分量统计',
x:'center'
},
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid: {//网格配置
show : true,
left: '3%',
right: '15%',
bottom: '3%',
shadowBlur : 10,
containLabel: true
},
xAxis : [
{
name : '筛选条件类目',
type : 'category',
data : [
{
value: '周一',
textStyle: {
fontSize: 4,
baseline : 'middle',
}
}, 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
},
axisLabel :{
rotate : 50
}
}
],
yAxis : [
{
name : '统计人数',
type : 'value'
}
],
series : [
{
name:'问卷人数',
type:'bar',
barWidth: '30%',
label: {
normal: {
show: true,
position: 'top',
formatter :'{b} : {c}',
textStyle:{
fontSize : 2,
fontStyle : 'normal'
}
}
},
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
myChartBar.setOption(optionBar);
});
**********************************************************************如果想动态从后台获取数据的话，往下看***************************************************************
***********************************************************************************************************************************************************************************
先看看js中，ajax从后台获取的数据，赋值给图表的data即可
4》带有ajax的Echarts 实例化过程
var condition = $("textarea[name='condition']").text();
var questOptions = $("textarea[name='questOptions']").text();
//全局变量，便于给图表赋值
var XData;//X轴类目
var VData;//实际数据
//ajax从后台获取数据给全局变量
$.ajax({url:"/questionnaire/barDate.jhtml",
type:"get",
async:false,
traditional:false,
data:{questOptions:questOptions,condition:condition},
success:function(data){
//后台拼接组装好的json数据传给前台这里，直接转化一下根据键名获取键值，赋值给全局变量
XData = JSON.parse(data).X;
VData = JSON.parse(data).V;
}
});
//获取饼状图容器 并 初始化echarts实例
var myChartBar = echarts.init(document.getElementById('mainBar'));
//柱状图配置
var optionBar = {
title:{
show : true,
text : '多条件分量统计',
x:'center'
},
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid: {//网格配置
show : true,
left: '3%',
right: '15%',
bottom: '15%',
shadowBlur : 10,
containLabel: true
},
xAxis : [
{
name : '筛选条件类目',
type : 'category',
data : XData,
axisTick: {
alignWithLabel: true
},
axisLabel :{
rotate : 50
}
}
],
yAxis : [
{
name : '统计人数',
type : 'value'
}
],
series : [
{
name:'问卷人数',
type:'bar',
barWidth: '30%',
label: {
normal: {
show: true,
position: 'top',
formatter :'{b} : {c}',
textStyle:{
fontSize : 2,
fontStyle : 'normal'
}
}
},
data:VData
}
]
};
myChartBar.setOption(optionBar);
5》后台部分代码【只看json数据 组装部分】
@RequestMapping(value= "/barDate" ,produces = "text/html;charset=UTF-8")
@ResponseBody
public String barDate(HttpServletRequest request,String condition,String questOptions) throws UnsupportedEncodingException{ //勾选项
questOptions = questOptions.replaceAll("category=", "");
String [] questArr = questOptions.equals("")? new String[0]:questOptions.split(";");
//填空题
Map<String,Object> mapList = doMap(condition);
System.out.println("勾选项："+questArr); JSONObject jsonObject = new JSONObject();
JSONArray array1 = new JSONArray();
JSONArray array2 = new JSONArray();
Map<String,Object> newList = new HashMap<String, Object>();
//填空题
mapList.forEach((key,value)->{
boolean flag = false;
if(value != null){
if(key.contains("Arr")){
String newKey = key.substring(0,key.lastIndexOf("Arr"));
if(key.contains("age")){
Date[] date = (Date[]) value;
if(date[0] != null && date[1] != null){
array1.add("年龄段:"+date[0]+"-"+date[1]);
flag = true;
}else if(date[0] != null || date[1] != null){
array1.add("年龄:"+date[0] == null ? date[1] : date[0]);
flag = true;
}
}else{
Double [] v = (Double[]) value;
if(v[0] != null && v[1] != null){
array1.add(newKey+"段:"+v[0]+"-"+v[1]);
flag = true;
}else if(v[0] != null || v[1] != null){
array1.add(newKey+":"+v[0] == null ? v[1] : v[0]);
flag = true;
}
}
}
if(key.contains("userName")){
array1.add("姓名:"+value);
flag = true;
}
if(key.contains("sex")){
array1.add("性别:"+value);
flag = true;
}
if(key.contains("memopause")){
array1.add("是否绝经:"+value);
flag = true;
} if(flag){
newList.put(key, value);
List<Questionnaire> list = questionnaireService.findQuests(newList, new String[0]);
newList.clear();
array2.add(list.size());
flag = false;
} }
});
//获取资源文件中键值对
ResourceBundle bundle = ResourceBundle.getBundle("quest"); if(questArr.length >0){
for (String string : questArr) {
array1.add(bundle.getString(string));
List<Questionnaire> list = questionnaireService.findQuests(newList, string);
array2.add(list.size());
}
}
jsonObject.put("X", array1);//键名为 X
jsonObject.put("V", array2);//键名为 V return jsonObject.toString();
}
JSONArray array1 = new JSONArray();用来存储X轴类目名
JSONArray array2 = new JSONArray();用来存储实际一一对应的数据
6》看看图示的结果
心得：
只要根据官方提供的dome和API，就能根据你想要在Echarst上展示什么东西，就认真的在API里面找，一定可以查找到！！认真观看API！！！