前言：
现在你们对“jqueryhashmap”可能比较关心，姐妹们都需要知道一些“jqueryhashmap”的相关资讯。那么小编在网摘上汇集了一些有关“jqueryhashmap””的相关内容，希望同学们能喜欢，大家一起来学习一下吧！echart用于统计使用，看着很美观且数据描述的很清晰。所以昨天第一次使用，出现了很多问题。
1.多条折线图 折线：line
直接贴代码：后台
public Map<String,Object> pointUselessAnalyze(Integer orgId){
List<Record> records = null;
List<String> legend = new ArrayList<>();//放置折线图每条信息的颜色
List<String> echarts1 = new ArrayList<>();//折线1
List<String> echarts2 = new ArrayList<>();//折线2
List<String> echarts3 = new ArrayList<>();//折线3
List<EchartsEntity> echarts = new ArrayList<>();//EchartsEntity对象中 三个属性：String,String,List -> 折线注释，折线type，数据
String[] xAxis = null;//x轴
if (orgId != null && orgId > 0) {
String sql = "xxx";//mysql语句
records = Db.use().find(sql);//返回结果
}
if (records != null && records.size() > 0) {
xAxis = new String[records.size()];//x轴的长度
for(int i = 0; i < records.size();i++){//循环mysql结果
xAxis[i] = records.get(i).getStr("time");//我是以时间作为x轴
echarts1.add(records.get(i).getStr("a"));//折线1
echarts2.add(records.get(i).getStr("b"));//折线2
echarts3.add(records.get(i).getStr("c"));//折线3
}
}
EchartsEntity entity1 = new EchartsEntity("a","line",echarts1);
EchartsEntity entity2 = new EchartsEntity("b","line",echarts2);
EchartsEntity entity3 = new EchartsEntity("c","line",echarts3);
echarts.add(entity1);
echarts.add(entity2);
echarts.add(entity3);
legend.add("a");
legend.add("b");
legend.add("c");
Map<String,Object> ret=new HashMap<>();
ret.put("xAxis", xAxis);//x轴信息
ret.put("series", echarts);//折线内容
ret.put("legend", legend);//折线颜色和折线颜色所代表的的信息
return ret;//返回结果Map<String,Object>
}
EchartsEntity entity1 = new EchartsEntity("a","line",echarts1);
EchartsEntity entity2 = new EchartsEntity("b","line",echarts2);
EchartsEntity entity3 = new EchartsEntity("c","line",echarts3);
echarts.add(entity1);
echarts.add(entity2);
echarts.add(entity3);
legend.add("a");
legend.add("b");
legend.add("c");
Map<String,Object> ret=new HashMap<>();
ret.put("xAxis", xAxis);//x轴信息
ret.put("series", echarts);//折线内容
ret.put("legend", legend);//折线颜色和折线颜色所代表的的信息
return ret;//返回结果Map<String,Object>
}
前台：
<div id='line' style="height: 400px; top:10px"></div>
<script type="text/javascript">
var myLine = echarts.init(document.getElementById('line'));
var lineOption = {
title : {
text : 'aa',//标题
subtext : ''//副标题
},
tooltip : {
trigger : 'axis' //item 点在哪条线上显示哪条线上的数据，axis点在哪个坐标点上显示对于点上所有数据
},
legend : {
data : []
},
toolbox : {
show : true,
orient : 'vertical',
x : 'right',
y : 'center',
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true,
name : '折线图'//保存的图片名次
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
boundaryGap : [ 0, 0.01 ],
name : '时间',
data : [ '' ],
axisLabel : {
interval : 0,//横轴信息全部显示
rotate : -30,//-30度角倾斜显示
}
} ],
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value} '
}
} ],
grid : {
x : 30,//设置该图形与对应div的左边距
y : 30,//设置该图形与对应div的上边距
x2 : 50,//设置该图形与对应div的右边距
y2 : 50
//设置该图形与对应div的下边距
},
series : []
};
myLine.setOption(lineOption);
var ajaxLine = function() {
$.ajax({
url : 'url地址',
success : function(responseText) {
//请求成功时处理
lineOption.legend.data = responseText.legend;
lineOption.xAxis[0].data = responseText.xAxis;//x轴
var serieslist = responseText.series;
for (var i = 0; i < serieslist.length; i++) {//循环放入数据
lineOption.series[i] = serieslist[i];
}
myLine.setOption(lineOption, true);
},
complete : function() {
//请求完成的处理
},
error : function() {
//请求出错处理
alert("加载失败");
}
})
}
加上效果图：多条折线
2.饼状图 饼图：pie
后台：
public Map<String,Object> pointOperatorCountAnalyze(Integer orgId){
List<Record> records = null;
String legend[] = {"a","b","c"};
String time = "";
List<Map<String, String>> listMap = new ArrayList<>();
if (orgId != null && orgId > 0) {
String sql = "xxx";
records = Db.use().find(sql);
}
if (records != null) {
for(int i = 0 ;i<records.size();i++){
time = records.get(i).getStr("time");
Map<String, String> map1 = new HashMap<>();
map1.put("name","a");
map1.put("value", records.get(i).getStr("a"));
Map<String, String> map2 = new HashMap<>();
map2.put("name","b");
map2.put("value", records.get(i).getStr("b"));
Map<String, String> map3 = new HashMap<>();
map3.put("name","c");
map3.put("value", records.get(i).getStr("c"));
listMap.add(map1);
listMap.add(map2);
listMap.add(map3);
}
}
Map<String,Object> ret=new HashMap<>();
ret.put("series", listMap);
ret.put("legend", legend);
ret.put("time", time);//我用于作为副标题
return ret;
}
前台：
var myPie = echarts.init(document.getElementById('pie'));
var optionPie = {
title : {
text : 'pie',
x : 'center',
subtext : ''
},
subtextStyle: {
color: 'black' , // 副标题文字颜色
fontSize: 20
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data : []
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'pie', 'funnel' ],
option : {
funnel : {
x : '25%',
width : '50%',
funnelAlign : 'left',
max : 1548
}
}
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
series : [ {
name : '管理员角色',
type : 'pie',
radius : '55%',
center : [ '60%', '60%' ],
data : []
} ]
};
myPie.setOption(optionPie);
var ajaxPie = function() {
$.ajax({
url : 'url地址',
success : function(responseText) {
optionPie.title.subtext = responseText.time;
optionPie.legend.data = responseText.legend;
var seriesData = responseText.series;
var datas = [];//循环内容list，我返回的结果为list<Map>
for(var i = 0 ;i<seriesData.length;i++){//饼状图内容需要的格式为 {name:a,value:1}
datas.push({
name : seriesData[i].name,
value : seriesData[i].value
});
}
optionPie.series[0].data = datas;
myPie.setOption(optionPie, true);
},
complete : function() {
//请求完成的处理
},
error : function() {
//请求出错处理
alert("加载失败");
}
})
}
饼状图：
3.柱状图 柱状图：bar（和折线图类似）
后台：
public Map<String,Object> pointOperatorLoginAnalyze(Integer orgId){
List<Record> records = null;
List<String> legend = new ArrayList<>();
List<String> echarts1 = new ArrayList<>();
List<EchartsEntity> echarts = new ArrayList<>();
String[] xAxis = null;
if (orgId != null && orgId > 0) {
String sql = "xx";
records = Db.use().find(sql);
}
if (records != null && records.size() > 0) {
xAxis = new String[records.size()];
for(int i = 0; i < records.size();i++){
xAxis[i] = records.get(i).getStr("time");
echarts1.add(records.get(i).getStr("loginCount"));
}
}
EchartsEntity entity1 = new EchartsEntity("a","bar",echarts1);
echarts.add(entity1);
legend.add("a");
Map<String,Object> ret=new HashMap<>();
ret.put("xAxis", xAxis);
ret.put("series", echarts);
ret.put("legend", legend);
return ret;
}
EchartsEntity entity1 = new EchartsEntity("a","bar",echarts1);
echarts.add(entity1);
legend.add("a");
Map<String,Object> ret=new HashMap<>();
ret.put("xAxis", xAxis);
ret.put("series", echarts);
ret.put("legend", legend);
return ret;
}
前台：
var myBar = echarts.init(document.getElementById('bar'));
var optionBar = {
title : {
text : 'a',
subtext : ''
},
tooltip : {
trigger : 'axis' //item 点在哪条线上显示哪条线上的数据，axis点在哪个坐标点上显示对于点上所有数据
},
legend : {
data : []
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [ {
type : 'category',
name : '时间',
data : [ '' ],
axisLabel : {
interval : 0,//横轴信息全部显示
rotate : -30,//-30度角倾斜显示
}
} ],
yAxis : [{
type : 'value'
}],
series : []
};
myBar.setOption(optionBar);
var ajaxBar = function() {
$.ajax({
url : 'xx',
success : function(responseText) {
console.log(responseText);
//请求成功时处理
optionBar.legend.data = responseText.legend;
optionBar.xAxis[0].data = responseText.xAxis;
var serieslist = responseText.series;
for (var i = 0; i < serieslist.length; i++) {
optionBar.series[i] = serieslist[i];
}
myBar.setOption(optionBar, true);
},
complete : function() {
//请求完成的处理
},
error : function() {
//请求出错处理
alert("加载失败");
}
})
}
bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [ {
type : 'category',
name : '时间',
data : [ '' ],
axisLabel : {
interval : 0,//横轴信息全部显示
rotate : -30,//-30度角倾斜显示
}
} ],
yAxis : [{
type : 'value'
}],
series : []
};
myBar.setOption(optionBar);
var ajaxBar = function() {
$.ajax({
url : 'xx',
success : function(responseText) {
console.log(responseText);
//请求成功时处理
optionBar.legend.data = responseText.legend;
optionBar.xAxis[0].data = responseText.xAxis;
var serieslist = responseText.series;
for (var i = 0; i < serieslist.length; i++) {
optionBar.series[i] = serieslist[i];
}
myBar.setOption(optionBar, true);
},
complete : function() {
//请求完成的处理
},
error : function() {
//请求出错处理
alert("加载失败");
}
})
}
柱状图：
因为我只有一个数据，所以柱状图显示有点夸张。
这几天又写了几组echart图，发现一个问题，就是填写数据；
在前端拼接数据，例如：
var xAxis = '数据1','数据2','数据3','数据4','数据5';
var option.xAxis = '['+xAxis+']';
这种是不能显示在图表上的；显示数据可能是这种结果 '数 据 1''数 据 2''数 据 3''数 据 4''数 据 5' 结果会自动空格
最好的解决方法就是在后台组装一个string[]传到前端赋值。
标签： #jqueryhashmap
