<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://csserp.jinlejia.com/style/bootstrap/css/cloud-admin.css?v=20181009" >
<link rel="stylesheet" type="text/css" href="http://csserp.jinlejia.com/style/bootstrap/css/themes/default.css" id="skin-switcher" >
<link rel="stylesheet" type="text/css" href="http://csserp.jinlejia.com/style/bootstrap/css/responsive.css" >
<link href="http://csserp.jinlejia.com/style/bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- DATE RANGE PICKER -->
<!-- FONTS -->
<link href='http://csserp.jinlejia.com/style/bootstrap/font-googleapis/css/font-googleapis.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://csserp.jinlejia.com/style/bootstrap/js/hubspot-messenger/css/messenger.min.css" />
<link rel="stylesheet" type="text/css" href="http://csserp.jinlejia.com/style/bootstrap/js/hubspot-messenger/css/messenger-spinner.min.css" />
<link rel="stylesheet" type="text/css" href="http://csserp.jinlejia.com/style/bootstrap/js/hubspot-messenger/css/messenger-theme-future.min.css" />
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="http://jserp.jinlejia.com/style/bootstrap/js/jquery/jquery-2.0.3.min.js"></script>
<!-- JQUERY UI-->
<script src="http://jserp.jinlejia.com/style/bootstrap/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="http://jserp.jinlejia.com/style/bootstrap/bootstrap-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://jserp.jinlejia.com/style/bootstrap/js/hubspot-messenger/js/messenger.min.js"></script>
<script type="text/javascript" src="http://jserp.jinlejia.com/style/bootstrap/js/hubspot-messenger/js/messenger-theme-flat.js"></script>
<script type="text/javascript" src="http://jserp.jinlejia.com/style/bootstrap/js/hubspot-messenger/js/messenger-theme-future.js"></script>
<!-- DATE RANGE PICKER -->
<!-- SLIMSCROLL -->
<!-- SLIMSCROLL -->
<script type="text/javascript" src="http://jserp.jinlejia.com/style/bootstrap/js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="http://jserp.jinlejia.com/style/bootstrap/js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="http://jserp.jinlejia.com/style/bootstrap/js/jQuery-Cookie/jquery.cookie.min.js"></script>
<script type="text/javascript" src="http://jserp.jinlejia.com/style/js/jlj/common/common.js"></script>
<script type="text/javascript" src="http://jserp.jinlejia.com/style/js/jlj/common/base.js"></script>
<script type="text/javascript" src="http://jserp.jinlejia.com/style/js/jlj/common/head.js?v=20181008"></script>
<script type="text/javascript" src="http://jserp.jinlejia.com/style/js/jlj/follow/showfollow.js""></script>
<script type="text/javascript" src="http://jserp.jinlejia.com/style/bootstrap/js/bootbox/bootbox.min.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/echarts.common.min.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.tableBox table,.lastTable,.firstTable,.firstModalTable,.twoModalTable,.lastModalTable {
text-align: center;
border-collapse:collapse;
table-layout:fixed;
}
.tableBox table td {
border: 1px solid;
}
.tableBox table th,.firstTable th,.firstModalTable th, tfoot tr th {
text-align: center;
border: 1px solid;
}
label {
height: 34px;
line-height: 34px;
}
.c111 {
overflow-y: auto;
height: 500px;
width: 100%;
}
.firstTable th:first-child, .tableBox table tr td:first-child, tfoot tr th:first-child,
.firstModalTable th:first-child, .twoModalTable tr td:first-child, .lastModalTable th:first-child
{
width: 50px;
}
.m,.n,.m_modal,.n_modal {
position: absolute;
background-color: rgb(241,241,241);
right: 15px;
display: none;
}
.firstModalTable,.lastModalTable {
width: calc(100% - 17px);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div id="content" class="col-lg-12">
<!-- PAGE HEADER-->
<div class="row">
<div class="col-sm-12">
<div style="margin-bottom: 10px;" class="page-header">
<ul class="breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="index.html">Home</a>
</li>
<li>Calendar</li>
</ul>
</div>
</div>
</div>
<!-- /PAGE HEADER -->
<!-- CALENDAR -->
<div class="row">
<div class="col-sm-12 clearfix">
<div style="background-color: #999; border: 1px solid red;" class="col-sm-12">
<h3 class="content-title pull-left">成交占比分析</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form class="form-inline">
<div class="row">
<div class="form-group col-sm-12 pull-left">
<div style="margin: 20px -15px;" class="row">
<label class="control-label text-right col-sm-1">分析维度</label>
<div class="col-sm-2">
<select style="width: 100%;" class="form-control">
<option value="1">业绩占比</option>
<option value="1">业绩占比</option>
<option value="1">业绩占比</option>
</select>
</div>
<label class="control-label text-right col-sm-1">交易类型</label>
<div class="col-sm-2">
<select style="width: 100%;" class="form-control">
<option value="1">全部</option>
<option value="1">业绩占比</option>
<option value="1">业绩占比</option>
</select>
</div>
<label class="control-label text-right col-sm-1">商圈</label>
<div class="col-sm-2">
<select style="width: 100%;" class="form-control">
<option value="1">全部</option>
<option value="1">业绩占比</option>
<option value="1">业绩占比</option>
</select>
</div>
</div>
<div class="row">
<label class="control-label text-right col-sm-1">共享店</label>
<div class="col-sm-2">
<input style="width: 100%;" class="form-control" type="text">
</div>
<label class="control-label text-right col-sm-1">日期</label>
<div class="col-sm-2">
<select style="width: 100%;" class="form-control">
<option value="1">昨天</option>
<option value="1">业绩占比</option>
<option value="1">业绩占比</option>
</select>
</div>
<label class="control-label text-right col-sm-1"></label>
<div class="col-sm-3">
<button style="margin-right: 10px;" class="btn btn-primary">搜索</button>
<button class="btn btn-primary">导出</button>
</div>
</div>
</div>
</div>
</form>
<div class="row" style="padding-top: 20px;">
<div class="col-sm-12">
<div class="col-sm-4">
<table style="margin-bottom: -1px;" class="table table-bordered firstTable">
<thead>
<tr>
<th>序列</th>
<th>业绩范围</th>
<th>成交人数</th>
<th>百分比</th>
</tr>
</thead>
<span class="m"></span>
</table>
<div class="tableBox getWidth">
<table style="margin-bottom: -1px;" class="table table-bordered">
<tbody>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>2</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>3</td>
<td>0.5万或以下</td>
<td>4</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>4</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>5</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
</tbody>
</table>
</div>
<table style="margin-bottom: -1px; width: 300px;" class="table lastTable table-bordered">
<tfoot>
<tr>
<th></th>
<th>合计</th>
<th>XX</th>
<th>100%</th>
</tr>
</tfoot>
<span class="n"></span>
</table>
</div>
<div class="col-sm-6">
<div style="width: 700px;height: 500px;" id="main"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- 头部位置 -->
<h3 style="text-align: center;">业绩明细</h>
</div>
<div class="modal-body">
<!-- 这里是内容区 -->
<div class="row" style="margin: 0 auto">
<div class="col-sm-12">
<table style="margin-bottom: -1px;" class="table firstModalTable table-bordered">
<thead>
<tr>
<th>序列</th>
<th>业绩范围</th>
<th>成交人数</th>
<th>百分比</th>
</tr>
</thead>
<span class="m_modal"></span>
</table>
<div class="getModelWidth modelTable">
<table style="margin-bottom: -1px;" class="table twoModalTable table-bordered">
<tbody>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>2</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>3</td>
<td>0.5万或以下</td>
<td>4</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>4</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>5</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>2</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>3</td>
<td>0.5万或以下</td>
<td>4</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>4</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>5</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>2</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>3</td>
<td>0.5万或以下</td>
<td>4</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>4</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>5</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>1</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>2</td>
<td>0.5万或以下</td>
<td>1</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>3</td>
<td>0.5万或以下</td>
<td>4</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>4</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
<tr>
<td>5</td>
<td>0.5万或以下</td>
<td>xx</td>
<td>xx.xx%</td>
</tr>
</tbody>
</table>
</div>
<table style="margin-bottom: -1px;" class="table lastModalTable twoTable table-bordered">
<tfoot>
<tr>
<th>1</th>
<th>合计</th>
<th>XX</th>
<th>100%</th>
</tr>
</tfoot>
<span class="n_modal"></span>
</table>
</div>
</div>
<!-- 内容结束 -->
</div>
<div class="modal-footer" style="text-align: center;">
<!-- 底部 -->
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
init();
var myChart = echarts.init(document.getElementById('main'));
$(".tableBox tbody tr td:nth-child(3)").attr({
'data-toggle': 'modal',
'data-target': '#myModal'
})
// 指定图表的配置项和数据
var option = {
title : {
text: '成交占比分析图',
subtext: '业绩占比',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
right: 'left',
data: ['0.5万或以下','0.5万以上 - 1万','2万以上 - 5万','3万以上 - 6万','4万以上 - 7万']
},
series : [
{
name: '11111',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:10, name:'0.5万或以下'},
{value:10, name:'0.5万以上 - 1万'},
{value:10, name:'2万以上 - 5万'},
{value:10, name:'3万以上 - 6万'},
{value:10, name:'4万以上 - 7万'},
{value:10, name:'5万以上 - 7万'},
{value:10, name:'6万以上 - 7万'},
{value:10, name:'7万以上 - 7万'},
{value:10, name:'8万以上 - 7万'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 屏幕改变时重新渲染表格
$(window).resize(function() {
init()
});
$(".tableBox tbody tr td:nth-child(3)").click(function() {
if($('.modelTable tbody tr').length > 15) {
$('.modelTable').addClass('c111');
$('.m_modal,.n_modal').css('display','block');
}else if ($('.modelTable tbody tr').length < 15) {
$('.firstModalTable,.lastModalTable').css('width','100%')
}
var width = $('.getWidth')[0].scrollWidth;
var scrollBarWidth = $('.getWidth')[0].offsetWidth - width;
var mhieght = $(".firstTable thead tr th").innerHeight() + 2;
$('.m_modal,.n_modal').css('width',scrollBarWidth);
$('.m_modal,.n_modal').css('height',mhieght);
})
})
// 表格初始化函数
function init() {
if($('.tableBox tbody tr').length > 15) {
$('.tableBox').addClass("c111")
$('.m,.n').css('display','block');
}
var width = $('.getWidth')[0].scrollWidth;
// 获取滚动条的宽度
var scrollBarWidth = $('.getWidth')[0].offsetWidth - width;
var mhieght = $(".firstTable thead tr th").innerHeight() + 2;
$('.m,.n').css('width',scrollBarWidth);
$('.m,.n').css('height',mhieght);
$('.firstTable').css("width",width);
$('.lastTable').css("width",width);
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
