當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【ECharts系列|02可视化大屏】舆情分析，人口分析及警情警力活动情况的实现【上篇】

發布時間：2023/12/2 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了【ECharts系列|02可视化大屏】舆情分析，人口分析及警情警力活动情况的实现【上篇】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

簡介：ECharts實現可視化大屏展示，包含人口分析，警情警力分析多張效果圖，

完整的html+css+js+img:https://download.csdn.net/download/weixin_41937552/16361615

項目結構：

activity.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="analysis.html">警情警力</a></li><li><a href="people.html">實有人口</a></li><li class="active"><a href="activity.html">活動情況</a></li></ul></div><h1 class="tith1 fl">輿情分析</h1><div class=" fr topbnt_right"><ul><li><a href="#">返回</a></li><li><a href="traffic.html">交通</a></li><li><a href="public.html">輿情</a></li></ul></div> </div>  <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><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">環比<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></div><div class="lpeftmidbot"><h2 class="tith2">活動占比</h2><div id="lpeftbot" class="lpeftmidbotcont"></div></div><div class="lpeftbot"><h2 class="tith2">活動人員性別分析</h2><div id="lpeftmidbot" class="lpeftbotcont" ></div></div> </div>  <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 class="pvr fl lpeftb2otcont1 hdtop" style=" height:82%;" ><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="pleftbox2middcont" style=" height:100%;" ></div></div></div><div class="lpeft2bot" ><h2 class="tith2 " >實有人口職業占比TOP5</h2> <div id="prbottom_box1"class="lpeftb2otcont" ></div></div> </div> </div> <div class="mrbox prbox"><div class="hdmrbox_top"><div class="mrbox_top_midd"><div class="hdmrboxtm-mbox"><h2 class="tith2 pt1">地圖分析</h2><div class="lefttoday_tit font14" style=" height:13%"><p class="fl"><i class="ricontop redr">12</i>民事活動</p><p class="fr" ><i class="ricontop bluer">12</i>佛事活動</p></div><div class="mrboxtm-map hdmrboxtm-map"><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> <div class="mrbox_bottom_bott"><div class="rbottom_box1 hdwid"><h2 class="tith2">高危人員分類分析</h2><div id="prbottom_box2" class="prbottom_box1cont"></div></div><div class="rbottom_box2 hdwid"><h2 class="tith2">活動人口統計</h2><div id="pleftbox2midd" class="prbottom_box1cont" ></div></div></div></div><div class="mrbox_top_right"><div class="hdrightboxtop"><h2 class="tith2">今日活動提醒</h2><div class="lefttoday_tit" style="height:4%"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10</p></div><div class="left2_table hdleft2_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><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> <script type="text/javascript">var myChart = echarts.init(document.getElementById('lpeftmidbot'));option = {backgroundColor: 'rgba(1,202,217,.2)',grid: {left:50,right:20,top:45,bottom:30},legend: {top:5,textStyle:{fontSize: 10,color:'rgba(255,255,255,.7)'},data:['男','女','總數']},// toolbox: {// feature: {// dataView: {show: true, readOnly: false},// magicType: {show: true, type: ['line', 'bar']},// restore: {show: true},// saveAsImage: {show: true}// }// },// legend: {// top:10,// left: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}'}}],series: [{name:'男',type:'bar',itemStyle: {normal: {color:'#00a0e9'// 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:'#fff799'// 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:'#6fcc8c'// 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:['#00b7ee','#f8e19a', '#f19ec2', '#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:370, 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:['#f8e19a','#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%', '65%'],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('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>

效果圖：

?analysis.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="wpbox"> <div class="bnt"><div class="topbnt_left fl"><ul><li class="active"><a href="analysis.html">警情警力</a></li><li><a href="people.html">實有人口</a></li><li><a href="activity.html">活動情況</a></li></ul></div><h1 class="tith1 fl">輿情分析</h1><div class=" fr topbnt_right"><ul><li><a href="#">返回</a></li><li><a href="traffic.html">交通</a></li><li><a href="public.html">輿情</a></li></ul></div> </div>  <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></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>  <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><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></div><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></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>

效果圖：

總結

以上是生活随笔為你收集整理的【ECharts系列|02可视化大屏】舆情分析，人口分析及警情警力活动情况的实现【上篇】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【ECharts系列|01入门】从入门
下一篇：【ECharts系列|02可视化大屏】

编程问答

【ECharts系列|02可视化大屏】 舆情分析，人口分析及警情警力活动情况的实现【上篇】

項目結構：

activity.html

總結

【ECharts系列|02可视化大屏】舆情分析，人口分析及警情警力活动情况的实现【上篇】