【免费】068中国电信厅店营业效能分析.rar资源-CSDN文库

共36个文件

png：24个

js：7个

css：4个

html

javascript

echarts

需积分: 0 170 浏览量更新于2024-03-17 收藏 2.48MB RAR 举报

本文将深入探讨中国电信厅店营业效能分析的前端数据可视化大屏展示模板，该模板基于HTML、CSS、JavaScript技术实现，并且结合了Echarts图表库，为业务数据分析提供了直观且交互性强的展示方式。通过下载并学习这个压缩包内的资源，您可以了解到如何构建类似的数据展示系统。 "中国电信厅店营业效能分析.png"是一张预览图，展示了整个大屏的视觉效果。通常，这样的大屏会包含各种图表，如柱状图、折线图、饼图等，用于呈现电信营业厅的业绩、客户流量、销售额、服务满意度等关键指标，帮助管理者快速了解业务状况。 "page"文件夹可能包含了不同的HTML页面，每个页面对应一个特定的数据分析模块。HTML是超文本标记语言，用于定义网页结构，结合CSS和JavaScript，可以创建出动态且美观的数据展示界面。在这些HTML文件中，你可能会看到如何使用表格、段落、标题等元素来组织信息，以及如何嵌入图表代码。 "static"文件夹通常是静态资源的存放地，包括CSS样式表、JavaScript脚本和图片资源。CSS（层叠样式表）用于控制页面的布局和样式，使得数据展示更加美观和易读。JavaScript则是实现页面动态效果和用户交互的关键，例如图表的加载、刷新、缩放、拖拽等功能。Echarts是一个强大的开源JavaScript库，专门用于数据可视化，支持多种图表类型，且易于集成到HTML页面中。在HTML文件中，Echarts的使用通常涉及以下几个步骤： 1. 引入Echarts库：通过`<script>`标签引入echarts.min.js文件。 2. 准备容器：在HTML中定义一个用于展示图表的div元素。 3. 初始化Echarts实例：使用`echarts.init()`方法初始化图表。 4. 配置图表选项：定义图表的样式、数据、交互等属性，形成一个配置对象。 5. 渲染图表：调用`myChart.setOption()`方法，将配置对象传入，完成图表绘制。通过学习这个模板，你可以掌握如何运用前端技术来实现数据可视化，理解如何利用Echarts创建和定制图表，同时还能学习到HTML结构设计、CSS样式布局以及JavaScript事件处理等方面的知识。对于想要提升前端开发技能或从事数据分析工作的人员来说，这是一个非常有价值的实践案例。

收起资源包目录

068 中国电信厅店营业效能分析.rar （36个子文件）

中国电信厅店营业效能分析.png 765KB

page

index.html 10KB

static

office_efficiency_data.js 9KB

pluginsPackage

echarts

echarts.min.js 727KB

bootstrap-3.3.0

bootstrap.js 66KB

bootstrap.css 141KB

respond.js 9KB

swiper

swiper.min.js 123KB

swiper.min.css 19KB

jquery

jquery.1.11.3.min.js 177KB

office_efficiency_index.js 35KB

css

style.css 14KB

office_efficiency_index.css 11KB

images

arrow_up.png 2KB

ding-dan.png 4KB

runnerup.png 2KB

compare_analysis.png 1KB

star2.png 2KB

star3.png 2KB

pai-dui-ji.png 4KB

no-data.png 105KB

champion.png 2KB

device-gray.png 5KB

office_efficiency_foot_bg.png 654KB

office_efficiency_header_bg.png 601KB

device-green.png 4KB

arrow_down.png 2KB

select_arrow.png 255B

smiling_face.png 2KB

gloomy_face.png 2KB

device-red.png 5KB

nei_cun_size.png 10KB

nei_cun_use.png 11KB

star1.png 2KB

ke-liu.png 4KB

cpu_use.png 11KB

资源推荐

资源预览

资源评论

<!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"> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> <link href="../static/js/pluginsPackage/bootstrap-3.3.0/bootstrap.css" rel="stylesheet" type="text/css"></link> <link href="../static/js/pluginsPackage/swiper/swiper.min.css" rel="stylesheet" type="text/css"> <link href="../static/css/style.css" rel="stylesheet" type="text/css"></link> <link href="../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">电信厅店营业效能分析</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">  </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>