Echarts（数据可视化）
入门案例：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'layout.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts/echarts.js"></script>
<style type="text/css">
.divClass{
width: 800px;
height:600px;
border: 1px solid black;
float: left;
margin-right: 5px
}
</style>
</head>
<body>
<!-- ==================================================通过JavaScript加载数据======================================================= -->
<div id="charts" class="divClass"></div>
<script type="text/javascript">
$(function(){
var myChart = echarts.init(document.getElementById("charts"));
//生成图表数据
var option = {
title : {
text: '某站点用户访问来源',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
});
</script>
<!-- ========================================================================================================================= -->
<!-- ==================================================通过json文件加载数据======================================================= -->
<div id="charts1" class="divClass"></div>
<script type="text/javascript">
$(function(){
/********************************json数据格式*************************************
{
"data":[
{"value":335, "name":"直接访问"},
{"value":310, "name":"邮件营销"},
{"value":234, "name":"联盟广告"},
{"value":135, "name":"视频广告"},
{"value":1548, "name":"搜索引擎"}
],
"name":["直接访问","邮件营销","联盟广告","视频广告","搜索引擎"]
}
********************************************************************************/
$.get('${pageContext.request.contextPath }/json/echart_data.json',function(data){
var myChart = echarts.init(document.getElementById("charts1"));
//生成图表数据
myChart.setOption({
//标题属性
title : {
text: '某站点用户访问来源',
x:'center'
},
//提示框属性
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//图例属性
legend: {
orient: 'vertical',
left: 'left',
data: data.name
},
//数据
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:data.data
}
],itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
});
});
</script>
<!-- ========================================================================================================================= -->
</body>
</html>
页面效果：
json文件格式不是关键。只要需要的数据在json串中就有办法获取出来，生成图表。
SSH框架查询数据库中的数据生成图表：
Action中加载数据的方法：
public String chart(){
/*
* 1.调用service#industryCount()
* 2.将返回的结果集保存转发到页面
*/
List<Object[]> list = customerService.getIndustryCount();
ActionContext.getContext().put("list", list);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/json;charset=UTF-8");
//将PageBean转换为JSON串，返回给页面
//将查询结果转换为json串
String json = JSONArray.fromObject(list).toString();
System.out.println(json);
//返回json数据
try {
response.getWriter().print(json);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
生成的json字符串格式：
页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>统计列表</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="${pageContext.request.contextPath }/css/Style.css" type=text/css rel=stylesheet>
<LINK href="${pageContext.request.contextPath }/css/Manage.css" type=text/css
rel=stylesheet>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.js"></script>
<script type="text/javascript">
$(function(){
$.get('CustomerAction_chart',function(data){
var myChart = echarts.init(document.getElementById("chart"));
//生成图表数据
myChart.setOption({
//标题属性
title : {
text: '本系统客户来源',
x:'center'
},
//提示框属性
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//图例属性
legend: {
orient: 'vertical',
left: 'left',
data: (function(){
var res = [];
for(var i=0;i<data.length;i++){
res.push(data[i][0]);
}
return res;
})()
},
//数据
series : [
{
name: '客户来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:function(){
var res = [];
for(var i=0;i<data.length;i++){
res.push({
name:data[i][0],
value:data[i][1]
});
}
return res;
}()
}
],itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
});
});
});
</script>
<META content="MSHTML 6.00.2900.3492" name=GENERATOR>
</HEAD>
<BODY>
<div id="chart" style="width:600px;height: 400px;background: wihte"></div>
</BODY>
</HTML>
