前端统计图 echarts实现简单柱状图
1. 引入 ECharts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
2. 绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<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: [, , , , , ]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
这样你的第一个图表就诞生了!
案列:
前端代码: <!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--360浏览器优先以webkit内核解析-->
<title>高句丽介绍</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
<style lang="css">
td {
align: center;
valign: middle;
text-align: center;
vertical-align: middle;
}
</style>
</head> <body class="gray-bg">
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-sm-9">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h4>资源数量统计表</h4>
</div>
<div class="ibox-content">
<table border="" cellspacing="" style="height: 200px;width: 100%;font-size: 0.5em" >
<thead>
<tr>
<td>类型</td>
<td>总数</td>
<!-- <td>已发布</td>
<td>未发布</td>-->
</tr>
</thead>
<tbody>
<tr th:each="a : ${list}">
<td th:text="${a.type}"></td>
<td th:text="${a.total}"></td>
<!--<td th:text="${a.publish}"></td>
<td th:text="${a.notPublish}"></td>-->
</tr>
</tbody>
</table>
</div>
</div>
</div> </div> <div class="col-sm-12"> <div class="ibox float-e-margins">
<div class="ibox-title">
<h4>资源数量统计图</h4>
</div>
<div class="ibox-content">
<div id="bar" style="height: 200px;width: 100%"></div> </div>
</div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- echart-->
<script th:src="@{/ajax/libs/echarts/echarts.common.min.js}"></script> <script th:inline="javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('bar'));
var list = [[${list}]]; var legendDate = [];
var total = [];
//var notPublish = [];
for (var i = ; i < list.length; i++) {
legendDate.push(list[i].type)
total.push(list[i].total)
// notPublish.push(list[i].notPublish)
}
console.log(legendDate); // 指定图表的配置项和数据
option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: '总数'
},
grid: {
left: '2%',
right: '3%',
bottom: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
data: legendDate,
textStyle: {
color: '#c3dbff', //更改坐标轴文字颜色
fontSize : //更改坐标轴文字大小
},
axisLabel: {//x轴文字垂直显示
interval: ,
formatter:function(value)
{
return value.split("").join("\n");
}
}
// axisTick: {
// alignWithLabel: true
// }
}],
yAxis: {
type: 'value' },
series: [
{
name: '资源总量',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: total
}/*,
{
name: '未发布',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: notPublish
}*/
]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
后台代码: package cn.cmodes.project.module.statistics; import cn.cmodes.project.module.articleResource.service.IArticleResourceService;
import cn.cmodes.project.module.articleinformation.service.IArticleinformationService;
import cn.cmodes.project.module.bookResource.service.IBookResourceService;
import cn.cmodes.project.module.bookinformation.service.IBookinformationService;
import cn.cmodes.project.module.mediaphoto.service.IMediaphotoService;
import cn.cmodes.project.module.resource.service.IResourceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping; import java.util.ArrayList;
import java.util.HashMap; /**
* 统计分析
* @author : di
* @date : 2018-11-28 15:53
*/
@Controller
@RequestMapping("/module/statistics")
public class statisticsController { @Autowired
private IBookResourceService bookResourceService;
@Autowired
private IArticleResourceService articleResourceService;
@Autowired
private IResourceService resourceService;
@Autowired
private IArticleinformationService iArticleinformationService;
@Autowired
private IBookinformationService iBookinformationService;
@Autowired
private IMediaphotoService iMediaphotoService;
@GetMapping()
public String statistics(ModelMap mmap) {
ArrayList<Object> result = new ArrayList<>();
HashMap<String, Object> audio = new HashMap<>();
audio.put("type","音频");
audio.put("total",iMediaphotoService.selectTypeTatal());
result.add(audio);
HashMap<String, Object> map = new HashMap<>();
map.put("type","地图");
map.put("total",iMediaphotoService.selectTypeTatal());
result.add(map);
HashMap<String, Object> picture = new HashMap<>();
picture.put("type","图片");
picture.put("total",iMediaphotoService.selectTypeTatal());
result.add(picture);
HashMap<String, Object> video = new HashMap<>();
video.put("type","视频");
video.put("total",iMediaphotoService.selectTypeTatal());
result.add(video); HashMap<String, Object> archaeologicaldata = new HashMap<>();
archaeologicaldata.put("type","考古资料");
archaeologicaldata.put("total",iArticleinformationService.selectTypeTatal());
result.add(archaeologicaldata); HashMap<String, Object> archaeology = new HashMap<>();
archaeology.put("type","考古简报");
archaeology.put("total",iArticleinformationService.selectTypeTatal());
result.add(archaeology); HashMap<String, Object> conference = new HashMap<>();
conference.put("type","会议论文");
conference.put("total",iArticleinformationService.selectTypeTatal());
result.add(conference); HashMap<String, Object> dissertation = new HashMap<>();
dissertation.put("type","学术论文");
dissertation.put("total",iArticleinformationService.selectTypeTatal());
result.add(dissertation); HashMap<String, Object> journalarticles = new HashMap<>();
journalarticles.put("type","期刊论文");
journalarticles.put("total",iArticleinformationService.selectTypeTatal());
result.add(journalarticles); HashMap<String, Object> mediaarticles = new HashMap<>();
mediaarticles.put("type","媒体文章");
mediaarticles.put("total",iArticleinformationService.selectTypeTatal());
result.add(mediaarticles); HashMap<String, Object> periodical = new HashMap<>();
periodical.put("type","期刊");
periodical.put("total",iArticleinformationService.selectTypeTatal());
result.add(periodical); HashMap<String, Object> rubbingrubbings = new HashMap<>();
rubbingrubbings.put("type","石刻拓片");
rubbingrubbings.put("total",iArticleinformationService.selectTypeTatal());
result.add(rubbingrubbings); HashMap<String, Object> stoneinscription = new HashMap<>();
stoneinscription.put("type","石刻专题");
stoneinscription.put("total",iArticleinformationService.selectTypeTatal());
result.add(stoneinscription); HashMap<String, Object> ancientWorks = new HashMap<>();
ancientWorks.put("type","古籍");
ancientWorks.put("total",iBookinformationService.selectTypeTatal());
result.add(ancientWorks); HashMap<String, Object> book = new HashMap<>();
book.put("type","图书");
book.put("total",iBookinformationService.selectTypeTatal());
result.add(book); HashMap<String, Object> catalog = new HashMap<>();
catalog.put("type","目录");
catalog.put("total",iBookinformationService.selectTypeTatal());
result.add(catalog); HashMap<String, Object> itemreport = new HashMap<>();
itemreport.put("type","结项报告");
itemreport.put("total",iBookinformationService.selectTypeTatal());
result.add(itemreport); HashMap<String, Object> proceedings = new HashMap<>();
proceedings.put("type","论文集");
proceedings.put("total",iBookinformationService.selectTypeTatal());
result.add(proceedings); HashMap<String, Object> stonealbum = new HashMap<>();
stonealbum.put("type","石刻专题");
stonealbum.put("total",iBookinformationService.selectTypeTatal());
result.add(stonealbum); HashMap<String, Object> stonecompilation = new HashMap<>();
stonecompilation.put("type","石刻汇编");
stonecompilation.put("total",iBookinformationService.selectTypeTatal());
result.add(stonecompilation); mmap.put("list",result);
return "module/statistics/statistics";
}
}
浏览器效果:
官方网址
折线图: <!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--360浏览器优先以webkit内核解析-->
<title>高句丽介绍</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
<style lang="css">
td {
align: center;
valign: middle;
text-align: center;
vertical-align: middle;
}
</style>
</head> <body class="gray-bg">
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-sm-9">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h4>资源数量统计表</h4>
</div>
<div class="ibox-content">
<table border="" cellspacing="" style="height: 200px;width: 100%;font-size: 0.5em" >
<thead>
<tr>
<td>类型</td>
<td>总数</td>
<!-- <td>已发布</td>
<td>未发布</td>-->
</tr>
</thead>
<tbody>
<tr th:each="a : ${list}">
<td th:text="${a.type}"></td>
<td th:text="${a.total}"></td>
<!--<td th:text="${a.publish}"></td>
<td th:text="${a.notPublish}"></td>-->
</tr>
</tbody>
</table>
</div>
</div>
</div> </div> <div class="col-sm-12"> <div class="ibox float-e-margins">
<div class="ibox-title">
<h4>资源数量统计图</h4>
</div>
<div class="ibox-content">
<div id="bar" style="height: 200px;width: 100%"></div> </div>
</div>
</div> <div class="col-sm-12"> <div class="ibox float-e-margins">
<div class="ibox-title">
<h4>资源数量统计图</h4>
</div>
<div class="ibox-content">
<div id="bars" style="height: 200px;width: 100%"></div> </div>
</div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- echart-->
<script th:src="@{/ajax/libs/echarts/echarts.common.min.js}"></script> <script th:inline="javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('bar'));
//折线
var myCharts = echarts.init(document.getElementById('bars'));
var list = [[${list}]]; var legendDate = [];
var total = [];
//var notPublish = [];
for (var i = ; i < list.length; i++) {
legendDate.push(list[i].type)
total.push(list[i].total)
// notPublish.push(list[i].notPublish)
} // 指定图表的配置项和数据
option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: '总数'
},
grid: {
left: '2%',
right: '3%',
bottom: '2%',
containLabel: true
},
xAxis: [{
type: 'category',
data: legendDate,
textStyle: {
color: '#c3dbff', //更改坐标轴文字颜色
fontSize : //更改坐标轴文字大小
},
axisLabel: {//x轴文字垂直显示
interval: ,
formatter:function(value)
{
return value.split("").join("\n");
}
}
// axisTick: {
// alignWithLabel: true
// }
}],
yAxis: {
type: 'value' },
series: [
{
name: '资源总量',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: total
}/*,
{
name: '未发布',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: notPublish
}*/
]
};
//折线
options = { title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:legendDate
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: legendDate
},
yAxis: {
type: 'value'
},
series: [{
name: '资源总量',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: total,
type: 'line',
areaStyle: {}
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myCharts.setOption(options);
</script>
</body>
</html>