SSM框架+echarts实现可视化

最新推荐文章于 2024-05-01 18:39:22 发布

Angel*

最新推荐文章于 2024-05-01 18:39:22 发布

阅读量3.3k

点赞数 5

文章标签： ajax java html

本文链接：https://blog.csdn.net/qq_43700270/article/details/105185743

版权

SSM框架+echarts实现可视化

一、前言
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 :

最低0.47元/天解锁文章

Angel*

关注

5
点赞
踩
44

收藏

觉得还不错? 一键收藏
3
评论
SSM框架+echarts实现可视化

SSM框架+echarts实现可视化一、前言1.编写前台页面html2.编写dao,service层代码3.编写controller层代码一、前言纯属个人笔记，仅供参考！！！！ssm框架的搭建在这里就不详细搭建了，百度上有很多，这个功能在SSM框架搭建好的前提下操作。因为本人记性不太好的原因，把自己写出来的东西做个整理和记录方便下次忘记的时候可以看看，有写的不好，或需要优化的欢迎指导，谢谢...
复制链接

扫一扫