123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056 |
- <!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 class="active"><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 pleft1">
- <div class="lefttime"><h2 class="tith2">统计时间</h2>
- <div class="lefttime_text">
- <ul>
- <li class="bg active">今日</li>
- <li></li>
- <li class="bg">本周</li>
- <li></li>
- <li class="bg">本月</li>
- <li></li>
- <li class="bg">本季</li>
- <li></li>
- <li class="bg">本年</li>
- </ul>
- </div>
- </div>
- <div class="plefttoday"><h2 class="tith2">今日警情</h2>
- <div class="lefttoday_tit" style=" height:8%"><p class="fl">地区:甘孜</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">环比<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">环比<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">环比<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">环比<img src="img/icondown.png" height="16" />3%</h4>
- </div>
- </div>
- <!-- lefttoday_number end -->
- <!-- lefttoday_bar end-->
- </div>
- <div class="lpeftmidbot">
- <h2 class="tith2">一标三实统计</h2>
- <div id="lpeftmidbot" class="lpeftmidbotcont"></div>
- </div>
- <div class="lpeftbot">
- <h2 class="tith2">实有人口性别占比</h2>
- <div id="lpeftbot" class="lpeftbotcont" ></div>
- </div>
- </div>
- <!-- left1 end -->
- <div class="left2">
- <div class="pleftbox2top">
- <h2 class="tith2">实有人口名族分析</h2>
- <div id="pleftbox2top" class="pleftbox2topcont"></div>
- </div>
- <div class="pleftbox2midd"><h2 class="tith2">实有人口年龄结构</h2>
- <div id="pleftbox2midd" class="pleftbox2middcont"></div>
- </div>
- <div class="lpeft2bot">
- <h2 class="tith2">实有人口职业占比TOP5</h2>
- <div class="pvr fl liwp lpeftb2otcont1" style="height:80%;" >
- <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="pleftbox2bott_cont"class="lpeftb2otcont" style="height:100%;"></div>
- </div>
- </div>
- </div>
- </div>
- <div class="mrbox prbox">
- <div class="mrbox_top">
- <div class="mrbox_top_midd">
- <div class="mrboxtm-mbox"><h2 class="tith2 pt1">警情警力地图分析</h2>
- <div class="mrboxtm-map" style=" ">
- <ul>
- <li class="bluer" style="top:28%;left:12%">15</li>
- <li class="redr" style="top:31%;left:18%">13</li>
- <!-- 石渠县-->
- <li class="bluer" style="top:31%;left:33%">15</li>
- <li class="redr" style="top:34%;left:36%">13</li>
- <!-- -->
- <li class="bluer" style="top:12%;left:43%">15</li>
- <li class="redr" style="top:15%;left:47%">13</li>
- <!-- -->
- <li class="bluer" style="top:22%;left:36%">15</li>
- <li class="redr" style="top:25%;left:41%">13</li>
- <!-- -->
- <li class="bluer" style="top:23%;left:57%">15</li>
- <li class="redr" style="top:16%;left:53%">13</li>
- <!-- -->
- <li class="bluer" style="top:26%;left:64%">15</li>
- <li class="redr" style="top:22%;left:67%">13</li>
- <!-- -->
- <li class="bluer" style="top:7%;left:68%">15</li>
- <li class="redr" style="top:15%;left:69%">13</li>
- <!-- 丹巴-->
- <li class="bluer" style="top:32%;left:77%">15</li>
- <li class="redr" style="top:35%;left:80%">13</li>
- <!-- 康定-->
- <li class="bluer" style="top:28%;left:81%">15</li>
- <li class="redr" style="top:27%;left:84%">13</li>
- <!-- 泸定-->
- <li class="bluer" style="top:34%;left:69%">15</li>
- <li class="redr" style="top:37%;left:73%">13</li>
- <!-- 雅江-->
- <li class="bluer" style="top:48%;left:87%">15</li>
- <li class="redr" style="top:47%;left:83%">13</li>
- <!-- 九龙-->
- <li class="bluer" style="top:48%;left:60%">15</li>
- <li class="redr" style="top:56%;left:62%">13</li>
- <!-- 理塘-->
- <li class="bluer" style="top:68%;left:60%">15</li>
- <li class="redr" style="top:70%;left:63%">13</li>
- <!-- 巴塘-->
- <li class="bluer" style="top:67%;left:67%">15</li>
- <li class="redr" style="top:67%;left:71%">13</li>
- <!-- 乡城-->
- <li class="bluer" style="top:82%;left:70%">15</li>
- <li class="redr" style="top:84%;left:73%">13</li>
- <!-- 得荣-->
- <li class="bluer" style="top:68%;left:60%">15</li>
- <li class="redr" style="top:70%;left:63%">13</li>
- <!-- 巴塘-->
- <li class="bluer" style="top:71%;left:78%">15</li>
- <li class="redr" style="top:74%;left:81%">13</li>
- <!-- 稻城-->
- <li class="bluer" style="top:31%;left:57%">15</li>
- <li class="redr" style="top:33%;left:53%">13</li>
- <li class="bluer" style="top:44%;left:47%">15</li>
- <li class="redr" style="top:48%;left:52%">13</li>
- </ul>
- </div>
- </div>
- <!-- map end-->
- <div class="pmrboxbottom"><h2 class="tith2 pt1">涉稳警情</h2>
- <div id="pmrboxbottom" class="pmrboxbottomcont" ></div>
- </div>
- </div>
- <!-- mrbox_top_midd end -->
- <div class="mrbox_top_right">
- <div class="pmrtop1">
- <h2 class="tith2">实名制人口统计</h2>
- <div class="pmrtop_cont1">
- <div class="pmrtop_contheight">
- <div class="widget-inline-box text-center fl">
- <p>流动人口</p>
- <h3 class="pt6 ceeb1fd">8654</h3>
- </div>
- <div class="widget-inline-box text-center fl" >
- <p>重点人员</p>
- <h3 class="pt6 c24c9ff">135622</h3>
- </div>
- </div>
- <div class="lefttoday_bar" >
- <ul>
- <li class="c1 big1" style="top: 10%;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>
- </div>
- <!-- pmrtop -->
- <div class="pmrtop" style=" margin-top: 3.3%">
- <h2 class="tith2">实名制人口统计</h2>
- <div class="pmrtop_cont pmrtop_wid" >
- <div class="pmrtop_contheight">
- <div class="widget-inline-box text-center fl">
- <p>流动人口</p>
- <h3 class="pt6 ceeb1fd">8654</h3>
- </div>
- <div class="widget-inline-box text-center fl" >
- <p>重点人员</p>
- <h3 class="pt6 c24c9ff">135622</h3>
- </div>
- <div class="widget-inline-box text-center fl" >
- <p>重点人员</p>
- <h3 class="pt6 cffff00">135622</h3>
- </div>
- </div>
- <div id="pmrmidd" class="pmrmiddcont" ></div>
- </div>
- </div>
- <!-- pmrtop -->
- </div>
- </div>
- <div class="mrbox_bottom">
- <div class="rbottom_box1"><h2 class="tith2">高危人员年龄分析</h2>
- <div id="prbottom_box1" class="prbottom_box1cont"></div></div>
- <div class="rbottom_box2"><h2 class="tith2">高危人员分类统计</h2>
- <div id="prbottom_box2" class="prbottom_box1cont" ></div></div>
- <div class="rbottom_box3"><h2 class="tith2 pt2">流动人口年龄分析</h2>
- <div id="prbottom_box3" class="prbottom_box1cont"></div></div>
- </div>
- </div>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('lpeftmidbot'));
- option = {
- backgroundColor: 'rgba(1,202,217,.2)',
- grid: {
- left:60,
- right:20,
- top:45,
- 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:['实有人口','实有房屋','实有单位']
- },
- 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,0)'
- }
- },
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,0)'
- }
- },
- axisLabel: {
- formatter: '{value} °C'
- }
- }
- ],
- series: [
- {
- name:'实有人口',
- 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:'实有房屋',
- 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:'bar',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color: '#fffb34'},
- {offset: 1, color: '#032a72'}
- ]
- )
- }
- },
- 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('lpeftbot'));
- option = {
- color:['#d2d17c','#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>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('pleftbox2top'));
- option = {
- color:['#d2d17c','#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:'回族'},
- {value:234, name:'彝族'},
- {value:135, name:'汉族'},
- {value:158, name:'土家族'}
- ],
- itemStyle: {
- emphasis: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- };
- myChart.setOption(option);
- </script>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('pleftbox2midd'));
- option = {
- color:['#d2d17c','#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:['0-6','6-18','18-28','28-55','55以上']
- },
- series : [
- {
- name: '访问来源',
- type: 'pie',
- radius : '55%',
- center: ['50%', '65%'],
- data:[
- {value:335, name:'0-6'},
- {value:310, name:'6-18'},
- {value:234, name:'18-28'},
- {value:135, name:'28-55'},
- {value:158, name:'55以上'}
- ],
- itemStyle: {
- emphasis: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- };
- myChart.setOption(option);
- </script>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('pmrboxbottom'));
- option = {
- color:['#d2d17c','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
- backgroundColor: 'rgba(1,202,217,.2)',
- legend: {
- top:10,
- textStyle:{
- fontSize: 10,
- color:'rgba(255,255,255,.7)'
- },
- data:['涉恐人员','涉稳人员','涉毒人员','在逃人员','重点上访人员','肇事肇祸精神病人','刑事犯罪前科人员']
- },
- grid: {
- left: 10,
- right: 10,
- top: 40,
- bottom: 10,
- containLabel: true
- },
- xAxis : [
- {
- type : 'category',
- axisLine:{
- lineStyle:{
- color:'rgba(255,255,255,.3)'
- }
- },
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,.01)'
- }
- },
- data : ['康定市','泸定县','丹巴县','九龙县','新龙县','巴塘县','得荣县','理塘县','甘孜县','道孚县','德格县','色达县']
- }
- ],
- yAxis : [
- {
- axisLine:{
- lineStyle:{
- color:'rgba(255,255,255,.3)'
- }
- },
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,.01)'
- }
- },
- axisLabel: {
- formatter: '{value} ml'
- },
- type : 'value'
- }
- ],
- series : [
- {
- name:'涉恐人员',
- type:'bar',
- barWidth :30,
- stack: '搜索引擎',
- data:[620, 732, 701, 734, 1090, 1130, 1120,620, 732, 701, 734, 1090,]
- },
- {
- name:'涉稳人员',
- type:'bar',
- stack: '搜索引擎',
- data:[120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
- },
- {
- name:'涉毒人员',
- type:'bar',
- stack: '搜索引擎',
- data:[60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
- },
- ,
- {
- name:'在逃人员',
- type:'bar',
- stack: '搜索引擎',
- data:[120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
- },
- {
- name:'重点上访人员',
- type:'bar',
- stack: '搜索引擎',
- data:[60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
- },
- {
- name:'肇事肇祸精神病人',
- type:'bar',
- stack: '搜索引擎',
- data:[60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
- },
- {
- name:'重大刑事犯罪前科人员',
- type:'bar',
- stack: '搜索引擎',
- data:[62, 82, 91, 84, 109, 110, 120, 91, 84, 109, 110, 120]
- }
- ]
- };
- myChart.setOption(option);
- </script>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('pleftbox2bott_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('prbottom_box1'));
- option = {
- color:['#d2d17c','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
- backgroundColor: 'rgba(1,202,217,.2)',
- grid: {
- left:20,
- right:30,
- top:0,
- bottom:20
- },
- legend: {
- top: 5,
- textStyle:{
- fontSize:10,
- color:'rgba(255,255,255,.6)'
- },
- data:['男','女','总数']
- },
- grid: {
- left:20,
- right:30,
- top:40,
- bottom:10,
- 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: ['0-6','6-18','18-28','28-55','55以上']
- },
- 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:'男',
- type:'line',
- stack: '总量',
- areaStyle: {normal: {}},
- data:[120, 132, 101, 134, 90]
- },
- {
- name:'女',
- type:'line',
- stack: '总量',
- data:[220, 182, 191, 234, 290]
- },
- {
- name:'总数',
- type:'line',
- stack: '总量',
- data:[150, 232, 201, 154, 190]
- }
- ]
- };
- myChart.setOption(option);
- </script>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('prbottom_box2'));
- option = {
- backgroundColor: 'rgba(1,202,217,.2)',
- color:['#7ecef4','#7fd7b1'],
- grid: {
- left:30,
- right:20,
- top:20,
- bottom:40
- },
- xAxis: {
- axisLine:{
- lineStyle:{
- color:'rgba(255,255,255,.7)'
- }
- },
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,.1)'
- }
- },
- data: ['涉恐','涉稳','涉毒','重点','肇事','重大']
- },
- yAxis: {
- axisLine:{
- lineStyle:{
- color:'rgba(255,255,255,.2)'
- }
- },
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,.1)'
- }
- }
- },
- series: [{
- symbolSize: 20,
- data: [
- [0.0, 8.04],
- [2.0, 6.95],
- [3.0, 7.58],
- [5.0, 8.81],
- [0.4, 8.33],
- [4.0, 1.96],
- [0.3, 7.24],
- [4.6, 4.26],
- [2.0, 4.84],
- [2.0, 4.82],
- [5.0, 5.68]
- ],
- type: 'scatter'
- }]
- };
- myChart.setOption(option);
- </script>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('prbottom_box3'));
- option = {
- backgroundColor: 'rgba(1,202,217,.2)',
- grid: {
- left:60,
- right:20,
- top:40,
- 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:['男','女','总数']
- },
- 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: ['0-6','6-18','18-28','28-55','55以上'],
- 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,0)'
- }
- },
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,0)'
- }
- }
- }
- ],
- series: [
- {
- name:'男',
- 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]
- },
- {
- name:'女',
- type:'bar',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color: '#00f0ff'},
- {offset: 1, color: '#032a72'}
- ]
- )
- }
- },
- data:[8.6, 5.9, 9.0, 26.4, 28.7]
- },
- {
- name:'总数',
- type:'bar',
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0, 0, 0, 1,
- [
- {offset: 0, color: '#fffb34'},
- {offset: 1, color: '#032a72'}
- ]
- )
- }
- },
- yAxisIndex: 1,
- data:[6.0, 5.2, 3.3, 4.5, 6.3]
- }
- ]
- };
- myChart.setOption(option);
- </script>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('pmrmidd'));
- option = {
- color:['#f1ff00','#00c1ff', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
- // backgroundColor: 'rgba(1,202,217,.2)',
- grid: {
- left:20,
- right:20,
- top:30,
- bottom:30
- },
- radar: {
- name: {
- textStyle: {
- fontSize: 10,
- color: 'rgba(255,255,255,.8)'
- }
- },
- splitLine: {
- lineStyle: {
- color: [
- 'rgba(1,202,217,.01)', 'rgba(1,202,217,.01)'
- ].reverse()
- }
- },
- splitArea: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: 'rgba(1,202,217,.7)'
- }
- },
- indicator: [
- { name: '红色警情', max: 6500},
- { name: '橙色警情', max: 16000},
- { name: '黄色警情', max: 30000},
- { name: '绿色警情', max: 44000}
- ]
- },
- series: [{
- name: '',
- type: 'radar',
- radius : [5, 100],
- center: ['50%', '50%'],
- data : [
- {
- value : [4300, 10000, 28000, 19000],
- name : ''
- },
- {
- value : [5000, 14000, 22000, 41000],
- name : ''
- }
- ]
- }]
- };
- myChart.setOption(option);
- </script>
- </body>
- </html>
|