mirror of
https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git
synced 2025-07-29 03:12:11 +08:00
891 lines
41 KiB
HTML
891 lines
41 KiB
HTML
<!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>
|