<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据中心｜完整版</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
body{background:#F7F9FC;color:#1D2939;}
.wrap{display:flex;min-height:100vh;}
/*侧边模拟*/
.sidebar{width:220px;background:#fff;border-right:1px solid #E4E7EC;padding:20px 0;flex-shrink:0;}
.sidebar-item{padding:10px 20px;cursor:pointer;color:#475467;}
.sidebar-item.active{background:#EFF4FF;color:#165DFF;border-right:3px solid #165DFF;}
.main{flex:1;padding:24px;}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px;}
.page-title h2{font-size:20px;font-weight:600;margin-bottom:4px;}
.page-title span{color:#667085;font-size:13px;}
/*顶部tab切换 网站数据 / 用户数据 / 资源数据 */
.top-tab-group{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}
.top-tab{
padding:8px 18px;
border-radius:8px;
border:1px solid #D0D5DD;
background:#ffffff;
cursor:pointer;
user-select:none;
white-space:nowrap;
}
.top-tab.active{
background:#165DFF;
color:#fff;
border-color:#165DFF;
}
.filter-group{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.filter-btn{padding:7px 14px;border-radius:8px;border:1px solid #D0D5DD;background:#fff;cursor:pointer;user-select:none;white-space:nowrap;}
.filter-btn.active{background:#165DFF;color:#fff;border-color:#165DFF;}
/*指标卡片 右上角圆形图标*/
.card-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
gap:16px;
margin-bottom:20px;
}
.stat-card{
background:#ffffff;
border-radius:14px;
padding:18px;
border:1px solid #E4E7EC;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
position:relative;
}
.card-icon-wrap{
width:34px;height:34px;
border-radius:50%;
background:#F2F4F7;
display:flex;align-items:center;justify-content:center;
position:absolute;
top:14px;right:14px;
}
.card-icon-wrap svg{width:18px;height:18px;stroke:#165DFF;stroke-width:2;fill:none;}
.stat-card .label{color:#667085;font-size:13px;margin-bottom:6px;}
.stat-card .num{font-size:24px;font-weight:600;margin-bottom:4px;}
.trend-up{color:#039855;display:flex;align-items:center;gap:4px;}
.trend-down{color:#D92D20;display:flex;align-items:center;gap:4px;}
/*图表容器*/
.chart-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(420px,1fr));
gap:18px;
margin-bottom:20px;
}
.chart-wrap{
background:#fff;
border-radius:14px;
border:1px solid #E4E7EC;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
padding:18px;
margin-bottom:18px;
}
.chart-wrap h4{font-size:15px;font-weight:600;margin-bottom:14px;}
.chart-box{width:100%;height:280px;}
/*排行卡片*/
.rank-wrap{
background:#fff;
border-radius:14px;
border:1px solid #E4E7EC;
padding:18px;
}
.rank-item{
display:flex;justify-content:space-between;align-items:center;
padding:10px 0;
border-bottom:1px solid #F2F4F7;
}
.rank-item:last-child{border-bottom:none;}
.rank-num{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:500;}
.r1{background:#FFF3E0;color:#E67E22;}
.r2{background:#F2F2F2;color:#777;}
.r3{background:#F5EBE0;color:#A0522D;}
.r-other{background:#F7F9FC;color:#667085;}
/*tab内容区域 默认隐藏，active显示*/
.tab-panel{display:none;}
.tab-panel.active{display:block;}
/*访问日志表格*/
.table-wrap{
background:#ffffff;
border-radius:14px;
border:1px solid #E4E7EC;
padding:18px;
margin-bottom:18px;
}
.table-wrap h4{font-size:15px;font-weight:600;margin-bottom:14px;}
.ip-table{
width:100%;
border-collapse:collapse;
}
.ip-table th{
background:#F7F9FC;
text-align:left;
padding:14px 10px;
font-weight:500;
color:#475467;
font-size:13px;
}
.ip-table td{
padding:14px 10px;
border-bottom:1px solid #F2F4F7;
font-size:13px;
color:#1D2939;
}
.ip-table tr:hover{background:#F9FAFB;}
.tag-in{color:#00B468;background:#ECFDF3;padding:2px 8px;border-radius:4px;}
.tag-out{color:#D92D20;background:#FEF3F2;padding:2px 8px;border-radius:4px;}
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">
<div class="sidebar-item active">数据中心</div>
<div class="sidebar-item">我的资源</div>
<div class="sidebar-item">合集管理</div>
<div class="sidebar-item">分享管理</div>
</div>
<div class="main">
<div class="page-header">
<div class="page-title">
<h2>数据中心</h2>
<span>当前范围：全部</span>
</div>
<div class="filter-group">
<div class="filter-btn active">全部</div>
<div class="filter-btn">本月</div>
<div class="filter-btn">近7天</div>
<div class="filter-btn">近30天</div>
</div>
</div>
<!--顶部切换tab：网站数据 / 用户数据 / 资源数据-->
<div class="top-tab-group">
<div class="top-tab active" data-tab="site">网站数据</div>
<div class="top-tab" data-tab="user">用户数据</div>
<div class="top-tab" data-tab="resource">资源数据</div>
</div>
<!-- ========== 网站数据面板 ========== -->
<div class="tab-panel active" id="panel-site">
<div class="card-grid">
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M3 12h18M12 3v18"></path></svg></div>
<div class="label">今日访问</div>
<div class="num">128</div>
<div class="trend-up">↑ 环比 +12%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16"></path></svg></div>
<div class="label">总访问量</div>
<div class="num">5620</div>
<div class="trend-up">↑ 环比 +8%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg></div>
<div class="label">总存储占用</div>
<div class="num">28.6GB</div>
<div class="trend-up">↑ 环比 +5%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M13 2l9 9-9 9M3 13h14"></path></svg></div>
<div class="label">本地磁盘占用</div>
<div class="num">16.2GB</div>
<div class="trend-up">↑ 环比 +4%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M13 2l9 9-9 9M3 13h14"></path></svg></div>
<div class="label">OSS存储占用</div>
<div class="num">12.4GB</div>
<div class="trend-up">↑ 环比 +7%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M13 2l9 9-9 9M3 13h14"></path></svg></div>
<div class="label">分享链接总数</div>
<div class="num">216</div>
<div class="trend-down">↓ 环比 2%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M13 2l9 9-9 9M3 13h14"></path></svg></div>
<div class="label">已失效分享</div>
<div class="num">42</div>
<div class="trend-up">↑ 环比 +3</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M13 2l9 9-9 9M3 13h14"></path></svg></div>
<div class="label">合集总数量</div>
<div class="num">68</div>
<div class="trend-up">↑ 环比 +9%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M13 2l9 9-9 9M3 13h14"></path></svg></div>
<div class="label">协同会话总数</div>
<div class="num">34</div>
<div class="trend-up">↑ 环比 +14%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M13 2l9 9-9 9M3 13h14"></path></svg></div>
<div class="label">待处理切片任务</div>
<div class="num">5</div>
<div class="trend-down">↓ 环比 2</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M13 2l9 9-9 9M3 13h14"></path></svg></div>
<div class="label">上传失败任务</div>
<div class="num">2</div>
<div class="trend-up">↑ 环比 +1</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M13 2l9 9-9 9M3 13h14"></path></svg></div>
<div class="label">访客匿名访问</div>
<div class="num">742</div>
<div class="trend-up">↑ 环比 +6%</div>
</div>
</div>
<div class="chart-wrap">
<div style="display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;">
<div>
<h4>网站访问趋势</h4>
<span style="color:#667085;font-weight:400">访问量走势</span>
</div>
<div class="filter-group">
<div class="filter-btn active">近12个月</div>
<div class="filter-btn">近6个月</div>
<div class="filter-btn">近3个月</div>
<div class="filter-btn">近30天</div>
</div>
</div>
<div class="chart-box" id="chartVisit"></div>
</div>
<div class="chart-grid">
<div class="chart-wrap">
<h4>存储占用分布</h4>
<div class="chart-box" id="chartStorageRing"></div>
</div>
<div class="chart-wrap">
<h4>分享链接状态统计</h4>
<div class="chart-box" id="chartShareBar"></div>
</div>
</div>
</div>
<!-- ========== 用户数据面板 ========== -->
<div class="tab-panel" id="panel-user">
<div class="card-grid">
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg></div>
<div class="label">总用户数</div>
<div class="num">326</div>
<div class="trend-up">↑ 环比 +10%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg></div>
<div class="label">今日新增用户</div>
<div class="num">12</div>
<div class="trend-up">↑ 环比 +15%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg></div>
<div class="label">活跃用户</div>
<div class="num">89</div>
<div class="trend-down">↓ 环比 3%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg></div>
<div class="label">待审核用户</div>
<div class="num">7</div>
<div class="trend-up">↑ 环比 +2</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg></div>
<div class="label">禁用用户</div>
<div class="num">11</div>
<div class="trend-up">↑ 环比 +1</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg></div>
<div class="label">好友总数量</div>
<div class="num">142</div>
<div class="trend-up">↑ 环比 +13%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg></div>
<div class="label">待处理好友申请</div>
<div class="num">9</div>
<div class="trend-up">↑ 环比 +4</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle></svg></div>
<div class="label">未读消息总数</div>
<div class="num">27</div>
<div class="trend-down">↓ 环比 5</div>
</div>
</div>
<div class="chart-wrap">
<h4>用户增长趋势</h4>
<div class="chart-box" id="chartUser"></div>
</div>
<div class="chart-grid">
<div class="chart-wrap">
<h4>用户角色分布</h4>
<div class="chart-box" id="chartUserRole"></div>
</div>
<div class="chart-wrap">
<h4>用户存储空间占用排行Top8</h4>
<div class="chart-box" id="chartUserStorage"></div>
</div>
<!--新增两张图表：访问地区分布、国内外IP占比-->
<div class="chart-wrap">
<h4>访问IP地区分布</h4>
<div class="chart-box" id="chartIpArea"></div>
</div>
<div class="chart-wrap">
<h4>国内 / 海外IP访问占比</h4>
<div class="chart-box" id="chartIpInOut"></div>
</div>
</div>
<!--IP访问明细表格-->
<div class="table-wrap">
<h4>IP访问明细日志</h4>
<table class="ip-table">
<thead>
<tr>
<th>公网IP地址</th>
<th>归属地区</th>
<th>访问类型</th>
<th>访问时间</th>
<th>页面停留时长</th>
<th>访问终端</th>
</tr>
</thead>
<tbody>
<tr>
<td>113.xx.xx.124</td>
<td>湖北武汉</td>
<td><span class="tag-in">国内</span></td>
<td>2026‑08‑12 09:42:11</td>
<td>216秒</td>
<td>PC浏览器</td>
</tr>
<tr>
<td>45.xx.xx.78</td>
<td>加拿大温哥华</td>
<td><span class="tag-out">海外</span></td>
<td>2026‑08‑12 08:12:33</td>
<td>143秒</td>
<td>PC浏览器</td>
</tr>
<tr>
<td>120.xx.xx.221</td>
<td>广东广州</td>
<td><span class="tag-in">国内</span></td>
<td>2026‑08‑12 07:33:54</td>
<td>87秒</td>
<td>手机端</td>
</tr>
<tr>
<td>103.xx.xx.55</td>
<td>新加坡</td>
<td><span class="tag-out">海外</span></td>
<td>2026‑08‑12 06:21:17</td>
<td>322秒</td>
<td>PC浏览器</td>
</tr>
<tr>
<td>221.xx.xx.91</td>
<td>上海</td>
<td><span class="tag-in">国内</span></td>
<td>2026‑08‑12 05:11:42</td>
<td>64秒</td>
<td>PC浏览器</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ========== 资源数据面板 ========== -->
<div class="tab-panel" id="panel-resource">
<div class="card-grid">
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 4v16M8 8l4-4 4 4"></path></svg></div>
<div class="label">总资源数量</div>
<div class="num">1246</div>
<div class="trend-up">↑ 环比 +12%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 4v16M8 8l4-4 4 4"></path></svg></div>
<div class="label">今日上传</div>
<div class="num">36</div>
<div class="trend-up">↑ 环比 +8%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg></div>
<div class="label">总浏览次数</div>
<div class="num">8620</div>
<div class="trend-up">↑ 环比 +6%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16"></path></svg></div>
<div class="label">总下载次数</div>
<div class="num">2410</div>
<div class="trend-down">↓ 环比 1%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 4v16M8 8l4-4 4 4"></path></svg></div>
<div class="label">已禁用资源</div>
<div class="num">23</div>
<div class="trend-up">↑ 环比 +2</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 4v16M8 8l4-4 4 4"></path></svg></div>
<div class="label">切片完成资源</div>
<div class="num">1082</div>
<div class="trend-up">↑ 环比 +11%</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 4v16M8 8l4-4 4 4"></path></svg></div>
<div class="label">待切片资源</div>
<div class="num">127</div>
<div class="trend-down">↓ 环比 8</div>
</div>
<div class="stat-card">
<div class="card-icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 4v16M8 8l4-4 4 4"></path></svg></div>
<div class="label">资源分类总数</div>
<div class="num">36</div>
<div class="trend-up">↑ 环比 +3</div>
</div>
</div>
<div class="chart-grid">
<div class="chart-wrap">
<h4>文件格式分布</h4>
<div class="chart-box" id="chartFileRing"></div>
</div>
<div class="chart-wrap">
<h4>文件大小区间分布</h4>
<div class="chart-box" id="chartFileBar"></div>
</div>
<div class="chart-wrap">
<h4>各分类资源数量统计</h4>
<div class="chart-box" id="chartCategoryBar"></div>
</div>
<div class="chart-wrap">
<h4>资源上传时间趋势</h4>
<div class="chart-box" id="chartUploadTrend"></div>
</div>
</div>
<div class="chart-grid">
<div class="rank-wrap">
<h4 style="margin-bottom:14px">访问排行 Top6</h4>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r1">1</div><span>样本A.svs</span></div>
<span>216次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r2">2</div><span>样本B.tif</span></div>
<span>182次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r3">3</div><span>样本C.svs</span></div>
<span>144次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r-other">4</div><span>样本D</span></div>
<span>117次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r-other">5</div><span>样本E</span></div>
<span>93次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r-other">6</div><span>样本F</span></div>
<span>71次</span>
</div>
</div>
<div class="rank-wrap">
<h4 style="margin-bottom:14px">下载排行 Top6</h4>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r1">1</div><span>样本A.svs</span></div>
<span>124次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r2">2</div><span>样本B.tif</span></div>
<span>101次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r3">3</div><span>样本C.svs</span></div>
<span>86次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r-other">4</div><span>样本D</span></div>
<span>62次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r-other">5</div><span>样本E</span></div>
<span>48次</span>
</div>
<div class="rank-item">
<div style="display:flex;gap:10px;align-items:center;"><div class="rank-num r-other">6</div><span>样本F</span></div>
<span>33次</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//顶部tab切换逻辑
const tabs = document.querySelectorAll('.top-tab');
const panels = document.querySelectorAll('.tab-panel');
tabs.forEach(tab=>{
tab.addEventListener('click',()=>{
const key = tab.dataset.tab;
tabs.forEach(t=>t.classList.remove('active'));
panels.forEach(p=>p.classList.remove('active'));
tab.classList.add('active');
document.getElementById('panel-'+key).classList.add('active');
//切换后重绘图表防止图表不渲染
setTimeout(()=>{
window.dispatchEvent(new Event('resize'));
},50);
})
})
//网站访问趋势
let chartVisit = echarts.init(document.getElementById('chartVisit'));
chartVisit.setOption({
tooltip:{trigger:'axis',backgroundColor:'#fff',textStyle:{color:'#1D2939'},borderColor:'#E4E7EC'},
grid:{left:12,right:12,top:24,bottom:24},
xAxis:{
type:'category',
boundaryGap:false,
data:['2025‑09','2025‑10','2025‑11','2025‑12','2026‑01','2026‑02','2026‑03','2026‑04','2026‑05','2026‑06','2026‑07','2026‑08'],
axisLine:{lineStyle:{color:'#E4E7EC'}},
axisLabel:{color:'#667085',fontSize:11}
},
yAxis:{
type:'value',
splitLine:{lineStyle:{color:'#F2F4F7'}},
axisLabel:{color:'#667085',fontSize:11}
},
series:[{
name:'访问量',
type:'line',
smooth:true,
symbol:'circle',symbolSize:6,
areaStyle:{color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgba(22,93,255,0.2)'},{offset:1,color:'rgba(22,93,255,0.03)'}]}},
lineStyle:{color:'#165DFF',width:2.5},
itemStyle:{color:'#165DFF'},
data:[120,220,180,260,310,290,350,410,380,450,520,560]
}]
})
//存储分布环形
let chartStorageRing = echarts.init(document.getElementById('chartStorageRing'));
chartStorageRing.setOption({
tooltip:{trigger:'item'},
legend:{bottom:4,left:'center',textStyle:{fontSize:12,color:'#475467'}},
series:[{
type:'pie',
radius:['62%','74%'],
center:['50%','44%'],
avoidLabelOverlap:true,
itemStyle:{borderRadius:6},
label:{show:false},
emphasis:{label:{show:true,fontSize:14,fontWeight:500}},
data:[
{name:'本地磁盘',value:16.2,color:'#165DFF'},
{name:'OSS对象存储',value:12.4,color:'#00B468'}
]
}]
})
//分享状态柱状
let chartShareBar = echarts.init(document.getElementById('chartShareBar'));
chartShareBar.setOption({
tooltip:{trigger:'axis'},
grid:{left:12,right:12,top:12,bottom:24},
xAxis:{type:'category',data:['有效分享','已失效分享'],axisLabel:{color:'#667085'}},
yAxis:{type:'value',splitLine:{lineStyle:{color:'#F2F4F7'}}},
series:[{type:'bar',barWidth:24,itemStyle:{borderRadius:[4,4,0,0],color:'#165DFF'},data:[174,42]}]
})
//用户增长图表
let chartUser = echarts.init(document.getElementById('chartUser'));
chartUser.setOption({
tooltip:{trigger:'axis'},
grid:{left:12,right:12,top:12,bottom:24},
xAxis:{
type:'category',
data:['2025‑09','2025‑10','2025‑11','2025‑12','2026‑01','2026‑02','2026‑03','2026‑04','2026‑05','2026‑06','2026‑07','2026‑08'],
axisLine:{lineStyle:{color:'#E4E7EC'}},
axisLabel:{color:'#667085',fontSize:11}
},
yAxis:{type:'value',splitLine:{lineStyle:{color:'#F2F4F7'}}},
series:[{
name:'新增用户',
type:'bar',
barWidth:14,
itemStyle:{color:'#00B468',borderRadius:[4,4,0,0]},
data:[8,14,11,16,22,18,24,27,21,26,30,32]
}]
})
//用户角色分布
let chartUserRole = echarts.init(document.getElementById('chartUserRole'));
chartUserRole.setOption({
tooltip:{trigger:'item'},
legend:{bottom:4,left:'center'},
series:[{
type:'pie',radius:['55%','68%'],itemStyle:{borderRadius:6},
data:[
{name:'普通用户',value:242,color:'#165DFF'},
{name:'医生',value:58,color:'#00B468'},
{name:'管理员',value:16,color:'#FF9500'},
{name:'访客账号',value:10,color:'#86909C'}
]
}]
})
//用户存储排行
let chartUserStorage = echarts.init(document.getElementById('chartUserStorage'));
chartUserStorage.setOption({
tooltip:{trigger:'axis'},
grid:{left:60,right:12,top:12,bottom:24},
xAxis:{type:'value'},
yAxis:{type:'category',data:['用户H','用户G','用户F','用户E','用户D','用户C','用户B','用户A']},
series:[{type:'bar',itemStyle:{color:'#165DFF',borderRadius:[0,6,6,0]},data:[1.2,1.5,1.8,2.1,2.4,2.7,3.1,4.2]}]
})
//====新增：IP访问地区分布饼图====
let chartIpArea = echarts.init(document.getElementById('chartIpArea'));
chartIpArea.setOption({
tooltip:{trigger:'item'},
legend:{bottom:4,left:'center',textStyle:{fontSize:12}},
series:[{
type:'pie',
radius:'65%',
itemStyle:{borderRadius:6},
data:[
{name:'湖北',value:210,color:'#165DFF'},
{name:'广东',value:132,color:'#00B468'},
{name:'上海',value:96,color:'#FF9500'},
{name:'北京',value:81,color:'#7B61FF'},
{name:'其他国内省份',value:245,color:'#36CFC9'},
{name:'海外地区',value:128,color:'#F53F3F'}
]
}]
})
//====新增：国内海外细环形图====
let chartIpInOut = echarts.init(document.getElementById('chartIpInOut'));
chartIpInOut.setOption({
tooltip:{trigger:'item'},
legend:{bottom:4,left:'center'},
series:[{
type:'pie',
radius:['60%','73%'],
itemStyle:{borderRadius:6},
data:[
{name:'国内IP访问',value:764,color:'#00B468'},
{name:'海外IP访问',value:148,color:'#F53F3F'}
]
}]
})
//细环形图 文件格式
let chartFileRing = echarts.init(document.getElementById('chartFileRing'));
chartFileRing.setOption({
tooltip:{trigger:'item'},
legend:{bottom:4,left:'center',textStyle:{fontSize:12,color:'#475467'}},
series:[{
type:'pie',
radius:['62%','74%'],
center:['50%','44%'],
avoidLabelOverlap:true,
itemStyle:{borderRadius:6},
label:{show:false},
emphasis:{label:{show:true,fontSize:14,fontWeight:500}},
data:[
{name:'SVS',value:420,color:'#165DFF'},
{name:'TIF',value:360,color:'#00B468'},
{name:'NDPI',value:280,color:'#FF9500'},
{name:'其他格式',value:186,color:'#86909C'}
]
}]
})
//圆角柱状图 文件大小分布
let chartFileBar = echarts.init(document.getElementById('chartFileBar'));
chartFileBar.setOption({
tooltip:{trigger:'axis'},
grid:{left:12,right:12,top:12,bottom:24},
xAxis:{type:'value',splitLine:{lineStyle:{color:'#F2F4F7'}},axisLabel:{color:'#667085',fontSize:11}},
yAxis:{
type:'category',
data:['0‑10MB','10‑50MB','50‑100MB','100‑500MB','500MB+'],
axisLabel:{color:'#667085',fontSize:11}
},
series:[{
type:'bar',
barWidth:16,
itemStyle:{color:'#165DFF',borderRadius:[0,8,8,0]},
data:[220,340,310,260,116]
}]
})
//分类数量柱状
let chartCategoryBar = echarts.init(document.getElementById('chartCategoryBar'));
chartCategoryBar.setOption({
tooltip:{trigger:'axis'},
grid:{left:12,right:12,top:12,bottom:24},
xAxis:{type:'category',data:['病理A','病理B','病理C','免疫组化','其他样本'],axisLabel:{color:'#667085'}},
yAxis:{type:'value',splitLine:{lineStyle:{color:'#F2F4F7'}}},
series:[{type:'bar',barWidth:20,itemStyle:{color:'#00B468',borderRadius:[4,4,0,0]},data:[320,286,241,210,189]}]
})
//上传趋势
let chartUploadTrend = echarts.init(document.getElementById('chartUploadTrend'));
chartUploadTrend.setOption({
tooltip:{trigger:'axis'},
grid:{left:12,right:12,top:12,bottom:24},
xAxis:{type:'category',boundaryGap:false,data:['9月','10月','11月','12月','1月','2月','3月','4月','5月','6月','7月','8月']},
yAxis:{type:'value',splitLine:{lineStyle:{color:'#F2F4F7'}}},
series:[{type:'line',smooth:true,itemStyle:{color:'#FF9500'},areaStyle:{color:'rgba(255,149,0,0.12)'},data:[40,62,54,78,92,84,110,124,116,135,148,162]}]
})
window.addEventListener('resize',()=>{
chartVisit.resize();
chartStorageRing.resize();
chartShareBar.resize();
chartUser.resize();
chartUserRole.resize();
chartUserStorage.resize();
chartIpArea.resize();
chartIpInOut.resize();
chartFileRing.resize();
chartFileBar.resize();
chartCategoryBar.resize();
chartUploadTrend.resize();
})
</script>
</body>
</html>
400 186 1886
