echarts图表ajax获取数据填充
2017-12-06 20:19
429 查看
js部分
/* ---------------- 折线图 --------------- */
var line = echarts.init(document.getElementById('line'));//折线图
$.ajax({
type: "post",
url: '<%=basePath%>product.do?method=selectProductNum2',
cache: false,
dataType: "json",
success: function(data) {
//------------定义折线图数据---------------
line.setOption({
color : [ "#32d2c9" ],
title : {
x : 'left',
text : '本年度新增产品统计',
textStyle : {
fontSize : '18',
color : '#4c4c4c',
fontWeight : 'bolder'
}
},
tooltip : {
trigger : 'axis'
},
toolbox : {
show : true,
feature : {
dataZoom : {
yAxisIndex : 'none'
},
dataView : {
readOnly : false
},
magicType : {
type : [ 'line', 'bar' ]
}
}
},
xAxis : {
type : 'category',
boundaryGap : false,
data : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月' ,'十月' ,'十一月' ,'十二月'],
axisLabel : {
interval : 0
}
},
yAxis : {
type : 'value'
},
series : [ {
name : '平均',
type : 'line',
data : data, // 这个地方填充获得的数据[ 23, 42, 18, 45, 48, 49, 100, 49, 100 ,49, 100, 49 ]
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
});
//-----------------------------
}
});
java后台代码
/**
* 折线图表展示
* @return
*/
@SuppressWarnings("deprecation")
public String selectProjectNum2(){
//得到今年的第一天
SimpleDateFormat dateFormat1 = new SimpleDateFormat("yyyy");
String format = dateFormat1.format(new Date());
SimpleDateFormat dateFormat2 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String str = format+"-01-01 00:00:01";
Date parse = new Date();
try {
parse = dateFormat2.parse(str);
} catch (ParseException e2) {
e2.printStackTrace();
}
//得到今年的所有产品
List<ProjectVO> findAll = projectService.findProjectAllByYear(parse.getTime());
int a=0,b=0,c=0,d=0,e=0,f=0,g=0,h=0,i=0,j=0,k=0,l=0;
for (ProjectVO projectVO : findAll) {
long createTime = projectVO.getCreateTime();
Date date = new Date(createTime);
int month = date.getMonth()+1;
switch (month) {
case 1:
a++;
break;
case 2:
b++;
break;
case 3:
c++;
break;
case 4:
d++;
break;
case 5:
e++;
break;
case 6:
f++;
break;
case 7:
g++;
break;
case 8:
h++;
break;
case 9:
i++;
break;
case 10:
j++;
break;
case 11:
k++;
break;
case 12:
l++;
break;
default:
break;
}
}
List<Integer> months =new ArrayList<Integer>(0);
months.add(a);
months.add(b);
months.add(c);
months.add(d);
months.add(e);
months.add(f);
months.add(g);
months.add(h);
months.add(i);
months.add(j);
months.add(k);
months.add(l);
JSONArray fromObject = JSONArray.fromObject(months);
try {
getResponse().setCharacterEncoding("utf-8");
getResponse().getWriter().write(fromObject.toString());
} catch (IOException e1) {
e1.printStackTrace();
}
return null;
}
相关文章推荐
- 利用ajax获取echarts图表的数据
- ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
- Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细
- echarts图表动态获取后台数据详解(三)--ajax跨域请求
- WebForm 获取实体类的数据,填充页面(用AJAX异步获取值,和用session传值)
- echarts结合ajax动态获取数据库数据
- echarts画圆环统计图并加载动态数据 (ajax获取数据)
- Echarts 动态获取数据进行图表的展示
- java实现的highcharts与ajax结合动态实时获取数据更新图表
- ECharts通过Ajax动态加载数据到图表
- 1.简单实例:ASP.NET下Echarts通过Ajax从数据库中获取数据
- Echarts 动态获取数据进行图表的展示
- java实现的highcharts与ajax结合动态实时获取数据更新图表
- echarts图表动态获取后台数据详解(二)
- Echarts -- 条件查询ajax动态获取数据
- 解决ajax获取到数据放到echarts里不显示问题
- Jquery如何将Ajax从后台获取的数据自动填充到省级下拉菜单
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
- 飞火龙在天解说百度Echarts的应用,如何从后台获取动态数据并生成图表的