java Servlet Mysql echart柱状图表、折线图表生成
动态读取数据库表的数据显示柱状图，
1.建数据库，数据表bar ,name varchar 55 ,num int
2.采用json读取数据返回给 Echart ,
3. hellobar.java
//创建了一个bardao的对象，barDAO主要是对数据库的连接和对数据库的操作
barDAO bardao=new barDAO();//调用bardao的select_all()方法把从数据库中读取所有的数据返回的是一个ArrayList，ArrayList里面放的是一个barBean
ArrayList<barBean> array = (ArrayList<barBean>) bardao.listAll();
System.out.println("s"+array);
//设置返回时的编码格式
response.setContentType("text/html; charset=utf-8");
//调用JSONArray.fromObject方法把array中的对象转化为JSON格式的数组
JSONArray json=JSONArray.fromObject(array);
System.out.println(json.toString());
//返回给前段页面
PrintWriter out = response.getWriter();
out.println(json);
out.flush();
out.close();
4.echart.jsp
<script type="text/javascript">
// 路径配置
require.config({
paths : {
echarts : 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
drewEcharts
);
function drewEcharts(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : [ {
type : 'category',
data :(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "bar.do",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
console.log(result[i].name);
arr.push(result[i].name);
}
}
},
error : function(errorMsg) {
alert("不好意思，图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})()
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "销量",
"type" : "bar",
"data" : (function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步执行
url : "bar.do",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i<result.length;i++){
console.log(result[i].num);
arr.push(result[i].num);
}
}
},
error : function(errorMsg) {
alert("不好意思，大爷，图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})()
} ]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
</script>
显示效果如下: