这个是是使用用maven +ssm 组成的 如果要运行 需要参考前面两个博客搭建 maven环境
代码 放到码云 上：
1. 效果
2. 代码
官方 demo:
http://echarts.baidu.com/echarts2/doc/example.html
2.1 前端
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts<</title>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
$(function(){
var url = '';
setChartBar(url);
setInterval(function(){setChartBar()}, 5*1000); // 间歇执行 setChartBar是被调用的方法名称
});
//设置ajax访问后台填充柱图 http://localhost:8080/mavenssm20180519/index2.jsp
function setChartBar(url){
var Chart=echarts.init(document.getElementById("main"));//初始化
//用户等待
Chart.showLoading(
{text: 'Loding...' }
);
//自定义变量
var categories=[];
var values=[];
//发送Ajax请求
$.ajax({
url : "${pageContext.request.contextPath }/getData.action",
dataType:"json",
type:'post',
success:function(json){
categories = json.categories; //拿到后台的数据
values = json.values; //拿到后台的数据
//--------------------------官方的 开始--http://echarts.baidu.com/echarts2/doc/example/bar1.html-
//将上面照片中demo代码替换 记得
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : categories //替换变量
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",// 图像类型
"data":values //替换变量
}
]
};
//--------------------------官方的 结束----------------------------------------
Chart.hideLoading();
Chart.setOption(option);
}
});
}
</script>
</body>
</html>
2.2 后台代码
后台 需要的json数据格式
{"values":[80,50,75,100],"categories":["鞋","衬衫","外套","牛仔裤"]}
代码：
//http://localhost:8080/mavenssm20180519/echartspie.jsp
@RequestMapping(value="/getPieData.action")
public void getPieData(HttpServletRequest request, HttpServletResponse response) throws IOException{
response.setContentType("text/html; charset=utf-8");
String[] label = {"搜索引擎","直接访问","邮件营销","联盟广告","视频广告"};
String[] value = {"700","300","500","300","200"};
Map<String, Object> json = new HashMap<String, Object>();
json.put("label", label);
json.put("value", value);
String jsonStri = JSONObject.toJSONString(json);//阿里 fastjson 转换json数据
PrintWriter out=response.getWriter();
out.println(jsonStri);
out.flush();
out.close();
}