从0到1：通用后台管理系统 echarts图使用及其参数

这一章主要讲在系统概览模块中，所使用的echarts图及其参数

echarts是一个基于 JavaScript 的开源可视化图表库，
官网直通车

是在各种后台管理系统的开发中都常见的一种库，也是前端开发管理系统所必学的一种库
实现效果

那么在项目中主要是使用了饼状图（右上），柱状图（中左），环形图（下左），折线图（下右）

相应的图形案例可在官网的示例中查看，如下图所示：
官网案例
使用方法：

使用过程中常见问题可查看此篇文章echarts常见问题

html部分

<!-- 管理员与用户比值饼状图pie 
第一个类用于创建图例，第二个类修改样式 -->
	<div class="manage-user pie"></div>
<!-- 产品类别图 为了与产品类别饼状图区分 加了个bar代表柱状图 -->
	<div class="product-category-bar mid-content-left">

<!-- 下部分 footer -->
	<div class="footer-content-wrapped">
		<!-- 消息等级图 -->
		<div class="massage-level footer-content-left"></div>
		<!-- 消息每日总量图 -->
		<div class="massage-all-day footer-content-right"></div>
	</div>

script部分

 // 调用echarts图
	onMounted(() => {
		manageUser()
		productCategoryBar()
		massageLevel()
		massageAllDay()
	})

// 管理员与用户比值图
	const manageUser = () => {
	// 通过类名 初始化
		const mu = echarts.init(document.querySelector('.manage-user'))
		document.querySelector('.manage-user').setAttribute('_echarts_instance_', '')
		// 设置基本的参数
			mu.setOption({
				title: {
					text: '管理与用户对比图',
					// subtext: 'Fake Data',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					padding: [20, 20, 20, 20]
				},
				series: [
					{
						// name: 'Access From',
						type: 'pie',
						radius: '65%',
						data: piedata,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			})
		// 用于echarts响应式
		window.addEventListener('resize', function () {
			mu.resize()
		})
	}

// 产品类别图
	const productCategoryBar = async () => {
		const pcb = echarts.init(document.querySelector('.product-category-bar'))
		document.querySelector('.product-category-bar').setAttribute('_echarts_instance_', '')
			pcb.setOption({
				title: {
					text: "产品类别库存总价图",
					top: "3%",
					textStyle: {
						fontSize: 16
					},
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: {
					type: 'category',
					// 食品类，服装类，鞋帽类，日用品类，家具类，家用电器类，纺织品类，五金类
					data: category
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: price,
						type: 'bar',
						barWidth: 40,
						colorBy: "data"
					},
				]
			})
		window.addEventListener('resize', function () {
			pcb.resize()
		})
	}

	// 公告等级分布图
	const massageLevel = () => {
		const ml = echarts.init(document.querySelector('.massage-level'))
		document.querySelector('.massage-level').setAttribute('_echarts_instance_', '')
			ml.setOption({
				title: {
					text: "公告等级分布图",
					top: "3%",
					textStyle: {
						fontSize: 16
					},
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '5%',
					left: 'center'
				},
				series: [
					{
						// name: 'Access From',
						type: 'pie',
						radius: ['35%', '65%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: messagedata,
					}
				]
			})
		window.addEventListener('resize', function () {
			ml.resize()
		})
	}
	// 消息每日总量图
	const massageAllDay = () => {
	// 底部日期的实现
		let dd = new Date()
		let week = []
		for (let i = 1; i < 8; i++) {
			dd.setDate(dd.getDate() - 1)
			// 得到日期并且把斜杠替换成横杠
			week.push(dd.toLocaleDateString().replace(/\//g, "-"))
		}

		let number = []
		week.forEach(async (e) => {
			// 如果在Moment中不加'YYYY-MM-DD'会提示警告
			let day = moment(e, 'YYYY-MM-DD').format('YYYY-MM-DD')
			// 调用每天登录人数的接口
			const res = await everydaynumberofpeople(day)
			number.push(res.number)
		})
		const mad = echarts.init(document.querySelector('.massage-all-day'))
		document.querySelector('.massage-all-day').setAttribute('_echarts_instance_', '')
			mad.setOption({
				title: {
					text: "每日登录人数图",
					top: "3%",
					textStyle: {
						fontSize: 16
					},
				},
				tooltip: {
					trigger: 'item'
				},
				xAxis: {
					type: 'category',
					data: week.reverse()
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: number.reverse(),
						type: 'line'
					}
				]
			})
		window.addEventListener('resize', function () {
			mad.resize()
		})
	}

整个模块的css部分


<style lang="scss" scoped>

	// 总览内容
	.overview-wrapped {
		padding: 8px;
		height: calc(100vh - 85px);
		background: #f8f8f8;

		// 上部分内容 个人资料 + 饼状图
		.top-content-wrapped {
			height: 30%;
			display: flex;

			// 个人信息
			.person-infor {
				height: 100%;
				margin-right: 8px;
				width: calc(50% - 8px);
				display: flex;
				background: #fff;

				// 头像区域
				.person-avatar-wrapped {
					display: flex;
					width: 50%;
					height: 100%;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					// 公司
					.company {
						margin: 10px 0px;
						font-size: 12px;
					}

					// 职务
					.level {
						margin-top: 8px;
						font-size: 12px;
					}

				}

				// 分割线
				.line-wrapped {
					height: 100%;
					display: flex;
					align-items: center;

					.line {
						height: 170px;
						border: 1px solid #D3D3D3;
					}
				}

				// 详细信息区域
				.detail-infor-wrapped {
					height: 100%;
					width: calc(50% - 1px);
					margin-left: 50px;
					font-size: 12px;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
				}
			}

			// 饼状图
			.pie {
				width: calc(50%);
				height: 100%;
				background: #fff;
			}
		}

		// 中间部分内容 消息阅读量图 产品类别图
		.mid-content-wrapped {
			margin-top: 8px;
			height: calc(32% - 8px);
			display: flex;

			// 中间左部分
			.mid-content-left {
				margin-right: 8px;
				width: calc(60% - 8px);
				background: #fff;
			}

			// 中间右部分
			.mid-content-right {
				width: calc(40%);
				background: #fff;
				padding: 8px;

				// 标题
				.title {
					font-size: 14px;
					margin-bottom: 8px;
				}

				// 按钮区域
				.button-area {
					margin-bottom: 8px;
					height: 100px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					background: #F5F5F5;

					// 按钮名字
					.buttom-name {
						margin-top: 10px;
					}
				}

				// 按钮变色
				.button-area:hover {
					background: #e4efff;
				}
			}
		}

		// 底部内容
		.footer-content-wrapped {
			margin-top: 8px;
			height: calc(38% - 8px);
			display: flex;

			// 底部左部分
			.footer-content-left {
				margin-right: 8px;
				height:100%;
				width: calc(30% - 8px);
				background: #fff;
			}

			// 底部右部分
			.footer-content-right {
				height:100%;
				width: calc(70%);
				background: #fff;
			}
		}
	}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/78950.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Unity实现异步加载场景

Unity实现异步加载场景

一&#xff1a;创建UGUI 首先我们在LoginCanvas登入面板下面创建一个Panel,取名为LoadScreen,再在loadScreen下面创建一个Image组件&#xff0c;放置背景图片&#xff0c;然后我们再在lpadScreen下面继续创建一个Slider,这个是用来加载进度条的&#xff0c;我们改名为LoadSlid…
阅读更多...
Elasticsearch的一些基本概念

Elasticsearch的一些基本概念

文章目录 基本概念&#xff1a;文档和索引JSON文档元数据索引REST API 节点和集群节点Master eligible节点和Master节点Data Node 和 Coordinating Node其它节点 分片(Primary Shard & Replica Shard)分片的设定操作命令 基本概念&#xff1a;文档和索引 Elasticsearch是面…
阅读更多...
顺序表（数据结构）

顺序表（数据结构）

“路虽远&#xff0c;行则将至” ❤️主页&#xff1a;小赛毛 顺序表目录 1.线性表 2.顺序表 概念及结构 静态顺序表&#xff1a;使用定长数组存储元素。 动态顺序表&#xff1a;使用动态开辟的数组存储。 接口实现 1.线性表 线性表 &#xff08; linear list &#xff09; 是…
阅读更多...
idea如何建立web项目？？？

idea如何建立web项目？？？

我们需要用到tomcat&#xff0c;没有下在着小伙伴&#xff0c;可以借鉴这篇博客&#xff1a; 如何正确下载tomcat&#xff1f;&#xff1f;&#xff1f;_明天更新的博客-CSDN博客 1.建立普通的Java项目。 2.简单编写index.jsp文件 3.添加tomcat 4.运行服务器 5.构建Servlet 最后…
阅读更多...
突破瓶颈，提升学习效率的考试培训系统

突破瓶颈，提升学习效率的考试培训系统

在现代社会中&#xff0c;教育和培训已经成为人们提升自我能力的重要途径。尤其在考试备考过程中&#xff0c;学习效率的提升显得尤为重要。为了帮助学习者突破学习瓶颈&#xff0c;提高学习效果&#xff0c;我们开发了一款全新的考试培训系统。 我们的系统为学习者提供了全方…
阅读更多...
SpringBoot复习：（52）不再需要使用@EnableTransactionManagement的原因

SpringBoot复习：（52）不再需要使用@EnableTransactionManagement的原因

在Spring项目中&#xff0c;要用事务&#xff0c;需要EnableTransactionManagement注解加Transactional注解。而在SpringBoot项目&#xff0c;有事务的自动配置类TransactionAutoConfiguration,代码如下&#xff1a; 可以在其内部类EnableTransactionManagementConfiguratio…
阅读更多...
651页23万字智慧教育大数据信息化顶层设计及建设方案WORD

651页23万字智慧教育大数据信息化顶层设计及建设方案WORD

导读&#xff1a;原文《651页23万字智慧教育大数据信息化顶层设计及建设方案WORD》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 目录 一、 方案背景 1.1 以教育…
阅读更多...
电动汽车太秀了！用一个技巧搞定了蓄电池！

电动汽车太秀了！用一个技巧搞定了蓄电池！

当涉及能源存储和供应&#xff0c;特别是在太阳能、电动车和不间断电源等领域&#xff0c;蓄电池无疑是关键的组成部分。然而&#xff0c;蓄电池的状态、性能和健康状况对于系统的可靠性和效率至关重要。 蓄电池监控通过实时监测、数据分析和预警功能&#xff0c;它提供了更高效…
阅读更多...
React 全栈体系（二）

React 全栈体系（二）

第二章 React面向组件编程 一、基本理解和使用 1. 使用React开发者工具调试 2. 效果 2.1 函数式组件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>1_函数式组件</title> </head> &l…
阅读更多...
Docker、Linux网络代理设置

Docker、Linux网络代理设置

网络代理 linux机器通过windows主机代理访问外网 windows机器借用 CCProxy 软件&#xff0c;官网下载免费版(http://www.ccproxy.com/) CCProxy 默认使用808端口&#xff0c;如果端口冲突可以在设置处修改 在帐号处添加允许的linux机器ip&#xff0c;也可以直接允许所有ip,其…
阅读更多...
JVM——类文件结构

JVM——类文件结构

文章目录 一 概述二 Class 文件结构总结2.1 魔数2.2 Class 文件版本2.3 常量池2.4 访问标志2.5 当前类索引,父类索引与接口索引集合2.6 字段表集合2.7 方法表集合2.8 属性表集合 一 概述 在 Java 中&#xff0c;JVM 可以理解的代码就叫做字节码&#xff08;即扩展名为 .class …
阅读更多...
K8S系列二：实战入门

K8S系列二：实战入门

写在前面 本文是K8S系列第二篇&#xff0c;主要面向对K8S新手同学&#xff0c;阅读本文需要读者对K8S的基本概念&#xff0c;比如Pod、Deployment、Service、Namespace等基础概念有所了解。尚且不熟悉的同学推荐先阅读本系列的第一篇文章&#xff1a;《K8S系列一&#xff1a;概…
阅读更多...
vue常识

vue常识

vue是一套用于构建用户界面的渐进式框架,vue的核心库只关注视图层 1.声明式框架 ● 早在jquery的时期,编写代码都是命令式的,命令式框架的特点就是关注过程 ● 声明式框架更加注重结果,命令式的代码封装到了vue.js中,过程靠vue.js来实现 声明式代码更加简单,不需要关注实现,…
阅读更多...
屏蔽socket 实例化时，握手阶段报错信息WebSocket connection to ‘***‘ failed

屏蔽socket 实例化时，握手阶段报错信息WebSocket connection to ‘***‘ failed

事情起因是这样的&#xff1a; 我们网站是需要socket链接实行实时推送服务&#xff0c;有恶意竞争对手通过抓包或者断网&#xff0c;获取到了我们的socket链接地址&#xff0c;那么他就可以通过java写一个脚本无限链接这个socket地址。形成dos攻击。使socket服务器资源耗尽&…
阅读更多...
寻路算法小游戏

寻路算法小游戏

寻路算法小demo 寻路算法有两种&#xff0c;一种是dfs 深度优先算法&#xff0c;一种是 dfs 深度优先算法 深度优先搜索的步骤分为 1.递归下去 2.回溯上来。顾名思义&#xff0c;深度优先&#xff0c;则是以深度为准则&#xff0c;先一条路走到底&#xff0c;直到达到目标。这…
阅读更多...
numpy与matplotlib 常用日常代码

numpy与matplotlib 常用日常代码

matplotlab 和 numpy 可能是python 数据处理工作中用的最多的库了&#xff0c; 官网的文档十分详细&#xff0c;但是就是因为数量庞大&#xff0c;很多时候常用的功能和生僻冷门的功能混在一起&#xff0c;找不到重点。按照二八原则&#xff0c;掌握20%的功能就已经能应付绝大多…
阅读更多...
python爬虫——爬取天气预报信息

python爬虫——爬取天气预报信息

在本文中&#xff0c;我们将学习如何使用代理IP爬取天气预报信息。我们将使用 Python 编写程序&#xff0c;并使用 requests 和 BeautifulSoup 库来获取和解析 HTML。此外&#xff0c;我们还将使用代理服务器来隐藏我们的 IP 地址&#xff0c;以避免被目标网站封禁。 1. 安装必…
阅读更多...
vue上传图片并修改png图片颜色

vue上传图片并修改png图片颜色

场景 当涉及到在 Vue 中上传图片并修改 PNG 图片的颜色时&#xff0c;这个任务涵盖了文件上传、图像处理、Canvas 操作等多个方面 在现代 Web 开发中&#xff0c;图片的处理是常见的需求之一。本文将带您深入探讨如何使用 Vue.js 来实现图片上传&#xff0c;并在客户端使用 Can…
阅读更多...
小航助学Python编程NOC模拟卷（第1套）（含题库答题软件账号）

小航助学Python编程NOC模拟卷（第1套）（含题库答题软件账号）

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;_程序猿下山的博客-CSDN博客 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;_程序猿下山的博客-CSD…
阅读更多...
【springboot】mongoTemplate增删改查操作

【springboot】mongoTemplate增删改查操作

目录 一、代码示例1.1 pom依赖1.2 application配置1.3 controller1.4 service 二、截图示例2.1 新增2.2 修改2.3 详情2.4 分页2.5 删除 一、代码示例 1.1 pom依赖 <!-- mongodb --> <dependency><groupId>org.springframework.boot</groupId><art…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站