echarts的简单柱状图应用,数据库动态加载相应数据
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="/js/echarts.js" ></script>
<script src="/js/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '库存统计'
},
tooltip: {},
legend: {
data:['库存','单价']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '库存',
type: 'bar',
data: []
},{
name: '单价',
type: 'bar',
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var pics=[];
var names=[]; //类别数组(实际用来盛放X轴坐标值)
var nums=[]; //销量数组(实际用来盛放Y坐标值)
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url :"/echart/bar", //请求发送到TestServlet处
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].commodityName); //挨个取出类别并填入类别数组
}
for(var i=0;i<result.length;i++){
nums.push(result[i].inventoryNum); //挨个取出库存并填入销量数组
}
for(var i=0;i<result.length;i++){
pics.push(result[i].unitprice); //挨个取出单价并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
name:'果蔬名',
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '库存',
data: nums
},{
// 根据名字对应到相应的系列
name: '单价',
data: pics
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
cotroller
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fru.fruits.domain.CommodityDO;
import com.fru.fruits.service.CommodityService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/echart")
public class EchartsController {
@Autowired
private CommodityService commodityService;
/**
* 柱状图 图表option 的封装
*
*/
@RequestMapping(value = "/bar",method = RequestMethod.POST)
@ResponseBody()
public String bar() throws JsonProcessingException {
List<CommodityDO> commoditis = commodityService.list1();
ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类
String json = mapper.writeValueAsString(commoditis); //将list中的对象转换为Json格 式的数组
return json;
}
}
业务层及dao和实体不再做赘述了