mirror of
https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git
synced 2025-06-16 22:49:56 +08:00
删除目录3.舆情分析
This commit is contained in:
Lang
Gitee
parent
154f578ff9
commit
21657235a2
1077
3.舆情分析/activity.html
1077
3.舆情分析/activity.html
File diff suppressed because it is too large
Load Diff
@ -1,620 +0,0 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>警情警力分析</title>
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
|
||||
<script src="js/echarts.min.js" charset="utf-8"></script>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="wpbox">
|
||||
<div class="bnt">
|
||||
<div class="topbnt_left fl">
|
||||
<ul><li class="active"><a href="#">警情警力</a></li>
|
||||
<li><a href="#">实有人口</a></li>
|
||||
<li><a href="#">流动人口</a></li>
|
||||
<li><a href="#">实名制</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="tith1 fl">矛盾纠纷分析</h1>
|
||||
<div class=" fr topbnt_right">
|
||||
<ul>
|
||||
<li><a href="#">返回</a></li>
|
||||
<li><a href="#">分析报告</a></li>
|
||||
<li><a href="#">交通</a></li>
|
||||
<li><a href="#">舆情</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- bnt end -->
|
||||
<div class="left1">
|
||||
<div class="aleftboxttop"><h2 class="tith2">今日矛盾纠纷数据统计</h2>
|
||||
<div class="lefttoday_tit" style=" height:8%"><p class="fl">地区：甘孜</p><p class="fr">2018-06-14</p></div>
|
||||
<div class="lefttoday_number">
|
||||
<div class="widget-inline-box text-center fl">
|
||||
<p>矛盾纠纷</p>
|
||||
<h3 class="ceeb1fd">54</h3>
|
||||
<h4 class="text-muted pt6">环比<img src="img/iconup.png" height="16" />2%</h4>
|
||||
</div>
|
||||
<div class="widget-inline-box text-center fl">
|
||||
<p>已调节</p>
|
||||
<h3 class="c24c9ff">54</h3>
|
||||
<h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
|
||||
</div>
|
||||
<div class="widget-inline-box text-center fl">
|
||||
<p>未调节</p>
|
||||
<h3 class="cffff00">4</h3>
|
||||
<h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
|
||||
</div>
|
||||
<div class="widget-inline-box text-center fl">
|
||||
<p>处理中</p>
|
||||
<h3 class="c11e2dd">4</h3>
|
||||
<h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- lefttoday_number end -->
|
||||
</div>
|
||||
<div class="aleftboxtmidd">
|
||||
<h2 class="tith2">矛盾纠纷地区统计</h2>
|
||||
<div class="lefttoday_tit height ht"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div>
|
||||
<div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
|
||||
</div>
|
||||
<div class="aleftboxtbott">
|
||||
<h2 class="tith2">矛盾纠纷类型统计</h2>
|
||||
<div class="lefttoday_tit height"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div>
|
||||
<div id="aleftboxtbott" class="aleftboxtbott_cont" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- left1 end -->
|
||||
<div class="mrbox">
|
||||
<div class="mrbox_topmidd" style="width: 69%;">
|
||||
<div class="amiddboxttop">
|
||||
<h2 class="tith2 pt1">实时监控统计</h2>
|
||||
<div class="amiddboxttop_map" style="">
|
||||
<span class="camera_l" style=" top:34%;left:32%"></span>
|
||||
<span class="camera_l" style=" top:10%;left:10%"></span>
|
||||
<span class="camera_l" style=" top:5%;left:40%"></span>
|
||||
<span class="camera_l" style=" top:10%;left:50%"></span>
|
||||
<span style=" top:30%;left:75%"></span>
|
||||
<span style=" top:5%;left:92%"></span>
|
||||
<span style=" top:40%;left:83%"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- amiddboxttop end-->
|
||||
<div class="amidd_bott">
|
||||
<div class="amiddboxtbott1 fl" >
|
||||
<h2 class="tith2 pt1">矛盾纠纷环比分析</h2>
|
||||
<div id="amiddboxtbott1" class="amiddboxtbott1content" ></div>
|
||||
</div>
|
||||
|
||||
<div class="amiddboxtbott2 fl"><h2 class="tith2 pt1">案件统计</h2>
|
||||
<div id="amiddboxtbott2" class="amiddboxtbott2content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- amidd_bott end -->
|
||||
</div>
|
||||
<!-- mrbox_top end -->
|
||||
<div class="mrbox_top_right">
|
||||
<div class="arightboxtop"><h2 class="tith2">警力分析</h2>
|
||||
<div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10</p></div>
|
||||
<div class="left2_table">
|
||||
<ul>
|
||||
<li>
|
||||
<p class="fl"><b>康定市公安局</b><br>
|
||||
村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
|
||||
</p>
|
||||
<p class="fr pt17">2018-06-22</p>
|
||||
</li>
|
||||
<li class="bg">
|
||||
<p class="fl"><b>康定市公安局</b><br>
|
||||
村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
|
||||
</p>
|
||||
<p class="fr pt17">2018-06-22</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="fl"><b>康定市公安局</b><br>
|
||||
村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
|
||||
</p>
|
||||
<p class="fr pt17">2018-06-22</p>
|
||||
</li>
|
||||
<li class="bg">
|
||||
<p class="fl"><b>康定市公安局</b><br>
|
||||
村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
|
||||
</p>
|
||||
<p class="fr pt17">2018-06-22</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="fl"><b>康定市公安局</b><br>
|
||||
村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
|
||||
</p>
|
||||
<p class="fr pt17">2018-06-22</p>
|
||||
</li>
|
||||
<li class="bg">
|
||||
<p class="fl"><b>康定市公安局</b><br>
|
||||
村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
|
||||
</p>
|
||||
<p class="fr pt17">2018-06-22</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="fl"><b>康定市公安局</b><br>
|
||||
村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
|
||||
</p>
|
||||
<p class="fr pt17">2018-06-22</p>
|
||||
</li>
|
||||
<li class="bg">
|
||||
<p class="fl"><b>康定市公安局</b><br>
|
||||
村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。<br>
|
||||
</p>
|
||||
<p class="fr pt17">2018-06-22</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="arightboxbott"><h2 class="tith2 ">矛盾纠纷七日数据分析</h2>
|
||||
<div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间：2018-06-14</p></div>
|
||||
<div id="arightboxbott" class="arightboxbottcont" style=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mrbox_top_right end -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('aleftboxtmidd'));
|
||||
option = {
|
||||
color:['#76c4bf','#e5ffc7','#508097','#4d72d9'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:10,
|
||||
right:40,
|
||||
top:20,
|
||||
bottom:0,
|
||||
containLabel: true
|
||||
},
|
||||
// legend: {
|
||||
// x : 'center',
|
||||
// y : '70%',
|
||||
// textStyle:{
|
||||
// fontSize: 10,
|
||||
// color:'rgba(255,255,255,.7)'
|
||||
// },
|
||||
// data:['康定市','丹巴县','甘孜县','理塘县']
|
||||
// },
|
||||
calculable : true,
|
||||
series : [
|
||||
|
||||
{
|
||||
name:'面积模式',
|
||||
type:'pie',
|
||||
radius : [5, 60],
|
||||
center : ['50%', '55%'],
|
||||
roseType : 'area',
|
||||
data:[
|
||||
{value:10, name:'康定市'},
|
||||
{value:5, name:'丹巴县'},
|
||||
{value:15, name:'甘孜县'},
|
||||
{value:25, name:'理塘县'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('aleftboxtbott'));
|
||||
option = {
|
||||
color:['#7ecef4'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:20,
|
||||
right:20,
|
||||
top:13,
|
||||
bottom:6,
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,0)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,0)"
|
||||
},
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.5)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.5)"
|
||||
},
|
||||
data: ['未调节','调节中','未调节']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '2011年',
|
||||
type: 'bar',
|
||||
barWidth :30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
1, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: 'rgba(230,253,139,.7)'},
|
||||
{offset: 1, color: 'rgba(41,220,205,.7)'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data: [18203, 23489, 29034]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('amiddboxtbott1'));
|
||||
var data = [
|
||||
[[28604,77,17099,'Australia',1990],[31163,77.4,2440,'Canada',1990],[1516,68,1605773,'China',1990],[13670,74.7,10082,'Cuba',1990],[28599,75,49805,'Finland',1990],[29476,77.1,569499,'France',1990],[31476,75.4,789237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870776,'India',1990],[29550,79.1,129285,'Japan',1990],[2076,67.9,201954,'North Korea',1990],[12087,72,42954,'South Korea',1990],[24021,75.4,33934,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,381958,'Poland',1990],[19349,69.6,1475652,'Russia',1990],[10670,67.3,53905,'Turkey',1990],[26424,75.7,57117,'United Kingdom',1990],[37062,75.4,252810,'United States',1990]],
|
||||
[[44056,81.8,23973,'Australia',2015],[43294,81.7,35927,'Canada',2015],[13334,76.9,1376043,'China',2015],[21291,78.5,11562,'Cuba',2015],[38923,80.8,55057,'Finland',2015],[37599,81.9,64345,'France',2015],[44053,81.1,80545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311027,'India',2015],[36162,83.5,126571,'Japan',2015],[1390,71.4,251317,'North Korea',2015],[34644,80.7,503439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,386194,'Poland',2015],[23038,73.13,143918,'Russia',2015],[19360,76.5,78630,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321771,'United States',2015]]
|
||||
];
|
||||
|
||||
option = {
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:40,
|
||||
right:40,
|
||||
top:50,
|
||||
bottom:40
|
||||
},
|
||||
title: {
|
||||
top: 5,
|
||||
left:20,
|
||||
textStyle:{
|
||||
fontSize:10,
|
||||
color:'rgba(255,255,255,.6)'
|
||||
},
|
||||
text: '环比类型：日环比'
|
||||
},
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 5,
|
||||
textStyle:{
|
||||
fontSize:10,
|
||||
color:'rgba(255,255,255,.6)'
|
||||
},
|
||||
data: ['1990', '2015']
|
||||
},
|
||||
xAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
scale: true
|
||||
},
|
||||
series: [{
|
||||
name: '1990',
|
||||
data: data[0],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3];
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(204, 46, 72)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '2015',
|
||||
data: data[1],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3];
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('amiddboxtbott2'));
|
||||
option = {
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:60,
|
||||
right:60,
|
||||
top:50,
|
||||
bottom:40
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: {show: true, readOnly: false},
|
||||
magicType: {show: true, type: ['line', 'bar']},
|
||||
restore: {show: true},
|
||||
saveAsImage: {show: true}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top:10,
|
||||
textStyle:{
|
||||
fontSize: 10,
|
||||
color:'rgba(255,255,255,.7)'
|
||||
},
|
||||
data:['2017年','2018年','同比增速']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
|
||||
data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.3)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.01)'
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
formatter: '{value} ml'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.3)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name:'2017年',
|
||||
type:'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#b266ff'},
|
||||
{offset: 1, color: '#121b87'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
||||
},
|
||||
{
|
||||
name:'2018年',
|
||||
type:'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#00f0ff'},
|
||||
{offset: 1, color: '#032a72'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
||||
},
|
||||
{
|
||||
name:'同比增速',
|
||||
type:'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#fffb34'},
|
||||
{offset: 1, color: '#fffb34'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('arightboxbott'));
|
||||
option = {
|
||||
color:['#7de494','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '8%',
|
||||
bottom: '7%',
|
||||
top:'8%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
data: ['6-08','6-09','6-10','6-11','6-12','6-13','6-14']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'2014年',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
areaStyle: {normal: {}},
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
6800
3.舆情分析/css/bootstrap.css
vendored
6800
3.舆情分析/css/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
@ -1,573 +0,0 @@
|
||||
/****** PLACE YOUR CUSTOM STYLES HERE ******/
|
||||
body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* background:#051655 ; */
|
||||
font-family: 微软雅黑, MicrosoftYahei, sans-serif; color:#fff;
|
||||
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
pre,
|
||||
table,
|
||||
blockquote,
|
||||
input,
|
||||
button,
|
||||
select,em,
|
||||
textarea {
|
||||
margin: 0; font-weight:normal;
|
||||
margin: 0;
|
||||
padding: 0;list-style: none;font-style: normal;
|
||||
}
|
||||
#sws>div:nth-child(2){
|
||||
height: calc(100% - 73px)
|
||||
}
|
||||
|
||||
.left1{
|
||||
/* width: 350px; */
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
/* padding-left:40px; */
|
||||
padding-left:2%;
|
||||
text-align: center;
|
||||
}
|
||||
.puleft{
|
||||
padding-left:40px;
|
||||
text-align: center;
|
||||
}
|
||||
.left2{
|
||||
/* width: 354px; */
|
||||
width: 18%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
/* margin-left: 5px; */
|
||||
}
|
||||
/* .mrbox{float: left;} */
|
||||
.mrbox{
|
||||
width: 60%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
/* margin-left: 10px; */
|
||||
}
|
||||
|
||||
|
||||
.mrbox_bottom{
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: calc(40% - 105px);
|
||||
}
|
||||
.mrbox_top_midd{
|
||||
width: 69%;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
.mrbox_topmidd{float: left;}
|
||||
.amidd_bott,.box{ overflow: hidden;}
|
||||
|
||||
.mrbox_top_right{
|
||||
float: left;
|
||||
width: 31%;
|
||||
height: 100%;
|
||||
}
|
||||
.mrbox_top{
|
||||
width: 100%;
|
||||
height: calc(58% + 90px);
|
||||
}
|
||||
|
||||
|
||||
.lefttime{
|
||||
background:url(../img/time.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position:center;
|
||||
background-size: 85% 100%;
|
||||
width:100%;
|
||||
height:90px;
|
||||
margin: 0 auto;}
|
||||
.lefttime_text{ padding: 8px 15px 0 15px}
|
||||
.lefttime_text li{ font-size: 12px; color: rgba(255,255,255,.9); width: 50px;float: left; height: 22px; line-height: 22px;text-align: center; border-radius: 4px}
|
||||
.lefttime_text li.bg{ background: rgba(0,183,238,.1);}
|
||||
.lefttime_text li.active{ background: rgba(0,183,238,.6); color: #fff;}
|
||||
.lefttoday{
|
||||
background: url(../img/left1box.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 102%;
|
||||
background-position: -3px 2px;
|
||||
width: 100%;
|
||||
/* height: 584px; */
|
||||
height: 58%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.lefttoday_barb{
|
||||
width: 92%;
|
||||
height: 75%;
|
||||
width: 92%;
|
||||
height: 75%;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.lefttoday_tit{ overflow: hidden; margin: 6px 7%}
|
||||
.lefttoday_number{overflow: hidden; margin: 4px 7%;background: rgba(1,202,217,.2);}
|
||||
.lefttoday_tit p.fl{ font-size: 14px; color: rgba(255,255,255,1); }
|
||||
.lefttoday_tit p.fr{ font-size: 12px; color: rgba(255,255,255,.6); }
|
||||
.lefttoday_bar ul{position: relative; height: 180px;}
|
||||
.lefttoday_bar li{ color: #333; position: absolute;border-radius: 50%; font-size: 12px; overflow: hidden; font-weight: normal; text-align: center; line-height: 140%}
|
||||
.lefttoday_bar li span{ padding-top: 30%; display: inline-block;}
|
||||
.lefttoday_bar{
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
|
||||
.c1{ background: #ac3ff2}
|
||||
.c2{ background: #ffff00}
|
||||
.c3{ background: #0078ff}
|
||||
.c4{ background: #9cff00}
|
||||
.c5{ background: #ff6c00}
|
||||
.c6{ background: #77b5fb}
|
||||
.big0{ width: 10px; height: 10px}
|
||||
.big1{ width: 20px; height: 20px}
|
||||
.big2{ width: 30px; height: 30px}
|
||||
.big3{ width: 40px; height: 40px}
|
||||
.big4{ width: 50px; height: 50px}
|
||||
.big5{ width: 60px; height: 60px}
|
||||
.big6{ width: 70px; height: 70px;}
|
||||
|
||||
.leftclass{
|
||||
background:url(../img/leftb1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: -5px -5px;
|
||||
background-size: 100% 100%;
|
||||
width:100%;
|
||||
height:calc(40% - 105px);
|
||||
}
|
||||
.leftbox2_table{
|
||||
background:url(../img/leftbox2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: -2px -5px;
|
||||
background-size: 100% 100%;
|
||||
width:100%;
|
||||
height:calc(58% + 90px);
|
||||
}
|
||||
|
||||
.left2_table{
|
||||
/* width: 306px; */
|
||||
width: 87%;
|
||||
margin: 0px 6% 0px 6%;
|
||||
font-size: 12px;
|
||||
height:calc(100% - 50px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chujin{
|
||||
width: calc(100% + 20px);
|
||||
height: 610px;
|
||||
/* overflow: scroll; */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin-top: 8px
|
||||
}
|
||||
|
||||
.left2_table li{background: rgba(1,202,217,.2) url(../img/icosjx.png) no-repeat top left; position: relative;overflow: hidden; padding: 8px 11px; color:rgba(255,255,255,.7); line-height: 150%}
|
||||
.left2_table li b{color:rgba(255,255,255,1); font-weight: normal;}
|
||||
.left2_table li p.fl{ width: 200px; overflow: hidden;}
|
||||
.left2_table li p.fr{ position: absolute; right: 10px; top: 9px;}
|
||||
.yellow{ color: #fff45c}
|
||||
.green{ color: #00c2fd}
|
||||
.left2_table li.bg{ background: rgba(0,255,255,.4) url(../img/icosjx.png) no-repeat top left;}
|
||||
.mrbox_tr_box{background:url(../img/rbox1.png);background-repeat: no-repeat;background-position: -5px -5px; width:354px; height:291px;}
|
||||
|
||||
.mrboxtm-mbox{
|
||||
background:url(../img/midtop.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: -5px -5px;
|
||||
background-size: 100% 106%;
|
||||
width:100%;
|
||||
/* height:450px; */
|
||||
height: 66%;
|
||||
}
|
||||
.mrboxtm-bs{
|
||||
width: 100%;
|
||||
height: 34%;
|
||||
}
|
||||
.mrboxtm-b1{
|
||||
background:url(../img/mbox1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: -7px -4px;
|
||||
background-size: 101% 106%;
|
||||
/* width:460px;
|
||||
height:233px; */
|
||||
width: 58%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mrboxtm-b2{
|
||||
background:url(../img/mbox2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: -7px -4px;
|
||||
background-size: 100% 104%;
|
||||
/* width:330px; height:233px; */
|
||||
width: 42%;
|
||||
height: 100%;
|
||||
float: right;
|
||||
}
|
||||
.mrboxtm-b2wp{
|
||||
width: 90%;
|
||||
height: 60%;
|
||||
margin: 0 0 0 4%;
|
||||
}
|
||||
|
||||
.mrbox_tr_box{
|
||||
background:url(../img/rbox1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 104% 102.5%;
|
||||
background-position: -8px -5px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.rbottom_box1{
|
||||
background:url(../img/b-rbox2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: -5px -5px;
|
||||
background-size: 102% 100%;
|
||||
/* width:400px; */
|
||||
width: 34.7%;
|
||||
/* height:291px; */
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
.rbottom_box2{
|
||||
background:url(../img/bbox2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: -5px -5px;
|
||||
background-size: 102% 100%;
|
||||
/* width:350px; */
|
||||
width: 30.6%;
|
||||
/* height:291px; */
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
.rbottom_box3{
|
||||
background:url(../img/b-rbox2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: -5px -5px;
|
||||
background-size: 102% 100%;
|
||||
/* width:400px; */
|
||||
width: 34.7%;
|
||||
/* height:291px; */
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tith2{
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
letter-spacing:2px;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
line-height: 20px;
|
||||
}
|
||||
.fl{ float: left;}
|
||||
.fr{ float: right;}
|
||||
.topbnt_left ul{ padding-top: 38px; padding-left: 30px; width: 620px}
|
||||
.topbnt_left li { background:url(../img/bnt.png); font-size: 14px; line-height: 33px;background-repeat: no-repeat;width:91px; height:35px;float: left; text-align: center; margin-left: 33px}
|
||||
.topbnt_left li.active,.topbnt_right li.active{background:url(../img/bntactive.png); }
|
||||
.topbnt_left li a{ text-decoration: none; color: #fff;}
|
||||
.tith1{
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
font-weight: bold;
|
||||
letter-spacing:8px;
|
||||
font-size: 36px;
|
||||
}
|
||||
.topbnt_right{padding-top: 38px;}
|
||||
.topbnt_right li {
|
||||
background:url(../img/bnt.png);
|
||||
font-size: 14px;
|
||||
line-height: 33px;
|
||||
background-repeat: no-repeat;
|
||||
height:35px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-right: 3%
|
||||
}
|
||||
.topbnt_right li a{ text-decoration: none; color: #fff;}
|
||||
.pt12{padding-top: 12px; margin-bottom: 1%}
|
||||
.pt6{padding-top: 6px; }
|
||||
.pt17{ padding-top: 8px;}
|
||||
/* .pt14{ padding-top: 14px} */
|
||||
.pt14{ padding-top: 8px}
|
||||
.pt12{ padding-top: 8px;}
|
||||
.pt20{ padding-top: 22px;}
|
||||
/* .box_pad{ margin: 3px 20px; } */
|
||||
/* nav */
|
||||
.navs .topbnt_right li{
|
||||
margin-left: 10px;
|
||||
width: 18%
|
||||
}
|
||||
.navs .topbnt_right{
|
||||
float: right;
|
||||
}
|
||||
.mrboxtm-map{background:url(../img/mapbg.png);background-repeat: no-repeat;background-position: center; position: relative;}
|
||||
.mrboxtm-map li{ width: 23px; height: 22px; line-height: 22px; color: #fff; text-align: center; background-position: center; background-repeat: no-repeat;font-size: 12px; position: absolute;}
|
||||
.mrboxtm-map li.bluer{background-image:url(../img/blue_rico.png);}
|
||||
.mrboxtm-map li.redr{background-image:url(../img/red_rico.png);}
|
||||
|
||||
.mrtop1{
|
||||
background: rgba(1,202,217,.2);
|
||||
overflow: hidden;
|
||||
margin: 4px 5% 4px 5%;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
height: 15%;
|
||||
}
|
||||
.widget-inline-box{
|
||||
text-align: center;
|
||||
color:rgba(255,255,255,.9);
|
||||
/* width: 50%; */
|
||||
/* padding: 8% 0; */
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
overflow:hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.widget-inline-box h3{ font-size: 22px; font-weight: 100; font-weight: normal;}
|
||||
.ceeb1fd{ color: #eeb1fd}
|
||||
.c24c9ff{ color: #24c9ff}
|
||||
.cffff00{ color: #ffff00}
|
||||
.c11e2dd{ color: #11e2dd}
|
||||
.text-muted{ font-size: 12px; color:#789ce0; }
|
||||
.text-muted img{ vertical-align: middle; margin: 0 3px}
|
||||
.mrtop2{
|
||||
margin: 4px 15px;
|
||||
background: rgba(1,202,217,.2);
|
||||
height: 34%;
|
||||
}
|
||||
.tith4{ font-size: 12px; text-align: center;}
|
||||
.mrtop3{
|
||||
margin: 4px 15px;
|
||||
background: rgba(1,202,217,.2);
|
||||
height: calc(45% - 26px);
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.mrboxtm-b1wp{
|
||||
/* margin: 4px 25px; */
|
||||
/* padding: 20px 0; */
|
||||
background: rgba(1,202,217,.2);
|
||||
/* width:415px; */
|
||||
width: 88%;
|
||||
height: calc(88% - 30px);
|
||||
/* margin: 0 auto; */
|
||||
margin: 5px 0px 0px 5%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mrboxtm_text{
|
||||
overflow: hidden;
|
||||
padding-left: 12px;
|
||||
padding-bottom: 10px;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-moz-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.mrbtext_info{
|
||||
background: rgba(1,202,217,.2);
|
||||
font-weight: normal;
|
||||
margin: 1% 0;
|
||||
padding: 2% 4%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color:rgba(255,255,255,.7);
|
||||
}
|
||||
.mrbtext_info b{ font-weight: normal; font-size: 16px;}
|
||||
.lefttoday_number .widget-inline-box{ width: 25%}
|
||||
|
||||
/* 警情警力分析 完*/
|
||||
.aleftboxttop{background:url(../img/leftb1.png);background-repeat: no-repeat;background-position: -5px -5px; width:352px; height:279px;}
|
||||
.aleftboxttop .lefttoday_number{ background: none; margin: 4px 20px;}
|
||||
.aleftboxttop .widget-inline-box{width: 24.2%; margin: 0 .4%; background: rgba(1,202,217,.2); padding: 13% 0; height: 100px; font-size: 10px;}
|
||||
|
||||
.aleftboxtmidd{background:url(../img/aleftboxtmidd.png);background-repeat: no-repeat;background-position: -5px -5px; width:352px; height:295px;}
|
||||
|
||||
.aleftboxtbott{background:url(../img/aleftboxtbott.png);background-repeat: no-repeat;background-position: -5px -5px; width:352px; height:385px;}
|
||||
/* .aleftboxtbott_cont{ background:rgba(1,202,217,.2) } */
|
||||
.amiddboxttop{background:url(../img/amiddboxttop.png);background-repeat: no-repeat;background-position: -5px 0; width:1153px; height:575px;}
|
||||
.amiddboxttop_map{background:url(../img/img.png);background-repeat: no-repeat;background-position: -5px -5px; position: relative; width:1040px; height:490px;}
|
||||
.amiddboxttop_map span{background:url(../img/camera.png);background-repeat: no-repeat;background-position: 0 0; width: 24px; height: 19px; display: inline-block; position: absolute;}
|
||||
.amiddboxttop_map span.camera_l{background:url(../img/camera_l.png);background-repeat: no-repeat;background-position: 0 0; width: 24px; height: 19px; display: inline-block; position: absolute;}
|
||||
|
||||
.amiddboxtbott1{background:url(../img/amiddboxtbott1.png);background-repeat: no-repeat;background-position: -5px -5px; width:568px; height:388px;}
|
||||
.amiddboxtbott2{background:url(../img/amiddboxtbott2.png);background-repeat: no-repeat;background-position: -5px -5px; width:574px; height:393px;}
|
||||
|
||||
.arightboxtop{background:url(../img/arightboxtop.png);background-repeat: no-repeat;background-position: left top; width:354px; height:572px;}
|
||||
.arightboxbott{background:url(../img/arightboxbott.png);background-repeat: no-repeat;background-position: left top; width:354px; height:397px;}
|
||||
.plefttoday{background:url(../img/pleft1middt.png);background-repeat: no-repeat;background-position:-22px -18px; width:360px; height:300px;}
|
||||
.plefttoday .widget-inline-box{ width: 49%;}
|
||||
.lpeftmidbot{background:url(../img/pleft1middb.png);background-repeat: no-repeat;background-position:-22px -21px; width:360px; height:284px;}
|
||||
.lpeftbot{background:url(../img/pleft1middb.png);background-repeat: no-repeat;background-position:-22px -22px; width:360px; height:284px;}
|
||||
.pleftbox2top{background:url(../img/pleftbox2top.png);background-repeat: no-repeat;background-position:-22px -18px; width:360px; height:392px;}
|
||||
.pleftbox2midd{background:url(../img/pleftbox2mid.png);background-repeat: no-repeat;background-position:-22px -20px; width:360px; height:285px;}
|
||||
.pmrboxbottom{background:url(../img/pmiddboxmidd.png);background-repeat: no-repeat;background-position: -26px -26px; position: relative; width:820px; height:232px;}
|
||||
.pmrtop{background:url(../img/prighttop.png);background-repeat: no-repeat;background-position:-22px -20px; width:360px; height:335px;}
|
||||
.pmrtop_cont{background: rgba(1,202,217,.2); }
|
||||
.pmrtop_wid .widget-inline-box{ width: 33%;}
|
||||
|
||||
|
||||
.pulefttop{background:url(../img/pulefttop.png);background-repeat: no-repeat;background-position:-5px -5px; width:700px; height:300px;}
|
||||
.puleftboxtmidd{background:url(../img/puleftmidd.png);background-repeat: no-repeat;background-position:-5px -5px; width:700px; height:300px;}
|
||||
.puleftboxtbott{background:url(../img/puleftbott.png);background-repeat: no-repeat;background-position:-5px -5px; width:700px; height:370px;}
|
||||
|
||||
.pumiddboxttop1{background:url(../img/pumiddtop1.png);background-repeat: no-repeat;background-position:-5px -1px; width:330px; height:595px;}
|
||||
.pumiddboxttop2{background:url(../img/pumiddtop2.png);background-repeat: no-repeat;background-position:-5px -1px; width:350px; height:595px;}
|
||||
.pmiddboxtbott{ background:url(../img/pumiddbott.png);background-repeat: no-repeat;background-position:-5px -5px; width:700px; height:370px;}
|
||||
.purightboxtop{background:url(../img/purighttop.png);background-repeat: no-repeat;background-position:-5px -5px; width:460px; height:300px;}
|
||||
.purightboxmidd{background:url(../img/purightmidd.png);background-repeat: no-repeat;background-position:-5px -5px; width:460px; height:300px;}
|
||||
.purightboxbott{background:url(../img/purightbott.png);background-repeat: no-repeat;background-position:-5px -5px; width:460px; height:370px;}
|
||||
|
||||
.tith2 span{ display: inline-block; float: left; width: 300px;}
|
||||
.pulefttoday_bar,.puleftboxtbott2,.pumiddboxtbott2{background: rgba(1,202,217,.2); }
|
||||
.puleftboxtbott2 .widget-inline-box{ width: 100%; margin: 0; padding-top: 10px;}
|
||||
.pumiddboxttop1 { padding-left:15px;}
|
||||
.pumiddboxttop1 .widget-inline-box{width: 45%; background: rgba(1,202,217,.2); margin-left: 2%; margin-bottom: 1.5%; padding: 19.4% 0;}
|
||||
.f30{ font-size: 40px !important; margin: 15px 0}
|
||||
.pumiddboxtbott2 .widget-inline-box{ width: 100%; margin: 0; padding-top: 10px; text-align: center; padding-top: 40%;}
|
||||
|
||||
.pumiddboxttop2_cont{ width: 305px; margin-left: 20px; margin-top: 10px; height: 494px; overflow: hidden;}
|
||||
.pumiddboxttop2_cont li{ background: rgba(1,202,217,.2) url(../img/hot.png) no-repeat 12px 12px; }
|
||||
.pumiddboxttop2_cont li p{height: 20px; line-height: 18px; overflow: hidden; padding-left: 21px;}
|
||||
.pumiddboxttop2_cont li p.text_r{ text-align: right;}
|
||||
.pumiddboxttop2_cont li.bg {
|
||||
background: rgba(0,255,255,.4) url(../img/hot.png) no-repeat 12px 12px;
|
||||
}
|
||||
.pvr{ position: relative; }
|
||||
.pvr ul{ position: absolute;; left: 15px; top: 21px;}
|
||||
.pvr ul li{ width: 16px; height: 16px; text-align: center;line-height: 16px; border-radius: 2px;margin-top: 15px; font-size: 12px;display:block;color: #fff; z-index: 1111}
|
||||
.hot1{ background-color: #ff0000}
|
||||
.hot2{ background-color: #ff7200}
|
||||
.hot3{ background-color: #ffbd5e}
|
||||
.hot4{ background-color: #b3b3b3}
|
||||
.hot5{ background-color: #597a9f}
|
||||
.liwp ul li{margin-top: 18px; }
|
||||
|
||||
.el-radio-button__inner{
|
||||
border: none;
|
||||
font-size: 12px !important;
|
||||
background: rgba(0,183,238,.1);
|
||||
color: rgba(255,255,255,.9);
|
||||
border-radius: 4px 4px 4px 4px !important;
|
||||
padding: 5px 13px
|
||||
|
||||
}
|
||||
.el-radio-button:first-child .el-radio-button__inner{
|
||||
border-left: none;
|
||||
}
|
||||
.el-radio-button__orig-radio:checked+.el-radio-button__inner{
|
||||
background: rgba(0,183,238,.6);
|
||||
}
|
||||
.lefttoday_number .el-col{
|
||||
text-align: center;
|
||||
padding: 14px 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,.9);
|
||||
}
|
||||
#rkfx{
|
||||
overflow: hidden
|
||||
}
|
||||
.navs{
|
||||
margin-bottom: 18px
|
||||
}
|
||||
.lefttime_text{
|
||||
text-align: center;
|
||||
}
|
||||
.chilabel input{
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.chilabel span{
|
||||
border: none;
|
||||
font-size: 12px !important;
|
||||
background: rgba(0,183,238,.1);
|
||||
color: rgba(255,255,255,.9);
|
||||
border-radius: 4px 4px 4px 4px !important;
|
||||
padding: 4px 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.chilabel span.isck{
|
||||
border: none;
|
||||
font-size: 12px !important;
|
||||
background: rgba(0,183,238,.6);
|
||||
color: rgba(255,255,255,.9);
|
||||
border-radius: 4px 4px 4px 4px !important;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
.chilabel span:hover{
|
||||
background: rgba(0,183,238,.6);
|
||||
}
|
||||
.chilabel label:nth-child(1){
|
||||
width: 30%
|
||||
}
|
||||
.chilabel label:nth-child(2){
|
||||
width: 30%
|
||||
}
|
||||
.chilabel label:nth-child(3){
|
||||
width: 30%
|
||||
}
|
||||
.chilabel label:nth-child(4){
|
||||
width: 35%;
|
||||
margin-top: 5px;
|
||||
text-align: right
|
||||
}
|
||||
.chilabel label:nth-child(5){
|
||||
width: 35%;
|
||||
margin-top: 5px;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.chilabel .lefttime_text{
|
||||
padding: 0px 15px 0 15px
|
||||
}
|
||||
.lefttime_text_top{
|
||||
margin-top: 5px;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-moz-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.el-radio-group{
|
||||
width: 100%
|
||||
}
|
||||
@ -1,311 +0,0 @@
|
||||
/****** PLACE YOUR CUSTOM STYLES HERE ******/
|
||||
body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0; background:#051655 ;
|
||||
font-family: 微软雅黑, MicrosoftYahei, sans-serif; color:#fff;
|
||||
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
pre,
|
||||
table,
|
||||
blockquote,
|
||||
input,
|
||||
button,
|
||||
select,em,
|
||||
textarea {
|
||||
margin: 0; font-weight:normal;
|
||||
margin: 0;
|
||||
padding: 0;list-style: none;font-style: normal;
|
||||
}
|
||||
html,body{ font-family: 微软雅黑, MicrosoftYahei, sans-serif; color:#fff; background:#00065b url(../img/bg.jpg); background-size: 100% 100%;background-position:0 0; width: 100%; height: 100%; background-repeat: no-repeat;}
|
||||
.wpbox{
|
||||
width: 100%;
|
||||
height: calc(100% - 10px)
|
||||
}
|
||||
.bnt{ height:9%; width: 100%; display: inline-block;}
|
||||
.left1{ width: 18%; height: calc(100% - 10%);float: left; padding-left:2.2%; text-align: center;}
|
||||
.pleft1{width: 18.6%; float: left; padding-left:2.2%; text-align: center;}
|
||||
.puleft{padding-left:2.2%; width: 35.2%;text-align: center; height: 100%}
|
||||
.puleft2{width: 35%; height: 100%; padding-left: .4%}
|
||||
.mr_right{width: 25%; height: 100%}
|
||||
.left2{width: 18%; float: left; height: 100%}
|
||||
.mrbox{float: left; width: 79%; height: 100%}
|
||||
.mrbox.prbox{float: left; width: 60%; height: 100%}
|
||||
.mrbox_bottom{float: left; width: 100%; height: 28%}
|
||||
.mrbox_top_midd{ width: 68%;float: left; height: 100%;}
|
||||
.mrbox_topmidd{float: left; width:76%; padding-left:.2%;height: 100%;}
|
||||
.amidd_bott,.box{ overflow: hidden;}
|
||||
.pmidd_bott{ width: 100%; height: 57.4%;}
|
||||
|
||||
.mrbox_top_right{ float: right; width: 29.4%; padding-right: 1.4%; height: 100%}
|
||||
.mrbox_top{width: 100%; height:62.4%;}
|
||||
.hdmrbox_top{width: 100%; height:100%;}
|
||||
|
||||
|
||||
.lefttime{ background:url(../img/time.png); background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:84%; height:9.3%; margin-left: 6%}
|
||||
.lefttime_text{ padding: 2% 5% 0 5%}
|
||||
.lefttime_text li{ font-size: 12px; color: rgba(255,255,255,.9); width: 20%;float: left; height: 22px; line-height: 22px;text-align: center; border-radius: 4px}
|
||||
.lefttime_text li.bg{ background: rgba(0,183,238,.1);}
|
||||
.lefttime_text li.active{ background: rgba(0,183,238,.6); color: #fff;} */
|
||||
.lefttoday{background:url(../img/left1box.png);background-repeat: no-repeat;background-position: -3px 2px; width:350px; height:584px;margin: 0 auto;}
|
||||
|
||||
.lefttoday_tit{ overflow: hidden; padding: 1.9% 5% .2%; height: 6%; position: relative;}
|
||||
.lefttoday_tit.height{height: 12%;}
|
||||
.lefttoday_number{overflow: hidden; height: 74%; width: 91%; margin: 1% 4%;background: rgba(1,202,217,.2);}
|
||||
.lefttoday_tit p.fl{ font-size: 12px; color: rgba(255,255,255,1); position: absolute;left: 5%;top: 22%}
|
||||
.lefttoday_tit p.fr{ font-size: 12px; color: rgba(255,255,255,.6); position: absolute;right: 5%;top: 25%}
|
||||
.lefttoday_tit p.fm{font-size: 12px; color: rgba(255,255,255,1); position: absolute;left: 40%;top: 25%}
|
||||
|
||||
.lefttoday_tit.height.ht{height: 16%;}
|
||||
.lefttoday_tit.height p.fl{position: absolute;left:5%;top: 15%;}
|
||||
.lefttoday_tit.height p.fr{position: absolute;left:5%;top: 65%; right: auto;}
|
||||
|
||||
.lefttoday_bar ul{position: relative; width: 100%; height: 100%;}
|
||||
.lefttoday_bar li{ color: #333; position: absolute;border-radius: 50%; font-size: 12px; overflow: hidden; font-weight: normal; text-align: center; line-height: 140%}
|
||||
.lefttoday_bar li span{ padding-top: 30%; display: inline-block;}
|
||||
.c1{ background: #ac3ff2}
|
||||
.c2{ background: #ffff00}
|
||||
.c3{ background: #0078ff}
|
||||
.c4{ background: #9cff00}
|
||||
.c5{ background: #ff6c00}
|
||||
.c6{ background: #77b5fb}
|
||||
.big0{ width: 10px; height: 10px}
|
||||
.big1{ width: 20px; height: 20px}
|
||||
.big2{ width: 30px; height: 30px}
|
||||
.big3{ width: 40px; height: 40px}
|
||||
.big4{ width: 50px; height: 50px}
|
||||
.big5{ width: 60px; height: 60px}
|
||||
.big6{ width: 70px; height: 70px;}
|
||||
|
||||
.leftclass{background:url(../img/leftb1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:350px; height:291px;}
|
||||
.leftbox2_table{background:url(../img/leftbox2.png);background-repeat: no-repeat;background-position: -2px -2px; width:354px; height:680px;}
|
||||
.left2_table{ width: 91%; margin-left: 5%; font-size: 12px;height:83.6%; overflow: hidden;}
|
||||
.hdleft2_table{ width: 91%; margin-left: 5%; font-size: 12px;height:91.6%; overflow: hidden;}
|
||||
.left2_table li{background: rgba(1,202,217,.2) url(../img/icosjx.png) no-repeat top left; position: relative;overflow: hidden; padding: 2% 6%; color:rgba(255,255,255,.7); line-height: 150%}
|
||||
.left2_table li b{color:rgba(255,255,255,1); font-weight: normal;}
|
||||
.left2_table li p.fl{ width: 80%; overflow: hidden;}
|
||||
.left2_table li p.fr{ position: absolute; right: 5%; top: -20%;}
|
||||
.yellow{ color: #fff45c}
|
||||
.green{ color: #00c2fd}
|
||||
.left2_table li.bg{ background: rgba(0,255,255,.4) url(../img/icosjx.png) no-repeat top left;}
|
||||
.mrbox_tr_box{background:url(../img/rbox1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:354px; height:291px;}
|
||||
|
||||
.mrboxtm-mbox{background:url(../img/midtop.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height: 63.6%;}
|
||||
.mrboxtm-b1{background:url(../img/mbox1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:460px; height:233px; float: left;}
|
||||
.mrboxtm-b2{background:url(../img/mbox2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center;width:330px; height:233px;float: right;}
|
||||
/* .mrbox_tr_box{background:url(../img/rbox1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:350px; height:680px;} */
|
||||
|
||||
.hdmrboxtm-mbox{background:url(../img/hdbj.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height: 61.6%;}
|
||||
|
||||
|
||||
.rbottom_box1{background:url(../img/b-rbox2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:33.5%; height:89.4%; float: left;}
|
||||
.rbottom_box2{background:url(../img/bbox2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:33.5%; height:89.4%;float: left; margin-left:.8%}
|
||||
.rbottom_box3{background:url(../img/b-rbox2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:30%; height:89.4%;float: left; margin-left:1%}
|
||||
.prbottom_box1cont{ margin-left: 5.2%; width: 90.6%; height: 82%; margin-top: 1.8%;}
|
||||
.prbottom_box2cont{ margin-left: 5.2%; width: 90.6%; height: 82%; margin-top: 1.8%;}
|
||||
.prbottom_box3cont{ margin-left: 5.2%; width: 90.6%; height: 82%; margin-top: 1.8%;}
|
||||
|
||||
.tith2{ text-align: center; width: 100%; font-size: 12px; padding-top: 1.9%; font-weight: normal;letter-spacing:2px; font-weight: normal; overflow: hidden;}
|
||||
.fl{ float: left;}
|
||||
.fr{ float: right;}
|
||||
.topbnt_left{width: 33%}
|
||||
.topbnt_left ul{ padding-top: 38px; padding-left: 10%; width: 100%}
|
||||
.topbnt_left li { background:url(../img/bnt.png) center; font-size: 14px; line-height: 33px;background-repeat: no-repeat;width:18%; height:35px;float: left; text-align: center; margin-left: 1%}
|
||||
.topbnt_left li.active,.topbnt_right li.active{background:url(../img/bntactive.png) no-repeat center; }
|
||||
.topbnt_left li a{ text-decoration: none; color: #fff;}
|
||||
.tith1{ width: 33%; text-align: center; padding-top: 16px; font-weight: bold; letter-spacing:8px; font-size: 36px;}
|
||||
.topbnt_right{padding-top: 2%; padding-right:2.5%; width: 27%}
|
||||
.topbnt_right li { background:url(../img/bnt.png) center; font-size: 14px; line-height: 33px;background-repeat: no-repeat;width:22%; height:35px;float: right; text-align: center; margin-right:1%}
|
||||
.topbnt_right li a{ text-decoration: none; color: #fff;}
|
||||
.pt1{padding-top: 1.3%; }
|
||||
.pt2{padding-top: 2.2%; }
|
||||
.pt3{padding-top: 3.3%; }
|
||||
.pt6{padding-top: 6px; }
|
||||
.pt17{ padding-top: 17px;}
|
||||
.pt14{ padding-top: 14px}
|
||||
.pt12{ padding-top: 12px}
|
||||
.pt20{ padding-top: 22px;}
|
||||
/* .box_pad{ margin: 3px 20px; } */
|
||||
|
||||
.mrboxtm-map{background:url(../img/mapbg.png); background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width: 90%; margin-left: 4%; margin-top: 1%;height: 90%;position: relative;}
|
||||
.hdmrboxtm-map{background:url(../img/hdmap.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width: 90%; margin-left: 4%; margin-top: 1%;height: 66%; position: relative;}
|
||||
.mrboxtm-map li{ width: 23px; height: 22px; line-height: 22px; color: #fff; text-align: center; background-position: center; background-repeat: no-repeat;font-size: 12px; position: absolute;}
|
||||
.mrboxtm-map li.bluer{background-image:url(../img/blue_rico.png);}
|
||||
.mrboxtm-map li.redr{background-image:url(../img/red_rico.png);}
|
||||
.ricontop{width: 29px; height: 30px; line-height: 30px; color: #fff; text-align: center; bbackground-size: 100% 100%; background-repeat: no-repeat;background-position: top center;font-size: 12px; margin-right: 5px;font-style: normal; display: inline-block;}
|
||||
i.bluer{background-image:url(../img/ricon2.png);}
|
||||
i.redr{background-image:url(../img/ricon1.png);}
|
||||
.font14 p.fl,.font14 p.fr{ color: #fff;font-size: 14px;}
|
||||
.mrtop1{background: rgba(1,202,217,.2); overflow: hidden; margin: 4px 15px;}
|
||||
.widget-inline-box{ text-align: center; color:rgba(255,255,255,.9); width: 50%; padding: 10% 0;text-align: center; font-size: 12px;float: left; overflow:hidden;}
|
||||
.widget-inline-box h3{ font-size: 22px; font-weight: 100; font-weight: normal;}
|
||||
.ceeb1fd{ color: #eeb1fd}
|
||||
.c24c9ff{ color: #24c9ff}
|
||||
.cffff00{ color: #ffff00}
|
||||
.c11e2dd{ color: #11e2dd}
|
||||
.text-muted{ font-size: 12px; color:#789ce0; }
|
||||
.text-muted img{ vertical-align: middle; margin: 0 3px}
|
||||
.mrtop2{margin: 4px 15px; padding: 20px 0;background: rgba(1,202,217,.2); width: 305px}
|
||||
.tith4{ font-size: 12px; text-align: center;}
|
||||
.mrtop3{margin: 4px 15px; padding: 20px 0;background: rgba(1,202,217,.2); width: 305px}
|
||||
|
||||
.mrboxtm-b1wp{margin: 4px 25px; padding: 20px 0;background: rgba(1,202,217,.2); width:415px; overflow: hidden;}
|
||||
.mrboxtm_text{overflow: hidden; padding-left: 12px; padding-bottom: 10px;}
|
||||
.mrbtext_info{background: rgba(1,202,217,.2); font-weight: normal; padding: 10px 0; text-align: center; font-size: 12px; color:rgba(255,255,255,.7); float: left; margin: 2px 0 10px 8px; width: 140px;}
|
||||
.mrbtext_info b{ font-weight: normal; font-size: 18px;}
|
||||
.lefttoday_number .widget-inline-box{ width: 25%}
|
||||
|
||||
/* 警情警力分析 完*/
|
||||
.aleftboxttop{background:url(../img/leftb1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:99%; height: 27.5%; margin-bottom: 1%}
|
||||
.aleftboxttop .lefttoday_number{ background: none; }
|
||||
.aleftboxttop .widget-inline-box{width: 24.2%; margin: 0 .4%; background: rgba(1,202,217,.2); padding: 16% 0; height:100%; font-size: 10px;}
|
||||
|
||||
.aleftboxtmidd{background:url(../img/aleftboxtmidd.png); background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:98.5%; height: 29.4%;margin-bottom: 1%}
|
||||
.aleftboxtmiddcont{width:91%; height:66%;margin-left: 4.4%; margin-top: 1%;}
|
||||
.aleftboxtbott{background:url(../img/aleftboxtbott.png); background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%;height: 40% }
|
||||
.aleftboxtbott_cont{width:91%; height:72.6%; margin-top: 1.8%;margin-left: 4.4%;}
|
||||
.aleftboxtbott_cont2{width:89.9%; height:86.6%; margin-top:2.8%;margin-left: 5%;}
|
||||
.aleftboxtbott_contr{width:89.9%; height:90.6%; margin-top:1.8%;margin-left: 5%;}
|
||||
.amiddboxttop{ overflow: hidden;background:url(../img/amiddboxttop.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:99%; height:52.1%;}
|
||||
.amiddboxttop_map{background:url(../img/img.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; position: relative; width:90%; height:86%; margin:1.4% 5% 0;}
|
||||
.hot_map{ width:90%; height:86%; margin:1.4% 5% 0;}
|
||||
|
||||
.amidd_bott{ width: 100%; height: 38%; padding-top:.8%}
|
||||
.amiddboxttop_map span{background:url(../img/camera.png);background-repeat: no-repeat;background-position: 0 0; width: 24px; height: 19px; display: inline-block; position: absolute;}
|
||||
.amiddboxttop_map span.camera_l{background:url(../img/camera_l.png);background-repeat: no-repeat;background-position: 0 0; width: 24px; height: 19px; display: inline-block; position: absolute;}
|
||||
|
||||
.amiddboxtbott1{background:url(../img/amiddboxtbott1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center;width:48%; height:91.6%; margin-left: .5%; margin-right: 1%}
|
||||
.amiddboxtbott1content{width:91%; height:86.5%; margin-left: 4.8%; margin-top: 1.6%;}
|
||||
.amiddboxtbott1content2{width:91%; height:80%; margin-left: 4.8%; margin-top: .6%;}
|
||||
.amiddboxtbott2{background:url(../img/amiddboxtbott2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; float: right; width:49%; height:91.8%; margin-right: .9%;}
|
||||
.amiddboxtbott2content{width:91.8%; height:86%; margin-left: 4.4%; margin-top: 1.6%;}
|
||||
.arightboxtop{background:url(../img/arightboxtop.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height: 51.9%;}
|
||||
.arightboxbott{background:url(../img/arightboxbott.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height: 35%; margin-top: 3%}
|
||||
.arightboxbottcont{ width: 91%; margin-top: 1%; margin-left: 5%;height: 79%;}
|
||||
.arightboxbottcont2{ width: 90%; margin-top: 1.6%; margin-left: 5.3%;height: 85.5%;}
|
||||
.plefttoday{background:url(../img/pleft1middt.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:96%; height:30%;margin-top: .4%;}
|
||||
.plefttoday .widget-inline-box{ width: 48%; padding: 4% 0}
|
||||
.lpeftmidbot{background:url(../img/pleft1middb.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:95.8%; height:27.6%;margin-top: 3.4%;}
|
||||
.lpeftmidbotcont{width: 90.1%; margin-top: 2%; margin-left: 5.2%;height: 82%;}
|
||||
.lpeftbot{background:url(../img/pleft1middb.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:95.8%; height:27.6%; margin-top: 3.4%;}
|
||||
.lpeftbotcont{width: 90.1%; margin-top: 2%; margin-left: 5.2%;height: 82%;}
|
||||
.pleftbox2top{background:url(../img/pleftbox2top.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:96.8%; height:35.2%; margin-top: 1%;}
|
||||
.pleftbox2topcont{width: 90.1%; margin-top: 2%; margin-left: 5%;height: 88%}
|
||||
.pleftbox2midd{background:url(../img/pleftbox2mid.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:96.8%; height:24.6%;margin-top: 3.8%;}
|
||||
.pleftbox2middcont{width: 90.1%; margin-top: 2%; margin-left:5.2%;height: 82%; overflow: hidden;}
|
||||
.lpeft2bot{background:url(../img/pleft1middb.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:97.8%; height:24.6%; margin-top: 4.2%;}
|
||||
.lpeftb2otcont1{width:100%; height: 100%;}
|
||||
.hdrightboxtop{background:url(../img/hdbjr.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height: 87%;}
|
||||
|
||||
|
||||
.lpeftb2otcont{width: 90.1%;margin-top: 2%; margin-left:5.2%;height: 82%;}
|
||||
.pmrboxbottom{background:url(../img/pmiddboxmidd.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center;position: relative; width: 100%; height: 32.9%; margin-top: 1.8%;}
|
||||
.pmrboxbottomcont{width: 94.1%;margin-top: 1.1%; margin-left:3.1%;height: 76%;}
|
||||
.mrbox_bottom_bott{width: 100%; height: 27%; margin-top: 1.8%;}
|
||||
.pmrtop{background:url(../img/prighttop.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width: 100%; height: 56.6%;}
|
||||
.pmrtop_contheight{ height: 30%; width: 100%; overflow: hidden;}
|
||||
|
||||
.pmrtop1{background:url(../img/prighttop.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width: 100%; height: 40.4%;}
|
||||
.pmrtop_cont1{ height: 87%; width: 100%; overflow: hidden;}
|
||||
|
||||
.pmrmiddcont{width: 98.1%;margin-top: 1.1%; margin-left:3.1%;height: 64%;}
|
||||
.pmrtop_contheight .widget-inline-box{ padding: 5% 0;}
|
||||
.lefttoday_bar{height: 56%; width: 100%;}
|
||||
.pmrtop_cont{background: rgba(1,202,217,.2); width: 90.6%; height: 86%; margin: 2.2% 0 0 5.1% }
|
||||
.pmrtop_wid .widget-inline-box{ width: 33%;}
|
||||
|
||||
|
||||
.pulefttop{background:url(../img/pulefttop.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height:29%;}
|
||||
.puleftboxtmidd{background:url(../img/puleftmidd.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height:28.6%; margin-top: 1%}
|
||||
.puleftboxtbott{background:url(../img/puleftbott.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height:28%;margin-top: 1%}
|
||||
|
||||
.pumiddboxttop1{background:url(../img/pumiddtop1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center;width:47.7%; height:100%;padding-left: 1.4%;}
|
||||
.pumiddboxttop2{background:url(../img/pumiddtop2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:47.7%; height:100%; margin-left: 1.4%;}
|
||||
.pmiddboxtbott{ background:url(../img/pumiddbott.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:98.4%; height:27.8%;margin-top: 2%}
|
||||
.purightboxtop{background:url(../img/purighttop.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height:29%;}
|
||||
.purightboxmidd{background:url(../img/purightmidd.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height:28%; margin-top: 1.8%}
|
||||
.purightboxbott{background:url(../img/purightbott.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height:28%; margin-top: 2.2%}
|
||||
.purightboxtopcont{width:90.2%; height:77%;margin-left:5%;}
|
||||
.purightboxmiddcont{width:90.2%; height:77%;margin-left:5%;}
|
||||
.purightboxbottcont{width:90.2%; height:77%;margin-left:5%;}
|
||||
.pumiddboxtbott1cont{width:62%; height:100%;margin-left:3%;}
|
||||
|
||||
|
||||
.tith2 span{ display: inline-block; float: left; width: 40%;}
|
||||
.pbox{ width: 100%; height: 76%;}
|
||||
.pulefttoday_bar{width: 46.7%; height: 100%; margin-left: 2.5%;}
|
||||
.pulefttoday_bar2{width: 46.7%; height: 100%; margin-right: 2.5%;}
|
||||
.puleftboxtmidd1{width: 46.7%; height: 100%; margin-left: 2.5%;}
|
||||
.puleftboxtbott1{width: 62.7%; height: 100%; margin-left: 2.5%;}
|
||||
.puleftboxtbott2{width: 30.7%; height: 100%; margin-right: 2.5%;}
|
||||
.puleft2height{ width: 96%; height: 88%; margin-left: 3%;}
|
||||
.puleftbox2bott_cont{width: 100%; height: 100%; }
|
||||
.pulefttoday_bar,.puleftboxtbott2,.pumiddboxtbott2{background: rgba(1,202,217,.2); }
|
||||
.puleftboxtbott2 .widget-inline-box{ width: 100%; margin: 0; padding: 2% 0}
|
||||
|
||||
.pumiddboxttop1 .widget-inline-box{width: 45%; background: rgba(1,202,217,.2); margin-left: 2%; margin-bottom: 1.5%; height: 38%; }
|
||||
.pumiddboxttop1 .widget-inline-box p{ padding-top: 30%;}
|
||||
.f30{ font-size: 40px !important; margin:10% 0}
|
||||
.pumiddboxtbott2{width: 30.9%; height: 100%; margin-right: 2.5%;}
|
||||
.pumiddboxtbott2 .widget-inline-box{ width: 100%; margin: 0; text-align: center;}
|
||||
.pumiddboxtbott2 .widget-inline-box p{ padding-top: 19%}
|
||||
|
||||
.pumiddboxttop2_cont{ width: 90%; margin-left: 4.5%; margin-top: 0; height: 85.4%; overflow: hidden; text-align: left;}
|
||||
.pumiddboxttop2_cont ul{ height: 100%;}
|
||||
.pumiddboxttop2_cont li{ background: rgba(1,202,217,.2) url(../img/hot.png) no-repeat 12px 12px; height: 13.8%}
|
||||
.pumiddboxttop2_cont li p.text_l{ line-height: 160%; width: 95%; overflow: hidden; padding-left: 10%;}
|
||||
.pumiddboxttop2_cont li p.text_r{ text-align: right; width: 99%;height: 40%;}
|
||||
.pumiddboxttop2_cont li.bg {
|
||||
background: rgba(0,255,255,.4) url(../img/hot.png) no-repeat 12px 12px;
|
||||
}
|
||||
.pvr{ position: relative; }
|
||||
.pvr ul{ position: absolute; left:11%; top: 13%;}
|
||||
.pvr ul li{ width: 16px; height: 16px; text-align: center;line-height: 16px; margin-top: 82%; border-radius: 2px; font-size: 12px;display:block;color: #fff; z-index: 1111}
|
||||
.hot1{ background-color: #ff0000}
|
||||
.hot2{ background-color: #ff7200}
|
||||
.hot3{ background-color: #ffbd5e}
|
||||
.hot4{ background-color: #b3b3b3}
|
||||
.hot5{ background-color: #597a9f}
|
||||
.liwp ul li{margin-top: 79%; }
|
||||
.hdtop ul li{margin-top: 95%; }
|
||||
.pulefttoday_bar2 ul{ position: absolute; left:4.7%; top: 8%;}
|
||||
.pulefttoday_bar2 ul li{margin-top: 110%; }
|
||||
.tlbox{overflow: hidden; height: 74%; width: 91%; margin: 1% 4%;background: rgba(1,202,217,.2); font-size: 12px;}
|
||||
.tlbox p.text{ padding-left: 3%;}
|
||||
.tlbox p.text span{ width: 27.8%; color: rgba(255,255,255,.6);display: inline-block; text-align: left;}
|
||||
.tlbox ul{ height: 100%}
|
||||
.tlbox li{ height: 20%; padding-top: 5.6%;}
|
||||
.tlbox p.rwith{width: 90%; height: 10px; background: #4ab4ff; margin: 2% 5%;}
|
||||
.tlbox span.rwith_img{ height: 10px; background: #f8e19a; float: left; display: inline-block;}
|
||||
.tlbox p.text span.w12{ width: 28%; text-align: left;}
|
||||
.tlbox p.bgc3{ background: #f19ec2}
|
||||
.tlbox span.qgc2{ background: #7ecef4}
|
||||
.tlbox p.bgc2{ background: #99b0f7}
|
||||
.tlbox span.qgc3{ background: #cce198}
|
||||
.tlbox p.text span.tr{ text-align: right; width: 10%; padding-right: 3%;}
|
||||
|
||||
.tlbox li span i{width: 14px; height: 6px; display: inline-block; margin-right: 3px;}
|
||||
.ricon1{ background:#f8e19a;}
|
||||
.ricon2{ background:#7ecef4;}
|
||||
.ricon3{ background:#f19ec2;}
|
||||
.tricon1{ background:#4ab4ff;}
|
||||
.tricon2{ background:#99b0f7;}
|
||||
.tricon3{ background:#cce198;}
|
||||
.hdwid{ width: 49.6%;}
|
||||
|
||||
|
||||
|
||||
/* 交通分析*/
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 704 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 756 B |
Binary file not shown.
|
Before Width: | Height: | Size: 748 B |
@ -1 +0,0 @@
|
||||
[Tue Jul 17 2018 11:19:39 GMT+0800 (CST)] Layer "bbox2.png": Duplicate file name: bbox2.png
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 528 B |
Binary file not shown.
|
Before Width: | Height: | Size: 634 B |
Binary file not shown.
|
Before Width: | Height: | Size: 647 B |
Binary file not shown.
|
Before Width: | Height: | Size: 426 B |
Binary file not shown.
|
Before Width: | Height: | Size: 804 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
14
3.舆情分析/js/echarts.min.js
vendored
14
3.舆情分析/js/echarts.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
3.舆情分析/js/jquery-3.2.0.min.js
vendored
4
3.舆情分析/js/jquery-3.2.0.min.js
vendored
File diff suppressed because one or more lines are too long
5
3.舆情分析/js/jquery.min.js
vendored
5
3.舆情分析/js/jquery.min.js
vendored
File diff suppressed because one or more lines are too long
1055
3.舆情分析/people.html
1055
3.舆情分析/people.html
File diff suppressed because it is too large
Load Diff
@ -1,890 +0,0 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>警情警力分析</title>
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
|
||||
<script src="js/echarts.min.js" charset="utf-8"></script>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="bnt">
|
||||
<div class="topbnt_left fl">
|
||||
<ul><li ><a href="#">警情警力</a></li>
|
||||
<li><a href="#">实有人口</a></li>
|
||||
<li><a href="#">流动人口</a></li>
|
||||
<li><a href="#">实名制</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="tith1 fl">舆情分析</h1>
|
||||
<div class=" fr topbnt_right">
|
||||
<ul>
|
||||
<li><a href="#">返回</a></li>
|
||||
<li><a href="#">分析报告</a></li>
|
||||
<li><a href="#">交通</a></li>
|
||||
<li><a href="#">舆情</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- bnt end -->
|
||||
<div class="puleft fl">
|
||||
<div class="pulefttop"><h2 class="tith2"><span>舆情来源分析</span></h2>
|
||||
<div class="lefttoday_tit"><p class="fl">地区：甘孜</p><p class="fr">2018-06-14</p></div>
|
||||
<div class="box pbox">
|
||||
<div class="lefttoday_bar pulefttoday_bar fl">
|
||||
<ul>
|
||||
<li class="c1 big1" style="top: 25%;left: 16%;"><span>交通警情6</span></li>
|
||||
<li class="c2 big2" style="top: 35%;left: 65%;"><span>求助1</span></li>
|
||||
<li class="c3 big4" style="top: 25%;left: 35%;"><span>无效报警2</span></li>
|
||||
<li class="c4 big5" style="top: 65%;left: 65%;"><span>投诉2</span></li>
|
||||
<li class="c5 big6" style="top: 65%;left: 25%;"><span>灾害事故1</span></li>
|
||||
<li class="c6 big1" style="top: 45%;left: 15%;"><span>刑事案件1</span></li>
|
||||
<li class="c1 big0" style="top: 35%;left: 75%;"></li>
|
||||
<li class="c2 big0" style="top: 85%;left: 55%;"></li>
|
||||
<li class="c3 big0" style="top: 85%;left: 15%;"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pvr fr pulefttoday_bar2" >
|
||||
<ul>
|
||||
<li class="hot1">1</li>
|
||||
<li class="hot2">2</li>
|
||||
<li class="hot3">3</li>
|
||||
<li class="hot4">4</li>
|
||||
<li class="hot5">5</li>
|
||||
</ul>
|
||||
<div id="puleftbox2bott_cont" class="puleftbox2bott_cont" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- lefttoday_number end -->
|
||||
</div>
|
||||
<div class="puleftboxtmidd">
|
||||
<h2 class="tith2">舆情区域分析</h2>
|
||||
<div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div>
|
||||
<div class="box pbox">
|
||||
<div id="puleftboxtmidd1" class="fl puleftboxtmidd1"></div>
|
||||
<div class="pvr fr pulefttoday_bar2" >
|
||||
<ul>
|
||||
<li class="hot1">1</li>
|
||||
<li class="hot2">2</li>
|
||||
<li class="hot3">3</li>
|
||||
<li class="hot4">4</li>
|
||||
<li class="hot5">5</li>
|
||||
</ul>
|
||||
<div id="puleftboxtmidd2" class="puleftbox2bott_cont"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="puleftboxtbott">
|
||||
<h2 class="tith2 pt1">舆情环比分析</h2>
|
||||
<div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div>
|
||||
<div class="box pbox">
|
||||
<div id="puleftboxtbott1" class="fl puleftboxtbott1" ></div>
|
||||
<div class="puleftboxtbott2 fr" >
|
||||
<div class="widget-inline-box text-center ">
|
||||
<p>今日舆情总数</p>
|
||||
<h3 class=" ceeb1fd">54</h3>
|
||||
<h4 class="text-muted ">环比<img src="img/iconup.png" height="16" />2%</h4>
|
||||
</div>
|
||||
<div class="widget-inline-box text-center ">
|
||||
<p>本周舆情总数</p>
|
||||
<h3 class=" c24c9ff">54</h3>
|
||||
<h4 class="text-muted ">环比<img src="img/icondown.png" height="16" />3%</h4>
|
||||
</div>
|
||||
<div class="widget-inline-box text-center ">
|
||||
<p>本月舆情总数</p>
|
||||
<h3 class=" cffff00">4</h3>
|
||||
<h4 class="text-muted ">环比<img src="img/icondown.png" height="16" />3%</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- left1 end -->
|
||||
<div class="fl pt6 puleft2">
|
||||
<div class="pmidd_bott">
|
||||
<div class="pumiddboxttop1 fl">
|
||||
<h2 class="tith2 pt3">今日舆情</h2>
|
||||
<div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10</p></div>
|
||||
<div class="puleft2height">
|
||||
<div class="widget-inline-box text-center ">
|
||||
<p>今日舆情总数</p>
|
||||
<h3 class=" ceeb1fd f30">54</h3>
|
||||
<h4 class="text-muted ">环比<img src="img/iconup.png" height="16" />2%</h4>
|
||||
</div>
|
||||
<div class="widget-inline-box text-center ">
|
||||
<p>本周舆情总数</p>
|
||||
<h3 class=" c24c9ff f30">54</h3>
|
||||
<h4 class="text-muted ">环比<img src="img/icondown.png" height="16" />3%</h4>
|
||||
</div>
|
||||
<div class="widget-inline-box text-center ">
|
||||
<p>本月舆情总数</p>
|
||||
<h3 class=" cffff00 f30">4</h3>
|
||||
<h4 class="text-muted ">环比<img src="img/icondown.png" height="16" />3%</h4>
|
||||
</div>
|
||||
<div class="widget-inline-box text-center ">
|
||||
<p>今日舆情总数</p>
|
||||
<h3 class=" ceeb1fd f30">54</h3>
|
||||
<h4 class="text-muted ">环比<img src="img/iconup.png" height="16" />2%</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pumiddboxttop2 fl">
|
||||
<h2 class="tith2 pt3">热门信息</h2>
|
||||
<div class="lefttoday_tit "><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10</p></div>
|
||||
<div class="left2_table pumiddboxttop2_cont">
|
||||
<ul>
|
||||
<li>
|
||||
<p class="text_l">村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
|
||||
<p class="text_r">新浪微博 转发：86 2018-06-14 11:08:56</p>
|
||||
</li>
|
||||
<li class="bg">
|
||||
<p class="text_l">村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
|
||||
<p class="text_r">新浪微博 转发：86 2018-06-14 11:08:56</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text_l">村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
|
||||
<p class="text_r">新浪微博 转发：86 2018-06-14 11:08:56</p>
|
||||
</li>
|
||||
<li class="bg">
|
||||
<p class="text_l">村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
|
||||
<p class="text_r">新浪微博 转发：86 2018-06-14 11:08:56</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text_l">村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
|
||||
<p class="text_r">新浪微博 转发：86 2018-06-14 11:08:56</p>
|
||||
</li>
|
||||
<li class="bg">
|
||||
<p class="text_l">村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
|
||||
<p class="text_r">新浪微博 转发：86 2018-06-14 11:08:56</p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text_l">村名王某因为被隔壁邻居的狗咬了，产生了纠纷，村名报警。</p>
|
||||
<p class="text_r">新浪微博 转发：86 2018-06-14 11:08:56</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- amidd_bott end-->
|
||||
<div class="pmiddboxtbott" >
|
||||
<h2 class="tith2 pt1">舆情同比分析</h2>
|
||||
<div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div>
|
||||
<div class="box pbox">
|
||||
<div id="pumiddboxtbott1" class="fl pumiddboxtbott1cont"></div>
|
||||
<div class="pumiddboxtbott2 fr" >
|
||||
<div class="widget-inline-box text-center ">
|
||||
<p>今年舆情总数</p>
|
||||
<h3 class=" ceeb1fd f30">54</h3>
|
||||
<h4 class="text-muted ">环比<img src="img/iconup.png" height="16" />2%</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- amidd_bott end -->
|
||||
</div>
|
||||
<!-- mrbox_top end -->
|
||||
<div class="mr_right fl">
|
||||
<div class="purightboxtop"><h2 class="tith2 pt12">舆情类别分析</h2>
|
||||
<div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10</p></div>
|
||||
<div id="purightboxtop" class="purightboxtopcont"></div>
|
||||
</div>
|
||||
<div class="purightboxmidd"><h2 class="tith2 pt12">七日舆情走势分析</h2>
|
||||
<div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10</p></div>
|
||||
<div id="purightboxmidd" class="purightboxmiddcont"></div>
|
||||
</div>
|
||||
<div class="purightboxbott"><h2 class="tith2 pt12">矛盾纠纷七日数据分析</h2>
|
||||
<div class="lefttoday_tit"><p class="fl">状态：已调节</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div>
|
||||
<div id="purightboxbott" class="purightboxbottcont" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mrbox_top_right end -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('puleftbox2bott_cont'));
|
||||
option = {
|
||||
color:['#7ecef4'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:40,
|
||||
right:20,
|
||||
top:30,
|
||||
bottom:0,
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,0)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,0)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,0)"
|
||||
},
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.5)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.5)"
|
||||
},
|
||||
data: ['微博','网站','新闻','贴吧','论坛']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '2011年',
|
||||
type: 'bar',
|
||||
barWidth :20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
1, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: 'rgba(230,253,139,.7)'},
|
||||
{offset: 1, color: 'rgba(41,220,205,.7)'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data: [18203, 23489, 29034, 104970, 131744]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('puleftboxtmidd1'));
|
||||
var data = [
|
||||
[5000, 10000, 6785.71],
|
||||
[4000, 10000, 6825],
|
||||
[3000, 6500, 4463.33],
|
||||
[2500, 5600, 3793.83],
|
||||
[2000, 4000, 3060],
|
||||
[2000, 4000, 3222.33],
|
||||
[2500, 4000, 3133.33],
|
||||
[1800, 4000, 3100],
|
||||
[1500, 1800, 1650]
|
||||
];
|
||||
var cities = ['甘孜县', '泸定县', '炉霍县', '色达县', '白玉县', '得荣县', '雅江县', '九龙县', '康定市' ];
|
||||
var barHeight = 50;
|
||||
option = {
|
||||
color:['#7ecef4'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:60,
|
||||
right:60,
|
||||
top:60,
|
||||
bottom:40
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
data: ['价格范围', '均值']
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
data: cities
|
||||
},
|
||||
radiusAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.5)"
|
||||
}
|
||||
},
|
||||
polar: {
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
data: data.map(function (d) {
|
||||
return d[0];
|
||||
}),
|
||||
coordinateSystem: 'polar',
|
||||
stack: '最大最小值',
|
||||
silent: true
|
||||
}, {
|
||||
type: 'bar',
|
||||
data: data.map(function (d) {
|
||||
return d[1] - d[0];
|
||||
}),
|
||||
coordinateSystem: 'polar',
|
||||
name: '价格范围',
|
||||
stack: '最大最小值'
|
||||
}, {
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
data: data.map(function (d) {
|
||||
return d[2] - barHeight;
|
||||
}),
|
||||
coordinateSystem: 'polar',
|
||||
stack: '均值',
|
||||
silent: true,
|
||||
z: 10
|
||||
}, {
|
||||
type: 'bar',
|
||||
data: data.map(function (d) {
|
||||
return barHeight * 2
|
||||
}),
|
||||
coordinateSystem: 'polar',
|
||||
name: '均值',
|
||||
stack: '均值',
|
||||
barGap: '-100%',
|
||||
|
||||
z: 10
|
||||
}],
|
||||
legend: {
|
||||
show: true,
|
||||
data: ['A', 'B', 'C']
|
||||
}
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('puleftboxtmidd2'));
|
||||
option = {
|
||||
color:['#7ecef4'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:40,
|
||||
right:20,
|
||||
top:30,
|
||||
bottom:0,
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,0)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,0)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,0)"
|
||||
},
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.5)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.5)"
|
||||
},
|
||||
data: ['微博','网站','新闻','贴吧','论坛']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '2011年',
|
||||
type: 'bar',
|
||||
barWidth :20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
1, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: 'rgba(230,253,139,.7)'},
|
||||
{offset: 1, color: 'rgba(41,220,205,.7)'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data: [18203, 23489, 29034, 104970, 131744]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('puleftboxtbott1'));
|
||||
var data = [
|
||||
[[28604,77,17099,'Australia',1990],[31163,77.4,2440,'Canada',1990],[1516,68,1605773,'China',1990],[13670,74.7,10082,'Cuba',1990],[28599,75,49805,'Finland',1990],[29476,77.1,569499,'France',1990],[31476,75.4,789237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870776,'India',1990],[29550,79.1,129285,'Japan',1990],[2076,67.9,201954,'North Korea',1990],[12087,72,42954,'South Korea',1990],[24021,75.4,33934,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,381958,'Poland',1990],[19349,69.6,1475652,'Russia',1990],[10670,67.3,53905,'Turkey',1990],[26424,75.7,57117,'United Kingdom',1990],[37062,75.4,252810,'United States',1990]],
|
||||
[[44056,81.8,23973,'Australia',2015],[43294,81.7,35927,'Canada',2015],[13334,76.9,1376043,'China',2015],[21291,78.5,11562,'Cuba',2015],[38923,80.8,55057,'Finland',2015],[37599,81.9,64345,'France',2015],[44053,81.1,80545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311027,'India',2015],[36162,83.5,126571,'Japan',2015],[1390,71.4,251317,'North Korea',2015],[34644,80.7,503439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,386194,'Poland',2015],[23038,73.13,143918,'Russia',2015],[19360,76.5,78630,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321771,'United States',2015]]
|
||||
];
|
||||
|
||||
option = {
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:60,
|
||||
right:40,
|
||||
top:45,
|
||||
bottom:40
|
||||
},
|
||||
title: {
|
||||
top: 5,
|
||||
left:20,
|
||||
textStyle:{
|
||||
fontSize:10,
|
||||
color:'rgba(255,255,255,.6)'
|
||||
},
|
||||
text: '环比类型：日环比'
|
||||
},
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 5,
|
||||
textStyle:{
|
||||
fontSize:10,
|
||||
color:'rgba(255,255,255,.6)'
|
||||
},
|
||||
data: ['1990', '2015']
|
||||
},
|
||||
xAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
|
||||
scale: true
|
||||
},
|
||||
series: [{
|
||||
name: '1990',
|
||||
data: data[0],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3];
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(204, 46, 72)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '2015',
|
||||
data: data[1],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3];
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('pumiddboxtbott1'));
|
||||
option = {
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:60,
|
||||
right:60,
|
||||
top:70,
|
||||
bottom:40
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: {show: true, readOnly: false},
|
||||
magicType: {show: true, type: ['line', 'bar']},
|
||||
restore: {show: true},
|
||||
saveAsImage: {show: true}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top:10,
|
||||
textStyle:{
|
||||
fontSize: 10,
|
||||
color:'rgba(255,255,255,.7)'
|
||||
},
|
||||
data:['2017年','2018年','同比增速']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
|
||||
data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.3)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.01)'
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
formatter: '{value} ml'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.3)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name:'2017年',
|
||||
type:'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#b266ff'},
|
||||
{offset: 1, color: '#121b87'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
||||
},
|
||||
{
|
||||
name:'2018年',
|
||||
type:'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#00f0ff'},
|
||||
{offset: 1, color: '#032a72'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
||||
},
|
||||
{
|
||||
name:'同比增速',
|
||||
type:'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#fffb34'},
|
||||
{offset: 1, color: '#fffb34'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('purightboxtop'));
|
||||
option = {
|
||||
color:['#76c4bf','#e5ffc7','#508097','#4d72d9'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:10,
|
||||
right:40,
|
||||
top:0,
|
||||
bottom:0,
|
||||
containLabel: true
|
||||
},
|
||||
// legend: {
|
||||
// x : 'center',
|
||||
// y : 'bottom',
|
||||
// textStyle:{
|
||||
// fontSize: 10,
|
||||
// color:'rgba(255,255,255,.7)'
|
||||
// },
|
||||
// data:['涉蒙','涉疆','涉军','涉恐','涉藏','涉稳','涉警']
|
||||
// },
|
||||
calculable : true,
|
||||
series : [
|
||||
|
||||
{
|
||||
name:'面积模式',
|
||||
type:'pie',
|
||||
radius : [10, 70],
|
||||
center : ['50%', '50%'],
|
||||
roseType : 'area',
|
||||
data:[
|
||||
{value:10, name:'涉蒙'},
|
||||
{value:5, name:'涉疆'},
|
||||
{value:15, name:'涉军'},
|
||||
{value:25, name:'涉恐'},
|
||||
{value:5, name:'涉藏'},
|
||||
{value:15, name:'涉稳'},
|
||||
{value:15, name:'涉警'}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('purightboxmidd'));
|
||||
option = {
|
||||
color:['#7de494','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
|
||||
grid: {
|
||||
left:30,
|
||||
right:40,
|
||||
top:30,
|
||||
bottom:20,
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
data: ['6-08','6-09','6-10','6-11','6-12','6-13','6-14']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'2014年',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
areaStyle: {normal: {}},
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('purightboxbott'));
|
||||
option = {
|
||||
color:['#00f1fc','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:20,
|
||||
right:20,
|
||||
top:0,
|
||||
bottom:20
|
||||
},
|
||||
legend: {
|
||||
top:10,
|
||||
textStyle:{
|
||||
fontSize: 10,
|
||||
color:'rgba(255,255,255,.7)'
|
||||
},
|
||||
data:['境外','境内']
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius : '55%',
|
||||
center: ['50%', '55%'],
|
||||
data:[
|
||||
{value:335, name:'境外'},
|
||||
{value:310, name:'境内'}
|
||||
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,724 +0,0 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>警情警力分析</title>
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
|
||||
<script src="js/echarts.min.js" charset="utf-8"></script>
|
||||
<script src="js/jquery-3.2.0.min.js" charset="utf-8"></script>
|
||||
<script src="beijing.js"></script>
|
||||
|
||||
<body>
|
||||
<div class="wpbox">
|
||||
<div class="bnt">
|
||||
<div class="topbnt_left fl">
|
||||
<ul><li class="active"><a href="#">警情警力</a></li>
|
||||
<li><a href="#">实有人口</a></li>
|
||||
<li><a href="#">流动人口</a></li>
|
||||
<li><a href="#">实名制</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="tith1 fl">交通分析</h1>
|
||||
<div class=" fr topbnt_right">
|
||||
<ul>
|
||||
<li><a href="#">返回</a></li>
|
||||
<li><a href="#">分析报告</a></li>
|
||||
<li><a href="#">交通</a></li>
|
||||
<li><a href="#">舆情</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- bnt end -->
|
||||
<div class="left1">
|
||||
<div class="aleftboxttop pt1"><h2 class="tith2">进州车辆情况</h2>
|
||||
<div class="lefttoday_tit" style=" height:8%"><p class="fl">地区：甘孜</p><p class="fm">周期：每日</p><p class="fr">2018-06-14</p></div>
|
||||
<div class="tlbox">
|
||||
<ul>
|
||||
<li>
|
||||
<p class="text"><span class="w12">本地车辆:</span><span><i class="ricon1"></i>昨日:6</span><span><i class="tricon1"></i>今日:5</span><span class="tr"><img src="img/icondown.png" height="16" /> 1</span></p>
|
||||
<p class="rwith"><span class="rwith_img" style="width:60%"></span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text"><span class="w12">外地车辆:</span><span><i class="ricon2"></i>昨日:600</span><span><i class="tricon2"></i>今日:500</span><span class="tr"><img src="img/iconup.png" height="16" /> 1</span></p>
|
||||
<p class="rwith bgc2"><span class="rwith_img qgc2" style="width:40%"></span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text"><span class="w12">乘客人员数量:</span><span><i class="ricon3"></i>昨日:6</span><span><i class="tricon3"></i>今日:5</span><span class="tr"><img src="img/iconup.png" height="16" /> 1</span></p>
|
||||
<p class="rwith bgc3"><span class="rwith_img qgc3" style="width:50%"></span></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- lefttoday_number end -->
|
||||
</div>
|
||||
<div class="aleftboxtmidd">
|
||||
<h2 class="tith2 pt2">出州车辆情况</h2>
|
||||
<div class="lefttoday_tit" style=" height:8%"><p class="fl">地区：甘孜</p><p class="fm">周期：每日</p><p class="fr">2018-06-14</p></div>
|
||||
<div class="tlbox">
|
||||
<ul>
|
||||
<li>
|
||||
<p class="text"><span class="w12">本地车辆:</span><span><i class="ricon1"></i>昨日:6</span><span><i class="tricon1"></i>今日:5</span><span class="tr"><img src="img/icondown.png" height="16" /> 1</span></p>
|
||||
<p class="rwith"><span class="rwith_img" style="width:60%"></span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text"><span class="w12">外地车辆:</span><span><i class="ricon2"></i>昨日:600</span><span><i class="tricon2"></i>今日:500</span><span class="tr"><img src="img/iconup.png" height="16" /> 1</span></p>
|
||||
<p class="rwith bgc2"><span class="rwith_img qgc2" style="width:40%"></span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p class="text"><span class="w12">乘客人员数量:</span><span><i class="ricon3"></i>昨日:6</span><span><i class="tricon3"></i>今日:5</span><span class="tr"><img src="img/iconup.png" height="16" /> 1</span></p>
|
||||
<p class="rwith bgc3"><span class="rwith_img qgc3" style="width:50%"></span></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aleftboxtbott">
|
||||
<h2 class="tith2">总体驾驶人统计</h2>
|
||||
<!-- <div class="lefttoday_tit height"><p class="fl">状态：已调节.æl,kmo</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div> -->
|
||||
<div id="aleftboxtmidd" class="aleftboxtbott_cont2" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- left1 end -->
|
||||
<div class="mrbox">
|
||||
<div class="mrbox_topmidd" style="width: 69%;">
|
||||
<div class="amiddboxttop">
|
||||
<h2 class="tith2 pt1">实时地图</h2>
|
||||
<div class="hot_map" id="topmap" >
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- amiddboxttop end-->
|
||||
<div class="amidd_bott">
|
||||
<div class="amiddboxtbott1 fl" >
|
||||
<h2 class="tith2 pt1">每日上户车辆</h2>
|
||||
<div class="lefttoday_tit"><p class="fr">2018-06-14</p></div>
|
||||
<div id="amiddboxtbott1" class="amiddboxtbott1content2" ></div>
|
||||
</div>
|
||||
|
||||
<div class="amiddboxtbott2 fl"><h2 class="tith2 pt1">高危车辆统计</h2>
|
||||
<div id="arightboxbott" class="amiddboxtbott2content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- amidd_bott end -->
|
||||
</div>
|
||||
<!-- mrbox_top end -->
|
||||
<div class="mrbox_top_right">
|
||||
<div class="arightboxtop"><h2 class="tith2">今日办驾照统计（雷达图）</h2>
|
||||
<div id="aleftboxtbott" class="aleftboxtbott_contr"></div>
|
||||
</div>
|
||||
<div class="arightboxbott"><h2 class="tith2 ">今日新增驾驶人统计</h2>
|
||||
|
||||
<div id="aleftboxtmiddr" class="arightboxbottcont2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mrbox_top_right end -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('aleftboxtmidd'));
|
||||
option = {
|
||||
color:['#4d72d9','#76c4bf','#e5ffc7'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:60,
|
||||
right:60,
|
||||
top:20,
|
||||
bottom:0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
left: 10,
|
||||
top: 5,
|
||||
textStyle:{
|
||||
fontSize:10,
|
||||
color:'rgba(255,255,255,.6)'
|
||||
},
|
||||
data: ['A照','B照','C照']
|
||||
},
|
||||
calculable : true,
|
||||
series : [
|
||||
|
||||
{
|
||||
name:'面积模式',
|
||||
type:'pie',
|
||||
radius : [20, 70],
|
||||
center : ['50%', '55%'],
|
||||
roseType : 'area',
|
||||
data:[
|
||||
{value:187650, name:'A照'},
|
||||
{value:145896, name:'B照'},
|
||||
{value:148920, name:'C照'},
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('aleftboxtmiddr'));
|
||||
option = {
|
||||
color:['#f1b1ff','#aae3fb','#e5ffc7'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:60,
|
||||
right:60,
|
||||
top:20,
|
||||
bottom:0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
left: 10,
|
||||
top: 5,
|
||||
textStyle:{
|
||||
fontSize:10,
|
||||
color:'rgba(255,255,255,.6)'
|
||||
},
|
||||
data: ['A照','B照','C照']
|
||||
},
|
||||
calculable : true,
|
||||
series : [
|
||||
|
||||
{
|
||||
name:'面积模式',
|
||||
type:'pie',
|
||||
radius : [20, 70],
|
||||
center : ['50%', '55%'],
|
||||
roseType : 'area',
|
||||
data:[
|
||||
{value:187650, name:'A照'},
|
||||
{value:145896, name:'B照'},
|
||||
{value:148920, name:'C照'},
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('aleftboxtbott'));
|
||||
option = {
|
||||
color:['#7ecef4'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:20,
|
||||
right:50,
|
||||
top:23,
|
||||
bottom:30,
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,0)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,1)"
|
||||
},
|
||||
data: ['1000','5000','10000','15000','20000','25000'],
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.5)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.5)"
|
||||
},
|
||||
data: ['C2','C1','B2','B1','A3','A2','A1']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '2011年',
|
||||
type: 'bar',
|
||||
barWidth :30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
1, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: 'rgba(230,253,139,.7)'},
|
||||
{offset: 1, color: 'rgba(41,220,205,.7)'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data: [18203, 23489, 29034,18203, 23489, 29034, 29034]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('amiddboxtbott1'));
|
||||
var data = [
|
||||
[[28604,77,17099,'Australia',1990],[31163,77.4,2440,'Canada',1990],[1516,68,1605773,'China',1990],[13670,74.7,10082,'Cuba',1990],[28599,75,49805,'Finland',1990],[29476,77.1,569499,'France',1990],[31476,75.4,789237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870776,'India',1990],[29550,79.1,129285,'Japan',1990],[2076,67.9,201954,'North Korea',1990],[12087,72,42954,'South Korea',1990],[24021,75.4,33934,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,381958,'Poland',1990],[19349,69.6,1475652,'Russia',1990],[10670,67.3,53905,'Turkey',1990],[26424,75.7,57117,'United Kingdom',1990],[37062,75.4,252810,'United States',1990]],
|
||||
[[44056,81.8,23973,'Australia',2015],[43294,81.7,35927,'Canada',2015],[13334,76.9,1376043,'China',2015],[21291,78.5,11562,'Cuba',2015],[38923,80.8,55057,'Finland',2015],[37599,81.9,64345,'France',2015],[44053,81.1,80545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311027,'India',2015],[36162,83.5,126571,'Japan',2015],[1390,71.4,251317,'North Korea',2015],[34644,80.7,503439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,386194,'Poland',2015],[23038,73.13,143918,'Russia',2015],[19360,76.5,78630,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321771,'United States',2015]]
|
||||
];
|
||||
|
||||
option = {
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:40,
|
||||
right:40,
|
||||
top:50,
|
||||
bottom:40
|
||||
},
|
||||
title: {
|
||||
top: 5,
|
||||
left:20,
|
||||
textStyle:{
|
||||
fontSize:10,
|
||||
color:'rgba(255,255,255,.6)'
|
||||
},
|
||||
text: '环比类型：日环比'
|
||||
},
|
||||
// legend: {
|
||||
// right: 10,
|
||||
// top: 5,
|
||||
// textStyle:{
|
||||
// fontSize:10,
|
||||
// color:'rgba(255,255,255,.6)'
|
||||
// },
|
||||
// data: ['1990', '2015']
|
||||
// },
|
||||
xAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
scale: true
|
||||
},
|
||||
series: [ {
|
||||
name: '2015',
|
||||
data: data[1],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3];
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('amiddboxtbott2'));
|
||||
option = {
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
grid: {
|
||||
left:60,
|
||||
right:60,
|
||||
top:50,
|
||||
bottom:40
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: {show: true, readOnly: false},
|
||||
magicType: {show: true, type: ['line', 'bar']},
|
||||
restore: {show: true},
|
||||
saveAsImage: {show: true}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top:10,
|
||||
textStyle:{
|
||||
fontSize: 10,
|
||||
color:'rgba(255,255,255,.7)'
|
||||
},
|
||||
data:['2017年','2018年','同比增速']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
|
||||
data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.3)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.01)'
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
formatter: '{value} ml'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.3)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
||||
{
|
||||
name:'2017年',
|
||||
type:'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#b266ff'},
|
||||
{offset: 1, color: '#121b87'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
||||
},
|
||||
{
|
||||
name:'2018年',
|
||||
type:'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#00f0ff'},
|
||||
{offset: 1, color: '#032a72'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
||||
},
|
||||
{
|
||||
name:'同比增速',
|
||||
type:'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{offset: 0, color: '#fffb34'},
|
||||
{offset: 1, color: '#fffb34'}
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('arightboxbott'));
|
||||
option = {
|
||||
color:['#00ffff','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '8%',
|
||||
bottom: '7%',
|
||||
top:'8%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
data: ['6-08','6-09','6-10','6-11','6-12','6-13','6-14']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'2014年',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
areaStyle: {normal: {}},
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var myChart = echarts.init(document.getElementById('arightboxbott'));
|
||||
option = {
|
||||
color:['#00ffff','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
|
||||
backgroundColor: 'rgba(1,202,217,.2)',
|
||||
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '8%',
|
||||
bottom: '7%',
|
||||
top:'8%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
data: ['6-08','6-09','6-10','6-11','6-12','6-13','6-14']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.2)'
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'rgba(255,255,255,.1)'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:"rgba(255,255,255,.7)"
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'2014年',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
areaStyle: {normal: {}},
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
//使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象
|
||||
var mapChart = echarts.init(document.getElementById('topmap'));
|
||||
// mapChart的配置
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}<br/>{c} (个)'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
feature: {
|
||||
dataView: {readOnly: false},
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 2000,
|
||||
text:['高','低'],
|
||||
realtime: false,
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['lightskyblue','yellow', 'orangered']
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
name: '北京各区',
|
||||
type: 'map',//type必须声明为 map 说明该图标为echarts 中map类型
|
||||
map: '北京', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文。这里用北京
|
||||
aspectScale: 0.75, //长宽比. default: 0.75
|
||||
zoom: 1.2,
|
||||
//roam: true,
|
||||
itemStyle:{
|
||||
normal:{label:{show:true}},
|
||||
emphasis:{label:{show:true}}
|
||||
},
|
||||
data: [
|
||||
{name:'东城区', value: 1800},
|
||||
{name:'西城区', value: 1700},
|
||||
{name:'朝阳区', value: 1600},
|
||||
{name:'丰台区', value: 1400},
|
||||
{name:'石景山区', value: 1200},
|
||||
{name:'海淀区', value: 1000},
|
||||
{name:'门头沟区', value: 800},
|
||||
{name:'房山区', value: 600},
|
||||
{name:'通州区', value: 400},
|
||||
{name:'顺义区', value: 200},
|
||||
{name:'昌平区', value: 100},
|
||||
{name:'大兴区', value: 300},
|
||||
{name:'怀柔区', value: 500},
|
||||
{name:'平谷区', value: 700},
|
||||
{name:'密云县', value: 900},
|
||||
{name:'延庆县', value: 1100}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
//设置图表的配置项
|
||||
mapChart.setOption(option);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user