目录:
(1)统计图标案例-EChart插件的使用
(2)crm交易统计图标设计
(1)统计图标案例-EChart插件的使用
创建echarttest.jsp
在项目中引入开发包:
引入插件 echart它依赖于jquery,所以也要引入进来
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<!--引入jquery-->
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<!--引入echarts插件-->
<script type="text/javascript" src="jquery/echarts/echarts.min.js"></script>
<title>演示echarts插件</title>
<script type="text/javascript">
$(function () {
//当容器加载完成之后,对容器调用工具函数
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {//标题
text: 'ECharts 入门示例',
subtext:'测试副标题',
textStyle:{
fontStyle:'italic'
}
},
tooltip: {//提示框
textStyle:{
color:'blue'
}
},
legend: {//图例
data:['销量']
},
xAxis: {//x轴:数据项轴
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},//y轴:数量轴
series: [{//系列
name: '销量',//系列的名称 要和legend相对应
type: 'line',//系列的类型:bar--柱状图,line--折线图
data: [5, 20, 36, 10, 10, 20]//系列的数据
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
testStyle:设置样式的
上面图例的销量要和series的名字相对应,如果你要加多个图例直接在data里面加就行了,series中也要再加一个数组
其他的样式去官网查看进行设置 ,访问网址:
https://echarts.apache.org/zh/option.html#title.subtext
漏斗图案例:
echarttest2.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<!--引入jquery-->
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<!--引入echarts插件-->
<script type="text/javascript" src="jquery/echarts/echarts.min.js"></script>
<title>演示echarts插件2</title>
<script type="text/javascript">
$(function () {
//当容器加载完成之后,对容器调用工具函数
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '交易统计图表',
subtext: '交易表中各个阶段的数量'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '数据量',
type: 'funnel',
left: '10%',
width: '80%',
label: {
formatter: '{b}'
},
labelLine: {
show: true
},
itemStyle: {
opacity: 0.7
},
emphasis: {
label: {
position: 'inside',
formatter: '{b}: {c}'
}
},
data: [
{value: 60, name: '访问'},
{value: 40, name: '咨询'},
{value: 20, name: '订单'},
{value: 80, name: '点击'},
{value: 100, name: '展现'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
(2)crm交易统计图标设计
在CharController:添加:
index.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<!--引入jquery-->
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<!--引入echarts插件-->
<script type="text/javascript" src="jquery/echarts/echarts.min.js"></script>
<title></title>
<script type="text/javascript">
$(function () {
// 发送查询请求
$.ajax({
url:'workbench/chart/transaction/queryCountOfTranGroupByStage.do',
type:'post',
dataType:'json',
success:function (data) {
// 调用echarts工具函数,显示漏斗图
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '交易统计图表',
subtext: '交易表中各个阶段的数量'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
toolbox: {
feature: {
dataView: {readOnly: true},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '数据量',
type: 'funnel',
left: '10%',
width: '80%',
label: {
formatter: '{b}'
},
labelLine: {
show: true
},
itemStyle: {
opacity: 0.7
},
emphasis: {
label: {
position: 'inside',
formatter: '{b}: {c}'
}
},
data: data
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
});
</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1000px;height:600px; margin: 0 auto"></div>
</body>
</html>
在这页面index.jsp修改a标签路径:
创建一个实体类,来封装参数 FunnelVO:
package com.bjpowernode.crm.workbench.domain;
public class FunnelVO {
private String name;
private int value;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
}
在TranMapper:写一个方法:
TranMapper.xml:sql语句
在TranService接口添加:
实现类:
在TranController:添加方法:
//查询交易表阶段条数请求
@RequestMapping("/workbench/chart/transaction/queryCountOfTranGroupByStage.do")
@ResponseBody
public Object queryCountOfTranGroupByStage(){
List<FunnelVO> funnelVOList = tranService.queryCountOfTranGroupByStage();
// 根据查询结果,返回响应信息
return funnelVOList;
}
在index.jsp:当页面加载完毕发送请求
把data修改
// 发送查询请求
$.ajax({
url:'workbench/chart/transaction/queryCountOfTranGroupByStage.do',
type:'post',
dataType:'json',
success:function (data) {
// 调用echarts工具函数,显示漏斗图
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '交易统计图表',
subtext: '交易表中各个阶段的数量'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}"
},
toolbox: {
feature: {
dataView: {readOnly: true},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '数据量',
type: 'funnel',
left: '10%',
width: '80%',
label: {
formatter: '{b}'
},
labelLine: {
show: true
},
itemStyle: {
opacity: 0.7
},
emphasis: {
label: {
position: 'inside',
formatter: '{b}: {c}'
}
},
data: data
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
视频完结