songxiangjie
/
visualization_center
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初步完成可视化页面

master
songxiangjie 2025-12-12 16:17:42 +08:00
parent 5ea806182c
commit 919dcabafa
2 changed files with 843 additions and 1026 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1119
cs_chart.html
View File

File diff suppressed because it is too large Load Diff

154
index.html
View File

@ -3,31 +3,109 @@
<head>
<meta charset="UTF-8">
<title>客服数据可视化中心</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="width=device-width, initial-scale=1" name="viewport">
<!-- 依赖 -->
<script src="./js/echarts.min.js"></script>
<script src="./js/dayjs.min.js"></script>
<script src="./js/isoWeek.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
<style>
:root{--primary:#3388ff;}
* {box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial;font-size:14px;background:#f5f7fa;color:#333;}
.header{position:sticky;top:0;z-index:9;background:#fff;padding:12px 16px;box-shadow:0 2px 4px rgba(0,0,0,.08);}
.header h2{margin:0 0 8px;font-size:18px;}
.ctrl{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.ctrl select,.ctrl input{padding:6px 10px;border:1px solid #ddd;border-radius:4px;background:#fff;}
.grid{display:grid;grid-template-columns:1fr;gap:12px;padding:12px;}
.card{background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;}
.card-title{font-weight:700;padding:12px 16px 0;font-size:15px;margin:0;}
.chart{height:400px;width:100%;min-height:350px;}
.chart-container{position:relative;width:100%;height:100%;}
:root {
--primary: #3388ff;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial;
font-size: 14px;
background: #f5f7fa;
color: #333;
}
.header {
position: sticky;
top: 0;
z-index: 9;
background: #fff;
padding: 12px 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.header h2 {
margin: 0 0 8px;
font-size: 18px;
}
.ctrl {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.ctrl select, .ctrl input {
padding: 6px 10px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
}
.grid {
display: grid;
grid-template-columns:1fr;
gap: 12px;
padding: 12px;
}
.card {
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
overflow: hidden;
}
.card-title {
font-weight: 700;
padding: 12px 16px 0;
font-size: 15px;
margin: 0;
}
.chart {
height: 400px;
width: 100%;
min-height: 350px;
}
.chart-container {
position: relative;
width: 100%;
height: 100%;
}
/* 移动端 */
@media (max-width: 600px) {
.grid{grid-template-columns:1fr;}
.ctrl{flex-direction:column;align-items:stretch;}
.grid {
grid-template-columns:1fr;
}
.ctrl {
flex-direction: column;
align-items: stretch;
}
}
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #999;
}
.loading{display:flex;justify-content:center;align-items:center;height:100%;color:#999;}
</style>
</head>
<body>
@ -36,10 +114,10 @@
<a href="index_company.html" target="_blank">公司数据可视化中心</a>
<div class="ctrl">
<label>开始月份
<input type="month" id="startMonth" value="2025-01">
<input id="startMonth" type="month" value="2025-01">
</label>
<label>结束月份
<input type="month" id="endMonth" value="2025-11">
<input id="endMonth" type="month" value="2025-11">
</label>
<button id="searchBtn">搜索</button>
<label>客服
@ -62,35 +140,51 @@
<div class="grid">
<div class="card">
<div class="card-title">订单数量（多指标对比）</div>
<div class="chart-container"><div id="chart1" class="chart"></div></div>
<div class="chart-container">
<div id="chart1" class="chart"></div>
</div>
</div>
<div class="card">
<div class="card-title">完成率</div>
<div class="chart-container"><div id="chart2" class="chart"></div></div>
<div class="chart-container">
<div id="chart2" class="chart"></div>
</div>
</div>
<div class="card">
<div class="card-title">溢价金额</div>
<div class="chart-container"><div id="chart3" class="chart"></div></div>
<div class="chart-container">
<div id="chart3" class="chart"></div>
</div>
</div>
<div class="card">
<div class="card-title">投诉率</div>
<div class="chart-container"><div id="chart4" class="chart"></div></div>
<div class="chart-container">
<div id="chart4" class="chart"></div>
</div>
</div>
<div class="card">
<div class="card-title">空驶率</div>
<div class="chart-container"><div id="chart5" class="chart"></div></div>
<div class="chart-container">
<div id="chart5" class="chart"></div>
</div>
</div>
<div class="card">
<div class="card-title">关闭率</div>
<div class="chart-container"><div id="chart6" class="chart"></div></div>
<div class="chart-container">
<div id="chart6" class="chart"></div>
</div>
</div>
<div class="card">
<div class="card-title">客服完成率分布</div>
<div class="chart-container"><div id="pie" class="chart"></div></div>
<div class="chart-container">
<div id="pie" class="chart"></div>
</div>
</div>
<div class="card">
<div class="card-title">月度趋势</div>
<div class="chart-container"><div id="line" class="chart"></div></div>
<div class="chart-container">
<div id="line" class="chart"></div>
</div>
</div>
<div class="card">
<div class="card-title" style="display:flex;justify-content:space-between;align-items:center;">
@ -104,11 +198,15 @@
<option value="关闭率">关闭率</option>
</select>
</div>
<div class="chart-container"><div id="bar" class="chart"></div></div>
<div class="chart-container">
<div id="bar" class="chart"></div>
</div>
</div>
<div class="card">
<div class="card-title">单个客服历史表现</div>
<div class="chart-container"><div id="hist" class="chart"></div></div>
<div class="chart-container">
<div id="hist" class="chart"></div>
</div>
</div>
</div>
<script>