初步完成可视化页面
parent
5ea806182c
commit
919dcabafa
1119
cs_chart.html
1119
cs_chart.html
File diff suppressed because it is too large
Load Diff
154
index.html
154
index.html
|
|
@ -3,31 +3,109 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>客服数据可视化中心</title>
|
<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/echarts.min.js"></script>
|
||||||
<script src="./js/dayjs.min.js"></script>
|
<script src="./js/dayjs.min.js"></script>
|
||||||
<script src="./js/isoWeek.js"></script>
|
<script src="./js/isoWeek.js"></script>
|
||||||
<script src="./node_modules/axios/dist/axios.min.js"></script>
|
<script src="./node_modules/axios/dist/axios.min.js"></script>
|
||||||
<style>
|
<style>
|
||||||
:root{--primary:#3388ff;}
|
:root {
|
||||||
* {box-sizing:border-box;}
|
--primary: #3388ff;
|
||||||
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;}
|
box-sizing: border-box;
|
||||||
.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;}
|
body {
|
||||||
.card-title{font-weight:700;padding:12px 16px 0;font-size:15px;margin:0;}
|
margin: 0;
|
||||||
.chart{height:400px;width:100%;min-height:350px;}
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial;
|
||||||
.chart-container{position:relative;width:100%;height:100%;}
|
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) {
|
@media (max-width: 600px) {
|
||||||
.grid{grid-template-columns:1fr;}
|
.grid {
|
||||||
.ctrl{flex-direction:column;align-items:stretch;}
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -36,10 +114,10 @@
|
||||||
<a href="index_company.html" target="_blank">公司数据可视化中心</a>
|
<a href="index_company.html" target="_blank">公司数据可视化中心</a>
|
||||||
<div class="ctrl">
|
<div class="ctrl">
|
||||||
<label>开始月份
|
<label>开始月份
|
||||||
<input type="month" id="startMonth" value="2025-01">
|
<input id="startMonth" type="month" value="2025-01">
|
||||||
</label>
|
</label>
|
||||||
<label>结束月份
|
<label>结束月份
|
||||||
<input type="month" id="endMonth" value="2025-11">
|
<input id="endMonth" type="month" value="2025-11">
|
||||||
</label>
|
</label>
|
||||||
<button id="searchBtn">搜索</button>
|
<button id="searchBtn">搜索</button>
|
||||||
<label>客服
|
<label>客服
|
||||||
|
|
@ -62,35 +140,51 @@
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">订单数量（多指标对比）</div>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">完成率</div>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">溢价金额</div>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">投诉率</div>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">空驶率</div>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">关闭率</div>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">客服完成率分布</div>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">月度趋势</div>
|
<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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title" style="display:flex;justify-content:space-between;align-items:center;">
|
<div class="card-title" style="display:flex;justify-content:space-between;align-items:center;">
|
||||||
|
|
@ -104,11 +198,15 @@
|
||||||
<option value="关闭率">关闭率</option>
|
<option value="关闭率">关闭率</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</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>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-title">单个客服历史表现</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue