图形报表ECharts
一、Echarts简介
ECharts缩写来自Enterprise Charts,商业级数据图表,是apache的一个开源的使用 JavaScript实现的数据可视化工具,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图 形库 ZRender,提供直观、交互丰富、可高度个性化定制的数据可视化图表。
官网 https://echarts.apache.org/zh/index.html
下载地址:https://echarts.apache.org/zh/download.html
解压后的文件中只需要将echarts.js 导入到工程中即可
二、Echarts.js入门案例
通过标签方式直接引入构建好的 echarts 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {
},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
效果如下
三、Echarts使用总结
通过官方案例我们可以发现,使用ECharts展示图表效果,关键点在于确定此图表所需的 数据格式,然后按照此数据格式提供数据就可以了,我们无须关注效果是如何渲染出来 的。在实际应用中,我们要展示的数据往往存储在数据库中,所以我们可以发送ajax请求获取 数据库中的数据并转为图表所需的数据即可。
四、案例
1、使用Echarts绘制会员数量的折线图
前端代码
<script src="../plugins/echarts/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart1 = echarts.init(document.getElementById('line'));
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
axios.get("/report/getMemberReport.do").then((res)=>{
myChart1.setOption(
{
title: {
text: '会员数量'
},
tooltip: {
},
legend: {
data:['会员数量']
},
xAxis: {
data: res.data.data.months
},
yAxis: {
type:'value'
},
series: [{
name: '会员数量',
type: 'line',
data: res.data.data.memberCount
}]
});
});
</script>
需要的json格式数据为:
"data":{
"months":["2019.01","2019.02","2019.03","2019.04"],
"memberCount":[3,4,8,10]
},
"flag":true,
"message":"获取会员统计数据成功"
后端代码
controller
@RestController
@RequestMapping("/report")
public class ReportController {
@Reference
private MemberService memberService;
//会员数量折线图数据
@RequestMapping("/getMemberReport")
public Result getMemberReport(){
Map<String,Object> map = new HashMap<>();
List<String> months = new ArrayList();
Calendar calendar = Calendar.getInstance();//获得日历对象,模拟时间就是当前时间
//计算过去一年的12个月
calendar.add(Calendar.MONTH,-12);//获得当前时间往前推12个月的时间
for(int i=0;i<12;i++){
calendar.add(Calendar.MONTH,1);//获得当前时间往后推一个月日期
Date date = calendar.getTime();
months.add(new SimpleDateFormat("yyyy.MM").format(date));
}
map.put("months",months);
List<Integer> memberCount = memberService.findMemberCountByMonths(months);
map.put("memberCount",memberCount);
return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS,map);
}
}
接口中方法
List<Integer> findMemberCountByMonths(List<String> months);
实现类
@Service(interfaceClass = MemberService.class)
@Transactional
public class MemberServiceImpl implements MemberService {
@Resource
private MemberMapper memberMapper;
@Override
public List<Integer> findMemberCountByMonths(List<String> months) {
List<Integer> list = new ArrayList<>();
for(String date : months){
String newdata = months+".31"; //2019.05.31;
QueryWrapper<Member> queryWrapper = new QueryWrapper<>();
queryWrapper.lt("regTime",date);
Integer selectCount = memberMapper.selectCount(queryWrapper);
list.add(selectCount);
}
return list;
}
}
2、绘制饼图
会员可以通过移动端自助进行体检预约,在预约时需要选择预约的体检套餐。本章节我们需要通过饼形图直观的展示出会员预约的各个套餐占比情况。
前端代码
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
axios.get("/report/getSetmealReport.do").then((res)=>{
myChart1.setOption({
title : {
text: '套餐预约占比',
subtext: '',
x:'center'
},
tooltip : {
//提示框组件
trigger: 'item',//触发类型,在饼形图中为item
formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
},
legend: {
orient: 'vertical',
left: 'left',
data: res.data.data.setmealNames
},
series : [
{
name: '套餐预约占比',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:res.data.data.setmealCount,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
});
</script>
对应后台的json数据格式为:
{
"data":{
"setmealNames":["套餐1","套餐2","套餐3"],
"setmealCount":[{
"name":"套餐1","value":10},
{
"name":"套餐2","value":30},
{
"name":"套餐3","value":25} ]
},
"flag":true,
"message":"获取套餐统计数据成功"
}
后台代码
controller
//套餐预约占比饼形图
@RequestMapping("/getSetmealReport")
public Result getSetmealReport(){
//使用模拟数据测试使用什么样的java对象转为饼形图所需的json数据格式
Map<String,Object> data = new HashMap<>();
try{
List<Map<String,Object>> setmealCount = setmealService.findSetmealCount();
data.put("setmealCount",setmealCount);
List<String> setmealNames = new ArrayList<>();
for (Map<String, Object> map : setmealCount) {
String name = (String) map.get("name");//套餐名称
setmealNames.add(name);
}
data.put("setmealNames",setmealNames);
return new Result(true,MessageConstant.GET_SETMEAL_COUNT_REPORT_SUCCESS,data);
}catch (Exception e){
e.printStackTrace();
return new Result(false,MessageConstant.GET_SETMEAL_COUNT_REPORT_FAIL);
}
}
接口方法
List<Map<String, Object>> findSetmealCount();
接口方法实现
@Override
public List<Map<String, Object>> findSetmealCount() {
return setmealMapper.findSetmealCount();
}
Mapper的接口中添加方法
public List<Map<String,Object>> findSetmealCount();
Mapper.xml的sql内容
<select id="findSetmealCount" resultType="map">
select s.name,count(o.id) as value
from t_order o ,t_setmeal s
where o.setmeal_id = s.id group by s.name
</select>
加方法**
public List<Map<String,Object>> findSetmealCount();
Mapper.xml的sql内容
<select id="findSetmealCount" resultType="map">
select s.name,count(o.id) as value
from t_order o ,t_setmeal s
where o.setmeal_id = s.id group by s.name
</select>