每日总结

 对于web的设计采用了去年javaweb的设计模式，分成Bean层，DB层，Dao层和servlet层，这样的分层使得功能的设计更加明了。对于使用图标的显示，echarts提供了柱状图的生成方法，因此要生成柱状图只需要在读取数据后传递到前台的界面，然后柱状图加载数据就行了。由于能力有限，还是使用的上学期的<c forEach>标签进行某些值的赋值。得到数据并传递到前台的方法为：

public void find(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException,SQLException{
request.setCharacterEncoding("utf-8");
String answer[]=new String[10];
for(int i=0;i<1;i++) {
answer[i]=new String();
}
answer[1]=request.getParameter("type");

answer[0]=request.getParameter("province");
List<Bean> list = null;

list=dao.find(answer);
if(answer[1].equals("2")) {
request.setAttribute("list", list);
request.setAttribute("message", answer[0]+"省总确定病例数据柱状图如下");
}
else {
String tiaojian=request.getParameter("tiaojian");
String b="";
if(tiaojian.equals("1")) {
b="T_confirm";
}
else if(tiaojian.equals("2")) {
b="T_heal";
}
else if(tiaojian.equals("3")) {
b="T_dead";
}
else if(tiaojian.equals("4")) {
b="S_confirm";
}
else if(tiaojian.equals("5")) {
b="S_hear";
}
else {
b="S_dead";
}

List<GuoBean> pnum=dao.GuoZHUZT(b);
List<GuoBean> set=new ArrayList<>();
String pname="";

for(int i=0;i<pnum.size();i++) {
if(!(pnum.get(i).getName().equals(pname))){
GuoBean newinf=new GuoBean(pnum.get(i).getName(),pnum.get(i).getSheal());
set.add(newinf);
pname=pnum.get(i).getName();
}
else {
GuoBean inf=new GuoBean(pnum.get(i).getName(),(Integer.parseInt(pnum.get(i).getSheal())+Integer.parseInt(set.get(set.size()-1).getSheal()))+"");
set.set(set.size()-1, inf);
request.setAttribute("list", set);

}
}

}
request.getRequestDispatcher("CSSShow1.jsp").forward(request, response);
}

 

 

前台的显示用到的为：

<script type="text/javascript">

var dom = document.getElementById("zhu");
var myChart = echarts.init(dom);
var app = {};

 

var array1=new Array()
var array2=new Array()
var array3=new Array("111","222","333")
<c:forEach items="${list}" var="item" varStatus="status" >
array1.push("${item.name}");
array2.push("${item.sheal}");
</c:forEach>
var option;

 

option = {
xAxis: {
type: 'category',
axisLabel:{
fontSize:'10',
interval:0

},
data: array1
},
yAxis: {
type: 'value'
},
series: [{
data: array2,
type: 'bar',
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示

}
}
},
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};

if (option && typeof option === 'object') {
myChart.setOption(option);
}

</script>

获取到div，然后给div进行赋值等操作让div以柱状图的样式显示数据。