|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>人力资源管理系统</title>
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<script>
|
|
|
tailwind.config = {
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
primary: '#2D5CF6',
|
|
|
secondary: '#F5F6FA'
|
|
|
},
|
|
|
borderRadius: {
|
|
|
'none': '0px',
|
|
|
'sm': '2px',
|
|
|
DEFAULT: '4px',
|
|
|
'md': '8px',
|
|
|
'lg': '12px',
|
|
|
'xl': '16px',
|
|
|
'2xl': '20px',
|
|
|
'3xl': '24px',
|
|
|
'full': '9999px',
|
|
|
'button': '4px'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
.font-logo {
|
|
|
font-family: "Pacifico", serif;
|
|
|
}
|
|
|
|
|
|
.fa-icon {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
input[type="number"]::-webkit-outer-spin-button,
|
|
|
input[type="number"]::-webkit-inner-spin-button {
|
|
|
-webkit-appearance: none;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
input[type="number"] {
|
|
|
-moz-appearance: textfield;
|
|
|
}
|
|
|
|
|
|
.org-node {
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.org-node:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
|
|
|
.marquee {
|
|
|
animation: marquee 20s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes marquee {
|
|
|
0% {
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body class="bg-gray-50 min-h-[1024px] flex flex-col">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<!-- <header class="bg-primary text-white shadow-md fixed top-0 left-0 right-0 z-50">
|
|
|
<div class="container mx-auto px-4 h-16 flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<div class="font-logo text-2xl mr-10">人力</div>
|
|
|
<nav class="hidden md:flex space-x-6">
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">多维统计</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">人员管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">组织管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">考勤管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">绩效管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">薪酬管理</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">知识库</a>
|
|
|
<a href="#" class="text-sm hover:text-gray-200 transition">后台管理</a>
|
|
|
</nav>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="relative hidden md:block">
|
|
|
<input type="text" placeholder="搜索..."
|
|
|
class="bg-white text-gray-800 text-sm rounded-button pl-3 pr-8 py-1 w-40 focus:outline-none focus:ring-2 focus:ring-blue-300">
|
|
|
<i
|
|
|
class="fas fa-search absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 fa-icon w-4 h-4"></i>
|
|
|
</div>
|
|
|
<div class="relative">
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=professional20asian20business20woman20portrait20with20white20background20high20quality20photorealistic20detailed20facial20features20corporate20attire&width=40&height=40&orientation=squarish&flag=eb8362eb2348067d24cec632e6a759b0"
|
|
|
alt="用户头像" class="w-8 h-8 rounded-full object-cover cursor-pointer">
|
|
|
</div>
|
|
|
<button
|
|
|
class="bg-white text-primary text-sm px-3 py-1 rounded-button flex items-center space-x-1 hover:bg-gray-100 transition">
|
|
|
<i class="fas fa-robot fa-icon w-4 h-4"></i>
|
|
|
<span>AI助手</span>
|
|
|
</button>
|
|
|
<button class="md:hidden text-white">
|
|
|
<i class="fas fa-bars fa-icon w-6 h-6"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header> -->
|
|
|
<!-- 主要内容区 -->
|
|
|
<main class="flex-grow container mx-auto px-4 mb-8">
|
|
|
<!-- 公告栏 -->
|
|
|
<div class="bg-white rounded-md shadow-sm p-3 mb-6 overflow-hidden">
|
|
|
<div class="flex items-center">
|
|
|
<div
|
|
|
class="bg-yellow-100 text-yellow-800 rounded-md px-2 py-1 text-xs font-medium mr-3 whitespace-nowrap">
|
|
|
<i class="fas fa-bullhorn fa-icon w-3 h-3 mr-1"></i>
|
|
|
公告
|
|
|
</div>
|
|
|
<div class="overflow-hidden">
|
|
|
<div class="marquee whitespace-nowrap">
|
|
|
<span class="text-sm mr-8">2023年度绩效考核方案已发布，请各部门负责人及时查阅</span>
|
|
|
<span class="text-sm mr-8">系统将于2023年12月25日00:00-06:00进行升级维护</span>
|
|
|
<span class="text-sm mr-8">新员工入职培训计划已更新，请相关人员注意查收邮件</span>
|
|
|
<span class="text-sm">年度优秀员工评选活动正式启动，详情请见内网公告</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 内容主体 -->
|
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
|
<!-- 左侧组织架构树 -->
|
|
|
<div class="w-full md:w-1/5 bg-white rounded-md shadow-sm p-4">
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
|
<h2 class="text-lg font-medium">组织架构</h2>
|
|
|
<button class="text-primary text-sm">
|
|
|
<i class="fas fa-sync-alt fa-icon w-4 h-4"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="space-y-1">
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-building fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">集团公司</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-400"></i>
|
|
|
</div>
|
|
|
<div class="ml-6 space-y-1">
|
|
|
<div
|
|
|
class="org-node bg-secondary p-2 rounded-md cursor-pointer flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">行政中心</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-400"></i>
|
|
|
</div>
|
|
|
<div class="ml-6 space-y-1">
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-users fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">人力资源部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-file-invoice-dollar fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">财务部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-laptop fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">IT部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="org-node bg-secondary p-2 rounded-md cursor-pointer flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">营销中心</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-400"></i>
|
|
|
</div>
|
|
|
<div class="ml-6 space-y-1">
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-chart-line fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">市场部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-shopping-cart fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">销售部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-headset fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">客户服务部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="org-node bg-secondary p-2 rounded-md cursor-pointer flex items-center justify-between">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-sitemap fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">研发中心</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3 text-gray-400"></i>
|
|
|
</div>
|
|
|
<div class="ml-6 space-y-1">
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-code fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">前端开发部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-database fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">后端开发部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="org-node bg-secondary p-2 rounded-md cursor-pointer">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fas fa-mobile-alt fa-icon w-4 h-4 mr-2 text-gray-500"></i>
|
|
|
<span class="text-sm">移动开发部</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右侧内容区 -->
|
|
|
<div class="w-full md:w-4/5">
|
|
|
<!-- 筛选区域 -->
|
|
|
<div class="bg-white rounded-md shadow-sm p-4 mb-6">
|
|
|
<div class="flex items-center justify-between">
|
|
|
<h2 class="text-lg font-medium">组织架构详情</h2>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="flex items-center">
|
|
|
<span class="text-sm text-gray-600 mr-2">年份:</span>
|
|
|
<div class="relative">
|
|
|
<button
|
|
|
class="bg-secondary text-gray-700 text-sm px-3 py-1 rounded-button flex items-center space-x-1">
|
|
|
<span>2023</span>
|
|
|
<i class="fas fa-chevron-down fa-icon w-3 h-3"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
class="bg-primary text-white text-sm px-3 py-1 rounded-button flex items-center space-x-1 hover:bg-blue-600 transition">
|
|
|
<i class="fas fa-download fa-icon w-4 h-4"></i>
|
|
|
<span>导出</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 组织架构树 -->
|
|
|
<div class="bg-white rounded-md shadow-sm p-6">
|
|
|
<div class="org-tree">
|
|
|
<div class="org-level-1 flex flex-col items-center">
|
|
|
<div class="org-node bg-primary text-white p-3 rounded-md shadow-md mb-4 w-48 text-center">
|
|
|
<h3 class="font-medium">集团公司</h3>
|
|
|
<p class="text-xs opacity-80">1,284人</p>
|
|
|
</div>
|
|
|
<div class="flex space-x-8">
|
|
|
<div class="org-level-2 flex flex-col items-center">
|
|
|
<div class="org-node bg-blue-100 p-3 rounded-md shadow-sm mb-4 w-40 text-center">
|
|
|
<h4 class="font-medium">行政中心</h4>
|
|
|
<p class="text-xs text-gray-600">356人</p>
|
|
|
</div>
|
|
|
<div class="flex space-x-6">
|
|
|
<div class="org-level-3 flex flex-col items-center">
|
|
|
<div class="org-node bg-blue-50 p-2 rounded-md mb-3 w-32 text-center">
|
|
|
<h5 class="text-sm">人力资源部</h5>
|
|
|
<p class="text-xs text-gray-500">45人</p>
|
|
|
</div>
|
|
|
<div class="org-node bg-blue-50 p-2 rounded-md mb-3 w-32 text-center">
|
|
|
<h5 class="text-sm">财务部</h5>
|
|
|
<p class="text-xs text-gray-500">32人</p>
|
|
|
</div>
|
|
|
<div class="org-node bg-blue-50 p-2 rounded-md w-32 text-center">
|
|
|
<h5 class="text-sm">IT部</h5>
|
|
|
<p class="text-xs text-gray-500">28人</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="org-level-2 flex flex-col items-center">
|
|
|
<div class="org-node bg-blue-100 p-3 rounded-md shadow-sm mb-4 w-40 text-center">
|
|
|
<h4 class="font-medium">营销中心</h4>
|
|
|
<p class="text-xs text-gray-600">268人</p>
|
|
|
</div>
|
|
|
<div class="flex space-x-6">
|
|
|
<div class="org-level-3 flex flex-col items-center">
|
|
|
<div class="org-node bg-blue-50 p-2 rounded-md mb-3 w-32 text-center">
|
|
|
<h5 class="text-sm">市场部</h5>
|
|
|
<p class="text-xs text-gray-500">86人</p>
|
|
|
</div>
|
|
|
<div class="org-node bg-blue-50 p-2 rounded-md mb-3 w-32 text-center">
|
|
|
<h5 class="text-sm">销售部</h5>
|
|
|
<p class="text-xs text-gray-500">124人</p>
|
|
|
</div>
|
|
|
<div class="org-node bg-blue-50 p-2 rounded-md w-32 text-center">
|
|
|
<h5 class="text-sm">客户服务部</h5>
|
|
|
<p class="text-xs text-gray-500">58人</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="org-level-2 flex flex-col items-center">
|
|
|
<div class="org-node bg-blue-100 p-3 rounded-md shadow-sm mb-4 w-40 text-center">
|
|
|
<h4 class="font-medium">研发中心</h4>
|
|
|
<p class="text-xs text-gray-600">232人</p>
|
|
|
</div>
|
|
|
<div class="flex space-x-6">
|
|
|
<div class="org-level-3 flex flex-col items-center">
|
|
|
<div class="org-node bg-blue-50 p-2 rounded-md mb-3 w-32 text-center">
|
|
|
<h5 class="text-sm">前端开发部</h5>
|
|
|
<p class="text-xs text-gray-500">76人</p>
|
|
|
</div>
|
|
|
<div class="org-node bg-blue-50 p-2 rounded-md mb-3 w-32 text-center">
|
|
|
<h5 class="text-sm">后端开发部</h5>
|
|
|
<p class="text-xs text-gray-500">92人</p>
|
|
|
</div>
|
|
|
<div class="org-node bg-blue-50 p-2 rounded-md w-32 text-center">
|
|
|
<h5 class="text-sm">移动开发部</h5>
|
|
|
<p class="text-xs text-gray-500">64人</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 部门统计 -->
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
|
|
<div class="bg-secondary rounded-md p-4">
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
<h3 class="text-sm font-medium text-gray-600">部门总数</h3>
|
|
|
<i class="fas fa-sitemap fa-icon w-5 h-5 text-primary"></i>
|
|
|
</div>
|
|
|
<div class="text-2xl font-bold">24</div>
|
|
|
<div class="text-xs text-gray-500 mt-1">较上月增加2个</div>
|
|
|
</div>
|
|
|
<div class="bg-secondary rounded-md p-4">
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
<h3 class="text-sm font-medium text-gray-600">员工总数</h3>
|
|
|
<i class="fas fa-users fa-icon w-5 h-5 text-primary"></i>
|
|
|
</div>
|
|
|
<div class="text-2xl font-bold">1,284</div>
|
|
|
<div class="text-xs text-gray-500 mt-1">较上月增加56人</div>
|
|
|
</div>
|
|
|
<div class="bg-secondary rounded-md p-4">
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
<h3 class="text-sm font-medium text-gray-600">平均在职时长</h3>
|
|
|
<i class="fas fa-clock fa-icon w-5 h-5 text-primary"></i>
|
|
|
</div>
|
|
|
<div class="text-2xl font-bold">3.2年</div>
|
|
|
<div class="text-xs text-gray-500 mt-1">较上月增加0.1年</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 部门人员分布 -->
|
|
|
<div class="mt-8">
|
|
|
<h3 class="text-lg font-medium mb-4">各部门人员分布</h3>
|
|
|
<div class="bg-secondary rounded-md p-4 h-64">
|
|
|
<div id="departmentChart" class="w-full h-full"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
<!-- 底部通栏 -->
|
|
|
<footer class="bg-gray-800 text-white py-8">
|
|
|
<div class="container mx-auto px-4">
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium mb-4">关于我们</h3>
|
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
|
<li><a href="#" class="hover:text-white transition">公司简介</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">发展历程</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">企业文化</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">联系我们</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium mb-4">产品服务</h3>
|
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
|
<li><a href="#" class="hover:text-white transition">人力资源系统</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">考勤管理系统</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">绩效评估系统</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">薪酬管理系统</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium mb-4">帮助中心</h3>
|
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
|
<li><a href="#" class="hover:text-white transition">使用手册</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">常见问题</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">视频教程</a></li>
|
|
|
<li><a href="#" class="hover:text-white transition">在线客服</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-medium mb-4">联系我们</h3>
|
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
|
<li class="flex items-start">
|
|
|
<i class="fas fa-map-marker-alt fa-icon w-3 h-3 mt-0.5 mr-2"></i>
|
|
|
<span>北京市海淀区中关村南大街5号</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-phone-alt fa-icon w-3 h-3 mr-2"></i>
|
|
|
<span>400-888-8888</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-envelope fa-icon w-3 h-3 mr-2"></i>
|
|
|
<span>hr@company.com</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-clock fa-icon w-3 h-3 mr-2"></i>
|
|
|
<span>周一至周五 9:00-18:00</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-xs text-gray-400">
|
|
|
<p>© 2023 人力资源管理系统 版权所有 | 京ICP备12345678号-1 | 京公网安备11010802012345号</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
|
|
|
<script>
|
|
|
// 初始化部门人员分布图表
|
|
|
const departmentChart = echarts.init(document.getElementById('departmentChart'));
|
|
|
const departmentOption = {
|
|
|
animation: false,
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
|
right: '4%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
color: '#e5e7eb'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'category',
|
|
|
data: ['人力资源部', '财务部', 'IT部', '市场部', '销售部', '客户服务部', '前端开发部', '后端开发部', '移动开发部'],
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '人数',
|
|
|
type: 'bar',
|
|
|
data: [45, 32, 28, 86, 124, 58, 76, 92, 64],
|
|
|
itemStyle: {
|
|
|
color: '#2D5CF6',
|
|
|
borderRadius: [0, 4, 4, 0]
|
|
|
},
|
|
|
barWidth: 12
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
departmentChart.setOption(departmentOption);
|
|
|
// 响应式调整图表大小
|
|
|
window.addEventListener('resize', function () {
|
|
|
departmentChart.resize();
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
