SSM框架+echarts实现可视化
一、前言
纯属个人笔记,仅供参考!!!!
ssm框架的搭建在这里就不详细搭建了,百度上有很多,这个功能在SSM框架搭建好的前提下操作。
个人搭建的:SSM框架
因为本人记性不太好的原因,把自己写出来的东西做个整理和记录方便下次忘记的时候可以看看,有写的不好,或需要优化的欢迎指导,谢谢。
Echarts简介
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
1.编写前台页面html
1.1饼图页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<!-- 引入echarts.min.js和jquery.js -->
<script type="text/javascript" src="resources/echarts/js/echarts.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body style="height: 100%; margin: 0">
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id=mainChart style="width: 800px; height: 650px;"></div>
<a href="index.html"><button style="margin-left: 400px;" type="button">返回首页</button></a>
<script type="text/javascript">
//地区饼状统计图
//封装成函数方法,也可以不封装
function loadChart() {
alert("加载中。。。")
//初始化echarts
var mainChart = echarts.init(document.getElementById("mainChart"));
//设置属性
mainChart.setOption({
//color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
title : {
text : '书籍种类统计',
subtext : '内部信息',
left : 'center'
},
tooltip : {
trigger : 'item',
formatter : '{a} <br/>{b} : {c} ({d}%)'
},
legend : {
orient : 'vertical',
left : 'left',
data : []//获取数据库的书籍
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'pie', 'funnel' ],
option : {
funnel : {
x : '25%',
width : '50%',
funnelAlign : 'center',
max : 1548
}
}
},
restore : {
show : true
},
saveAsImage :