效果图
代码
<div class="container-flex" tabindex="0" hidefocus="true">
<div class="box-left">
<div class="left-top">
<div class="current-num">
<div>当前到件量</div>
<p>123,456,789</p>
</div>
</div>
<div class="left-center">
<div class="title-box">
<h6>派件入库量占比</h6>
</div>
<div class="chart-box pie-chart">
<div id="pie"></div>
<div>
<div class="pie-data">
</div>
</div>
</div>
</div>
<div class="left-bottom" class="select">
<div class="title-box">
<h6>广东省寄派件数据</h6>
<img class="line-img" src="images/line-blue.png" alt="">
<button id="filBtn"><img src="images/select_icon.png" alt="">筛选</button>
</div>
<div class="chart-box">
<div class="filter-con" id="filCon" data-type="1">
<div class="select" tabindex="0" hidefocus="true">
<div class="select-div">
派件
</div>
<ul class="select-ul">
<li class="active" data-value="1">派件</li>
<li data-value="2">寄件</li>
</ul>
</div>
<div class="select" tabindex="0" hidefocus="true">
<div class="select-div">
公司
</div>
<ul class="select-ul company">
<li class="active" data-value="">公司</li>
<li data-value="1">顺丰</li>
<li data-value="2">京东</li>
<li data-value="2">EMS</li>
</ul>
</div>
<div class="select" tabindex="0" hidefocus="true">
<div class="select-div">
快件类型
</div>
<ul class="select-ul">
<li class="active" data-value="">快件类型</li>
<li data-value="0">文件</li>
<li data-value="1">物品</li>
</ul>
</div>
</div>
<div id="gdMap" class="gd-map"></div>
</div>
</div>
</div>
下载链接
智慧物流服务中心 大屏静态模板