前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
文章目录
- 五、更多干货
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>厅店效能分析</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link href="http://v.bootstrapmb.com/2020/3/xldj17548/static/js/pluginsPackage/swiper/swiper.min.css" rel="stylesheet" type="text/css">
<link href="http://v.bootstrapmb.com/2020/3/xldj17548/static/css/style.css" rel="stylesheet" type="text/css"></link>
<link href="http://v.bootstrapmb.com/2020/3/xldj17548/static/css/office_efficiency_index.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">//埋点全局变量
var gDataGather = {
systemCode: "dataanalysis",
systemName: "CRM数据分析",
moduleCode: "dataanalysis-m001",
moduleName: "稳定运营",
pageCode: "dataanalysis-m001-p0007",
pageName: "厅店效能分析",
param: "{}"
}</script>
</head>
<body>
<div class="container-fluid container-bg office-efficiency-index">
<div class="row office-header">
<div class="col-sm-12 col-md-12 pd title-info">厅店营业效能分析</div>
<div class="col-sm-5 col-md-5 pd analysis-info">XXXX-XXXX</div>
<div class="col-sm-7 col-md-7 pd analysis-filter">
<table style="width:100%;height:48px;">
<tr>
<td style="width:70%;text-align:right;">
</td>
<td style="width:15%;text-align:right;padding-left:10px;color:#fff;font-size:14px;font-weight:bold;" id="td-data-date">
<!-- <input type="text" id="data-date" name="dataDate" class="form-control" style="width:100px;"/> -->
</td>
<td style="width:15%;">
<div class="cust-type-default right" type="2">政企</div>
<div class="cust-type-default left active" type="1">公众</div>
</td>
</tr>
</table>
</div>
<!--地域渠道条件选择-->
<div id="select-group-channel-tablebar" class="select-group-channel-tablebar">
<div class="row">
<div class="col-sm-2 col-md-2 pd" style="color:#fff;height:40px;line-height:35px;margin-top:15px;text-align:right;width:110px;font-size:15px;">地域选择：</div>
<div class="col-sm-4 col-md-4 pd" style="height:40px;margin-top:15px;">
<input type="text" id="selectCity" name="cityCode" class="form-control" style="width:150px;" />
</div>
<div class="col-sm-2 col-md-2 pd" style="color:#fff;height:40px;line-height:35px;margin-top:15px;text-align:right;width:110px;font-size:15px;">区域选择：</div>
<div class="col-sm-4 col-md-4 pd" style="height:40px;margin-top:15px;">
<input type="text" id="selectCounty" name="countyCode" class="form-control" style="width:150px;" />
</div>
</div>
<div class="row">
<div class="col-sm-2 col-md-2 pd" style="color:#fff;height:40px;line-height:35px;margin-top:15px;text-align:right;width:110px;font-size:15px;">渠道名称：</div>
<div class="col-sm-6 col-md-6 pd" style="height:40px;margin-top:15px;">
<input type="text" id="channel_name" name="channelName" class="form-control" style="width:330px;" placeHolder="" />
</div>
<div class="col-sm-4 col-md-4 pd" style="height:40px;margin-top:15px;text-align:center;">
<button type="button" class="btn btn-info btn-sm" style="height:35px;width:70px;margin-left:10px;background:#181C41;" onclick="doQueryChannelName();">查询</button>
<button type="button" class="btn btn-info btn-sm" style="height:35px;width:70px;background:#282C55;" onclick="doRestChannelName();">重置</button>
</div>
</div>
</div>
</div>
<div class="row office-header-content">
<div class="col-sm-3 col-md-3 pd">
<div class="col-info">
<div class="title">门店基本信息</div>
<div class="content base-info" id="base-info">
<table>
<tr>
<td colspan="4">
<div class="channel-name">XXXX</div>
</td>
</tr>
<tr>
<td rowspan="2">
<div id="integral_echart" class="integral-echart"></div>
</td>
<td>
<div class="ding-dan-bg"></div>
</td>
<td>
<div class="ke-liu-bg"></div>
</td>
<td>
<div class="pai-dui-ji-bg"></div>
</td>
</tr>
<tr>
<td>
<div class="liang-shu-zhi" type="dingdanVal">--</div>
</td>
<td>
<div class="liang-shu-zhi" type="custNumVal">--</div>
</td>
<td>
<div class="liang-shu-zhi" type="lineUpVal">--</div>
</td>
</tr>
<tr class="td-shu-zhi">
<td class="popval">全省前5%</td>
<td>订单量</td>
<td>当日客流</td>
<td>排队时长</td>
</tr>
<tr>
<td>
<div class="channel-star-level">门店星级</div>
</td>
<td colspan="3" class="chanenl-star">
<img src="static/images/star1.png" style="width:21px;height:20px;" />
<img src="static/images/star1.png" style="width:21px;height:20px;" />
<img src="static/images/star1.png" style="width:21px;height:20px;" />
<img src="static/images/star1.png" style="width:21px;height:20px;" />
<img src="static/images/star1.png" style="width:21px;height:20px;" />
<div class="channel-total-score">--分</div>
</td>
</tr>
<tr>
<td class="label-name">台席健康度：</td>
<td class="label-value device-score">
<img src="static/images/star1.png" />
<div class="score-val">1分</div>
</td>
<td class="label-name">受理速度：</td>
<td class="label-value avgtime">
<img src="static/images/star1.png" />
<div class="score-val">1分</div>
</td>
</tr>
<tr>
<td class="label-name">违规行为：</td>
<td class="label-value weigui">
<img src="static/images/star1.png" />
<div class="score-val">1分</div>
</td>
<td class="label-name">营销评级：</td>
<td class="label-value yingxiao">
<img src="static/images/star1.png" />
<div class="score-val">1分</div>
</td>
</tr>
<tr>
<td class="label-name">业务量：</td>
<td class="label-value yewuliang">
<img src="static/images/star1.png" />
<div class="score-val">1分</div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 pd">
<div class="col-info">
<div class="title">门店历史受理详情 </div>
<div class="content" id="channel_handle_detail"></div>
</div>
</div>
<div class="col-sm-3 col-md-3 pd">
<div class="col-info">
<div class="title">营业员受理详情</div>
<div class="content staff-info" id="staff-info">
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 pd device-info-col">
<div class="col-info">
<div class="title">门店台席健康度</div>
<div class="title-icon">
<div class="device-alarm"><svg class="icon" aria-hidden="true"><use xlink:href="#icongaojing2"></use></svg><span type="grayGrade">0</span></div>
<div class="device-alarm"><svg class="icon" aria-hidden="true"><use xlink:href="#icongaojing1"></use></svg><span type="redGrade">0</span></div>
<div class="device-alarm"><svg class="icon" aria-hidden="true"><use xlink:href="#icongaojing"></use></svg><span type="greenGrade">0</span></div>
</div>
<div class="content deviceInfo" id="device-info">
</div>
</div>
</div>
<div class="col-sm-5 col-md-5 pd time-step-col">
<div class="col-info">
<div class="title">耗时步骤分析</div>
<div class="content" id="time-step-detial"></div>
</div>
</div>
<div class="col-sm-4 col-md-4 pd business-type-time-col">
<div class="col-info">
<div class="title">业务类型耗时分析</div>
<div class="content" id="business-type-time-detial"></div>
</div>
</div>
</div>
</div>
<!--特效动画效果-->
<div id="query-page-data" style="display:none" onclick="loadPageData()" sa-gatherClick="true" elementCode="dataanalysis-m001-p0007-e00001" elementName="查询数据"></div>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://v.bootstrapmb.com/2020/3/xldj17548/static/js/pluginsPackage/swiper/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script src="http://v.bootstrapmb.com/2020/3/xldj17548/static/js/office_efficiency_data.js" type="text/javascript" charset="utf-8"></script>
<script src="http://v.bootstrapmb.com/2020/3/xldj17548/static/js/office_efficiency_index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
2.CSS
.scrolltext ol li {
cursor: pointer;
padding-left: 7px;
width: 570px;
height: 25px;
font-size: 13px;
line-height: 25px;
border-bottom: 2px solid #fff;
}
.scrolltext ol li a {
color: #6f746e;
display: inline;
width: 570px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}
.scrolltext ol li a:hover {
color: #1990FF;
text-decoration: none;
}
.scrolltext .part {
width: 100%;
padding-top: 20px;
}
.scrolltext .part span {
margin-left: 26px;
cursor: pointer;
}
/*自定义横向tab切效果*/
.Shortcut {
height: 2.8em;
}
.custom-nav-tabs {
height: 40px;
line-height: 40px;
vertical-align: top;
text-align: left;
padding-left: 2em;
font-family: MicrosoftYaHei;
background: #FFFFFF;
border: 1px solid #E8E8E8;
box-shadow: 1px 1px 10px 0 rgba(235, 235, 235, 0.50);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.custom-nav-tabs li {
float: left;
margin-right: 10px;
height: 38px;
line-height: 38px;
vertical-align: middle;
padding: 0px 5px 0px 5px;
}
.custom-nav-tabs li.active {
border-bottom: 3px solid #1990FF;
}
.custom-nav-tabs li:hover {
border-bottom: 3px solid #1990FF;
}
.custom-nav-tabs li a {
height: 30px;
float: left;
color: #666666;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
.shortcutEntry {
width: 50px;
height: 50px;
background: #29CB97;
border-radius: 5px;
margin: 0 auto;
margin-bottom: 6px;
}
/*页面头部菜单导航样式*/
.all-nav {
position: absolute;
left: 0;
top: 0;
height: 50px;
width: 50px;
color: #fff;
cursor: default;
text-align: center;
border-right: 1px solid hsla(0, 0%, 100%, .15);
transition: all .2s ease-in-out;
cursor: pointer;
}
.all-nav img {
margin-top: 11px;
}
.all-nav.active,
.all-nav:hover {
background: #3063E3;
}
.all-navbar-header {
width: 25%;
position: relative;
left: 60px;
height: 45px;
vertical-align: middle;
}
.all-navbar-header svg {
margin-top: 12px;
float: left;
width: 25px;
height: 25px;
}
.all-navbar-header div {
float: left;
width: 180px;
height: 25px;
margin: 13px 0px 0px 5px;
color: #FFFFFF;
font-size: 15px;
font-family: MicrosoftYaHei;
letter-spacing: 1.66px;
}
/*菜单手风琴效果*/
.accordionMenu {
background: #333333;
width: 200px;
height: 100%;
display: none;
z-index: 999;
position: absolute;
top: 50px;
left: -500px;
}
.accordionMenu .item_dl dt {
height: 20px;
display: block;
padding: 10px;
border-bottom: 1px solid #161616;
cursor: pointer;
}
.accordionMenu .item_dl dt.expansion:hover {
background: none;
}
.accordionMenu .item_dl dt svg {
width: 16px;
height: 16px;
float: left;
color: #fff;
margin-top: 2px;
opacity: 1;
}
.accordionMenu .item_dl dt .item_title {
width: 120px;
font-size: 14px;
color: #fff;
margin-left: 10px;
margin-right: 10px;
float: left;
opacity: 1;
}
.accordionMenu .item_dl dt .arrowClass {
float: left;
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 1s;
transition: all 1s;
}
.accordionMenu .item_dl dt.active .arrowClass {
-ms-transform: rotate(540deg);
-moz-transform: rotate(540deg);
-webkit-transform: rotate(540deg);
-o-transform: rotate(540deg);
transform: rotate(540deg);
-webkit-transition: all 1.5s;
transition: all 1.5s;
}
.accordionMenu .item_dd .menuSecond {
background: #161616;
min-height: 50px;
height: 200px;
overflow-y: auto;
padding: 5px;
display: none;
}
