前几天写了图表,没有写之前感觉很难,写了之后理清逻辑觉得图表挺有意思的,所以记录一下,以便于在后面用到:
使用图表首先得借鉴Echarts官网中的示例,以及数据返回的格式
1.饼状图
jsp页面:在js文件中写入以下代码,主页面调用
function 方法名(){
$.ajax({
type : "POST",
url : "请求路径",
success : function(jsondata) {
if(jsondata==null){
alert("获取数据失败");
return;
}
var seriesData = [{"name":"名称1","value" : jsondata["后台接收到的数据1(two)"]}, {"name":"名称2","value" : jsondata["后台接收到的数据2(four)"]}];
var nameDate = ["名称1","名称2"];
//right:页面显示div的id
var pieChart = echarts.init(document.getElementById("right"));
var pieoption = {
title : {
text: '图表标题',
x:'left'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
color:['#FBDA55','#348DDF'],//指定颜色
legend: { //各种占比的显示(位置、图标、名称)
orient: 'vertical',
x: '78%',
y: '78%',
icon:'circle',
data: nameDate,
},
calculable : true,
series : [
{
name: '标题名称',
type: 'pie',
radius : '55%', //图表大小
center: ['50%', '50%'],//图表位置
label: {
normal: {
show: true,// true数据显示
textStyle : {
fontSize : 15 //文字的字体大小
},
formatter: '{b}: {c}({d}%)'
}
},
data: seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
pieChart.setOption(pieoption);
$(window).resize(pieChart.resize);
}
});
}
Java代码实现如下:
@RequestMapping("请求地址名")
@ResponseBody
public Object 方法名() {
Map<String,Object> returnMap=new HashMap<String, Object>();
StringBuffer sbType = new StringBuffer();
sbType.append("完整sql语句");
//获取值
List<Map<String, Object>> countList = vi.listBySql(sbType.toString(), null);
for (Map<String, Object> map : countList) {
if("0".equals(map.get("type"))){
// map.get("num")中的num为sql语句的别名
returnMap.put("two", map.get("num"));
}else if("1".equals(map.get("type"))){
returnMap.put("four", map.get("num"));
}
}
return returnMap;
}
2、柱状图
柱状图上面注意横纵坐标的数据以及返回来的数据格式
jsp页面显示的代码:
function 函数方法名(){
$.ajax({
type : "POST",
url : "请求路径",
success : function(jsondata) {
if(jsondata==null){
alert("获取数据失败");
return;
}
//从后台获取的数据
bidName = jsondata.bidName;
numData = jsondata.num;
numData1 = jsondata.num1;
//left为div的id
var barChart = echarts.init(document.getElementById("left"));
var baroption = {
title:{//设置位置
text: '标题',
x: 'left',
align: 'right'
},
tooltip: {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
xAxis:{ //横坐标
data:bidName,
name: '横坐标名称',
axisLabel: {
show: true,
textStyle: {
fontSize:'13'
}
},
},
yAxis:{ //纵坐标
type:'value',
name:'纵坐标名称'
},
series: [//现实的数据在柱状图上依次显示
{
name: '数据1的名称',
type: 'bar',
stack: '总量',
label: {
normal: {
show: false,
position: 'insideRight'
}
},
itemStyle:{//改变柱状的颜色
normal: {
color:'#FBDA55'
}
},
data: numData1
},
{
name: '数据2的名称',
type: 'bar',
stack: '总量',//显示在同一个柱状条图上
label: {
normal: {
show: false,
position: 'insideRight'
}
},
itemStyle:{//改变柱状的颜色
normal: {
color:'#348DDF'
}
},
data:numData
}],
label: { //在柱子上显示数值
normal:{
show:true,
position:'top',
textStyle:{
color: 'black'
}
}
}
};
barChart.setOption(baroption);
$(window).resize(barChart.resize);
}
});
}
Java代码如下:
@RequestMapping("请求地址名")
@ResponseBody
public Object 方法名() {
Map<String,Object> returnMap=new HashMap<String, Object>();
StringBuffer sbType1 = new StringBuffer();
StringBuffer sbType2 = new StringBuffer();
sbType1.append("完整sql语句1");
sbType2.append("完整sql语句2");
// 获取值1
List<Map<String, Object>> countList1 = vi.listBySql(sbType1.toString(), null);
// 获取值2
List<Map<String, Object>> countList2 = vi.listBySql(sbType2.toString(), null);
//初始化横轴数据
Object bidName[] = new Object[countList1.size()];//横轴
//初始化横轴数据
Object num[] = new Object[countList1.size()];//纵轴
for(int i = 0; i < countList1.size(); i++) {
bidName[i] = countList1.get(i).get("names");
num[i] = countList1.get(i).get("num");
}
Object num1[] = new Object[countList2.size()];//纵轴
for(int i = 0; i < countList2.size(); i++) {
bidName[i] = countList2.get(i).get("names");
num1[i] = countList2.get(i).get("num1");
}
//bidName、num、num1都是sql语句的别名
returnMap.put("bidName", bidName);
returnMap.put("num", num);
returnMap.put("num1", num1);
return returnMap;
}