java + echart （多条折线图，饼状图，柱状图）

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[]传到前端赋值。