Introduction: ECharts realizes the visualization large screen display, including the population analysis, police situation police analysis of several renderings,
The complete html+css+js+img:download.csdn.net/download/we…
A: 【 ECharts series visual screen | 02 】 public opinion analysis, population analysis and the realization of the alert police activity [last]
people.html
<! doctypehtml>
<meta charset="utf-8">
<title>Population analysis</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">Alert the police</a></li>
<li class="active"><a href="people.html">Actual population</a></li>
<li><a href="activity.html">activity</a></li>
</ul>
</div>
<h1 class="tith1 fl">Public opinion analysis</h1>
<div class=" fr topbnt_right">
<ul>
<li><a href="#">return</a></li>
<li><a href="traffic.html">The traffic</a></li>
<li><a href="public.html">Public opinion</a></li>
</ul>
</div>
</div>
<! -- bnt end -->
<div class="left1 pleft1">
<div class="lefttime"><h2 class="tith2">Statistical time</h2>
<div class="lefttime_text">
<ul>
<li class="bg active">Today,</li>
<li></li>
<li class="bg">This week,</li>
<li></li>
<li class="bg">This month,</li>
<li></li>
<li class="bg">This season,</li>
<li></li>
<li class="bg">This year,</li>
</ul>
</div>
</div>
<div class="plefttoday"><h2 class="tith2">Today's industry</h2>
<div class="lefttoday_tit" style=" height:8%"><p class="fl">Region: Ganzi</p></div>
<div class="lefttoday_number">
<div class="widget-inline-box text-center fl">
<p>ChuJing number</p>
<h3 class="ceeb1fd">54</h3>
<h4 class="text-muted">sequential<img src="img/iconup.png" height="16" />2%</h4>
</div>
<div class="widget-inline-box text-center fl">
<p>Called the number</p>
<h3 class="c24c9ff">54</h3>
<h4 class="text-muted">sequential<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center fl">
<p>Effective early-warning</p>
<h3 class="cffff00">4</h3>
<h4 class="text-muted">sequential<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center fl">
<p>Invalid alert</p>
<h3 class="c11e2dd">4</h3>
<h4 class="text-muted">sequential<img src="img/icondown.png" height="16" />3%</h4>
</div>
</div>
<! -- lefttoday_number end -->
<! -- lefttoday_bar end-->
</div>
<div class="lpeftmidbot">
<h2 class="tith2">One bid three real statistics</h2>
<div id="lpeftmidbot" class="lpeftmidbotcont"></div>
</div>
<div class="lpeftbot">
<h2 class="tith2">The actual sex ratio of the population</h2>
<div id="lpeftbot" class="lpeftbotcont" ></div>
</div>
</div>
<! -- left1 end -->
<div class="left2">
<div class="pleftbox2top">
<h2 class="tith2">There is population nomenclature analysis</h2>
<div id="pleftbox2top" class="pleftbox2topcont"></div>
</div>
<div class="pleftbox2midd"><h2 class="tith2">There is the age structure of the population</h2>
<div id="pleftbox2midd" class="pleftbox2middcont"></div>
</div>
<div class="lpeft2bot">
<h2 class="tith2">The occupation proportion of actual population 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">Police map analysis</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>
<! -- Shiqu County -->
<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>
<! - Dan ba - >
<li class="bluer" style="top:32%; left:77%">15</li>
<li class="redr" style="top:35%; left:80%">13</li>
<! - kangding - >
<li class="bluer" style="top:28%; left:81%">15</li>
<li class="redr" style="top:27%; left:84%">13</li>
<! - LuDing -- -- >
<li class="bluer" style="top:34%; left:69%">15</li>
<li class="redr" style="top:37%; left:73%">13</li>
<! - the one -- -- >
<li class="bluer" style="top:48%; left:87%">15</li>
<li class="redr" style="top:47%; left:83%">13</li>
<! - Kowloon - >
<li class="bluer" style="top:48%; left:60%">15</li>
<li class="redr" style="top:56%; left:62%">13</li>
<! - litang -- -- >
<li class="bluer" style="top:68%; left:60%">15</li>
<li class="redr" style="top:70%; left:63%">13</li>
<! - their -- -- >
<li class="bluer" style="top:67%; left:67%">15</li>
<li class="redr" style="top:67%; left:71%">13</li>
<! Township, city -- -- >
<li class="bluer" style="top:82%; left:70%">15</li>
<li class="redr" style="top:84%; left:73%">13</li>
<! So - - - > rong
<li class="bluer" style="top:68%; left:60%">15</li>
<li class="redr" style="top:70%; left:63%">13</li>
<! - their -- -- >
<li class="bluer" style="top:71%; left:78%">15</li>
<li class="redr" style="top:74%; left:81%">13</li>
<! - daocheng - >
<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">Involvement of steady alert</h2>
<div id="pmrboxbottom" class="pmrboxbottomcont" ></div>
</div>
</div>
<! -- mrbox_top_midd end -->
<div class="mrbox_top_right">
<div class="pmrtop1">
<h2 class="tith2">Real-name population statistics</h2>
<div class="pmrtop_cont1">
<div class="pmrtop_contheight">
<div class="widget-inline-box text-center fl">
<p>The floating population</p>
<h3 class="pt6 ceeb1fd">8654</h3>
</div>
<div class="widget-inline-box text-center fl" >
<p>The key personnel</p>
<h3 class="pt6 c24c9ff">135622</h3>
</div>
</div>
<div class="lefttoday_bar" >
<ul>
<li class="c1 big1" style="top: 10%; left: 16%;"><span>Traffic Alert 6</span></li>
<li class="c2 big2" style="top: 35%; left: 65%;"><span>Turn to 1</span></li>
<li class="c3 big4" style="top: 25%; left: 35%;"><span>Invalid alarm 2</span></li>
<li class="c4 big5" style="top: 65%; left: 65%;"><span>2 complaints</span></li>
<li class="c5 big6" style="top: 65%; left: 25%;"><span>Disaster Accident 1</span></li>
<li class="c6 big1" style="top: 45%; left: 15%;"><span>Criminal Case 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="3.3% margin - top:">
<h2 class="tith2">Real-name population statistics</h2>
<div class="pmrtop_cont pmrtop_wid" >
<div class="pmrtop_contheight">
<div class="widget-inline-box text-center fl">
<p>The floating population</p>
<h3 class="pt6 ceeb1fd">8654</h3>
</div>
<div class="widget-inline-box text-center fl" >
<p>The key personnel</p>
<h3 class="pt6 c24c9ff">135622</h3>
</div>
<div class="widget-inline-box text-center fl" >
<p>The key personnel</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">Age analysis of high-risk persons</h2>
<div id="prbottom_box1" class="prbottom_box1cont"></div></div>
<div class="rbottom_box2"><h2 class="tith2">Classified statistics of high-risk persons</h2>
<div id="prbottom_box2" class="prbottom_box1cont" ></div></div>
<div class="rbottom_box3"><h2 class="tith2 pt2">Age analysis of floating population</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 (1202217, 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 (255255255, 7)
},
data: ['Real population'.'Real house'.'Real unit']},xAxis: [{type: 'category'.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 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 (255255255, 3)'}},splitLine: {lineStyle: {color:'rgba (255255255, 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:'Real population'.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:'Real house'.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:'Real unit'.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 (1202217, 2)'.grid: {
left:20.right:20.top:0.bottom:20
},
legend: {
top:10.textStyle: {fontSize: 10.color:'rgba (255255255, 7)
},
data: ['male'.'woman']},series: [{name: 'Access source'.type: 'pie'.radius : '55%'.center: ['50%'.'55%'].data:[
{value:335.name:'male'},
{value:310.name:'woman'}].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 (1202217, 2)'.grid: {
left:20.right:20.top:0.bottom:20
},
legend: {
top:10.textStyle: {fontSize: 10.color:'rgba (255255255, 7)
},
data: ['the tibetans'.'hui'."Yi".'han'.'Tujia']},series: [{name: 'Access source'.type: 'pie'.radius : '55%'.center: ['50%'.'55%'].data:[
{value:335.name:'the tibetans'},
{value:310.name:'hui'},
{value:234.name:"Yi"},
{value:135.name:'han'},
{value:158.name:'Tujia'}].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 (1202217, 2)'.grid: {
left:20.right:20.top:0.bottom:20
},
legend: {
top:10.textStyle: {fontSize: 10.color:'rgba (255255255, 7)
},
data: ['0-6'.'6 to 18'.'18 to 28'.'28-55'.'more than 55']},series: [{name: 'Access source'.type: 'pie'.radius : '55%'.center: ['50%'.'65%'].data:[
{value:335.name:'0-6'},
{value:310.name:'6 to 18'},
{value:234.name:'18 to 28'},
{value:135.name:'28-55'},
{value:158.name:'more than 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 (1202217, 2)'.legend: {
top:10.textStyle: {fontSize: 10.color:'rgba (255255255, 7)
},
data: ['Persons involved in Terrorism'.'Stability Involved Person'.'Drug Officer'.'Fugitive'.'Priority Petitioners'.'Cause of Trouble mental patient'.'Criminal Offenders']},grid: {
left: 10.right: 10.top: 40.bottom: 10.containLabel: true
},
xAxis: [{type : 'category'.axisLine: {lineStyle: {color:'rgba (255255255, 3)'}},splitLine: {lineStyle: {color:'rgba (255255255, 01)'}},data : ['Kangding'.'Luding County'.Damba County.'Kowloon County'.'Xinlong County'.Batang County.Derong County.Litang County.'Ganzi County'.'Dauphu County'.'Degg County'.'Seda County']}],yAxis: [{axisLine: {lineStyle: {color:'rgba (255255255, 3)'}},splitLine: {lineStyle: {color:'rgba (255255255, 01)'}},axisLabel: {
formatter: '{value} ml'
},
type : 'value'}].series: [{name:'Persons involved in Terrorism'.type:'bar'.barWidth :30.stack: 'Search engines'.data: [620.732.701.734.1090.1130.1120.620.732.701.734.1090,]}, {name:'Stability Involved Person'.type:'bar'.stack: 'Search engines'.data: [120.132.101.134.290.230.220.101.134.290.230.220] {},name:'Drug Officer'.type:'bar'.stack: 'Search engines'.data: [60.72.71.74.190.130.110.71.74.190.130.110]}, {name:'Fugitive'.type:'bar'.stack: 'Search engines'.data: [120.132.101.134.290.230.220.101.134.290.230.220] {},name:'Priority Petitioners'.type:'bar'.stack: 'Search engines'.data: [60.72.71.74.190.130.110.71.74.190.130.110] {},name:'Cause of Trouble mental patient'.type:'bar'.stack: 'Search engines'.data: [60.72.71.74.190.130.110.71.74.190.130.110] {},name:'Major Criminal Offenders'.type:'bar'.stack: 'Search engines'.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 (1202217, 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 (255255255, 5)}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 5)"
},
data: ['land'.'Builder'.'the mechanic'.'sales'.'worker']},series: [{name: '2011'.type: 'bar'.barWidth :20.itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1.0.0.1[{offset: 0.color: 'rgba (230253139, 7)},
{offset: 1.color: 'rgba (41220205, 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 (1202217, 2)'.grid: {
left:20.right:30.top:0.bottom:20
},
legend: {
top: 5.textStyle: {fontSize:10.color:'rgba (255255255, 6)
},
data: ['male'.'woman'.'total']},grid: {
left:20.right:30.top:40.bottom:10.containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}}}.xAxis: {
type: 'category'.boundaryGap: false.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"
},
data: ['0-6'.'6 to 18'.'18 to 28'.'28-55'.'more than 55']},yAxis: {
type: 'value'.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"}},series: [{name:'male'.type:'line'.stack: 'total'.areaStyle: {normal: {}},
data: [120.132.101.134.90] {},name:'woman'.type:'line'.stack: 'total'.data: [220.182.191.234.290] {},name:'total'.type:'line'.stack: 'total'.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 (1202217, 2)'.color: ['#7ecef4'.'#7fd7b1'].grid: {
left:30.right:20.top:20.bottom:40
},
xAxis: {
axisLine: {lineStyle: {color:'rgba (255255255, 7)}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},data: ['stakeholders will'.'stakeholders stability'.'drug-related'.'focus'.'accident'.'major']},yAxis: {
axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 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 (1202217, 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 (255255255, 7)
},
data: ['male'.'woman'.'total']},xAxis: [{type: 'category'.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"
},
data: ['0-6'.'6 to 18'.'18 to 28'.'28-55'.'more than 55'].axisPointer: {
type: 'shadow'}}].yAxis: [{type: 'value'.name: ' '.min: 0.max: 250.interval: 50.axisLine: {lineStyle: {color:'rgba (255255255, 3)'}},splitLine: {lineStyle: {color:'rgba (255255255, 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:'male'.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:'woman'.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:'total'.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 (1202217, 2),
grid: {
left:20.right:20.top:30.bottom:30
},
radar: {
name: {
textStyle: {
fontSize: 10.color: 'rgba (255255255, 8)'}},splitLine: {
lineStyle: {
color: [
'rgba (1202217, 01)'.'rgba (1202217, 01)'
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba (1202217, 7)}},indicator: [{name: 'Red Alert'.max: 6500},
{ name: 'Orange Alert'.max: 16000},
{ name: 'Yellow Alert'.max: 30000},
{ name: 'Green Alert'.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>
Copy the codeEffect:
public.html
<! doctypehtml>
<meta charset="utf-8">
<title>Police situation police force analysis</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">Alert the police</a></li>
<li><a href="people.html">Actual population</a></li>
<li><a href="activity.html">activity</a></li>
</ul>
</div>
<h1 class="tith1 fl">Public opinion analysis</h1>
<div class=" fr topbnt_right">
<ul>
<li><a href="#">return</a></li>
<li><a href="traffic.html">The traffic</a></li>
<li class="active"><a href="public.html">Public opinion</a></li>
</ul>
</div>
</div>
<! -- bnt end -->
<div class="puleft fl">
<div class="pulefttop"><h2 class="tith2"><span>Analysis of public opinion sources</span></h2>
<div class="lefttoday_tit"><p class="fl">Region: Ganzi</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>Traffic Alert 6</span></li>
<li class="c2 big2" style="top: 35%; left: 65%;"><span>Turn to 1</span></li>
<li class="c3 big4" style="top: 25%; left: 35%;"><span>Invalid alarm 2</span></li>
<li class="c4 big5" style="top: 65%; left: 65%;"><span>2 complaints</span></li>
<li class="c5 big6" style="top: 65%; left: 25%;"><span>Disaster Accident 1</span></li>
<li class="c6 big1" style="top: 45%; left: 15%;"><span>Criminal Case 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">Regional analysis of public opinion</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time period: June 10, 2018 to June 14, 2018</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">Public opinion sequential analysis</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time period: June 10, 2018 to June 14, 2018</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>Total public opinion today</p>
<h3 class=" ceeb1fd">54</h3>
<h4 class="text-muted ">sequential<img src="img/iconup.png" height="16" />2%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion this week</p>
<h3 class=" c24c9ff">54</h3>
<h4 class="text-muted ">sequential<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion this month</p>
<h3 class=" cffff00">4</h3>
<h4 class="text-muted ">sequential<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">Today's public opinion</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time: June 10, 2018</p></div>
<div class="puleft2height">
<div class="widget-inline-box text-center ">
<p>Total public opinion today</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">sequential<img src="img/iconup.png" height="16" />2%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion this week</p>
<h3 class=" c24c9ff f30">54</h3>
<h4 class="text-muted ">sequential<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion this month</p>
<h3 class=" cffff00 f30">4</h3>
<h4 class="text-muted ">sequential<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion today</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">sequential<img src="img/iconup.png" height="16" />2%</h4>
</div>
</div>
</div>
<div class="pumiddboxttop2 fl">
<h2 class="tith2 pt3">Popular information</h2>
<div class="lefttoday_tit "><p class="fl">Status: Adjusted</p><p class="fr">Time: June 10, 2018</p></div>
<div class="left2_table pumiddboxttop2_cont">
<ul>
<li>
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
</ul>
</div>
</div>
</div>
<! -- amidd_bott end-->
<div class="pmiddboxtbott" >
<h2 class="tith2 pt1">Public opinion year-on-year analysis</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time period: June 10, 2018 to June 14, 2018</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>Total number of public opinions this year</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">sequential<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">Public opinion category analysis</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time: June 10, 2018</p></div>
<div id="purightboxtop" class="purightboxtopcont"></div>
</div>
<div class="purightboxmidd"><h2 class="tith2 pt12">Seven days of public opinion trend analysis</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time: June 10, 2018</p></div>
<div id="purightboxmidd" class="purightboxmiddcont"></div>
</div>
<div class="purightboxbott"><h2 class="tith2 pt12">7 days data analysis of conflicts and disputes</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time period: June 10, 2018 to June 14, 2018</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 (1202217, 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 (255255255, 5)}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 5)"
},
data: ['weibo'.'the website'.'news'.'贴吧'.'BBS']},series: [{name: '2011'.type: 'bar'.barWidth :20.itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1.0.0.1[{offset: 0.color: 'rgba (230253139, 7)},
{offset: 1.color: 'rgba (41220205, 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 = ['Ganzi County'.'Luding County'.'Furnace County'.'Seda County'.'Baiyu County'.Derong County.'Yajiang County'.'Kowloon County'.'Kangding' ];
var barHeight = 50;
option = {
color: ['#7ecef4'].backgroundColor: 'rgba (1202217, 2)'.grid: {
left:60.right:60.top:60.bottom:40
},
legend: {
show: true.data: ['Price range'.'average']},angleAxis: {
type: 'category'.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"
},
data: cities
},
radiusAxis: {
axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 5)"}},polar: {},series: [{
type: 'bar'.itemStyle: {
normal: {
color: 'transparent'}},data: data.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar'.stack: 'Max min'.silent: true
}, {
type: 'bar'.data: data.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar'.name: 'Price range'.stack: 'Max min'
}, {
type: 'bar'.itemStyle: {
normal: {
color: 'transparent'}},data: data.map(function (d) {
return d[2] - barHeight;
}),
coordinateSystem: 'polar'.stack: 'average'.silent: true.z: 10
}, {
type: 'bar'.data: data.map(function (d) {
return barHeight * 2
}),
coordinateSystem: 'polar'.name: 'average'.stack: 'average'.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 (1202217, 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 (255255255, 5)}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 5)"
},
data: ['weibo'.'the website'.'news'.'贴吧'.'BBS']},series: [{name: '2011'.type: 'bar'.barWidth :20.itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1.0.0.1[{offset: 0.color: 'rgba (230253139, 7)},
{offset: 1.color: 'rgba (41220205, 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 (1202217, 2)'.grid: {
left:60.right:40.top:45.bottom:40
},
title: {
top: 5.left:20.textStyle: {fontSize:10.color:'rgba (255255255, 6)
},
text: 'Sequential type: sequential day'
},
legend: {
right: 10.top: 5.textStyle: {fontSize:10.color:'rgba (255255255, 6)
},
data: ['1990'.'2015']},xAxis: {
axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"}},yAxis: {
axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 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 and 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 (1202217, 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 (255255255, 7)
},
data: ['2017'.'2018'.'Year-on-year growth']},xAxis: [{type: 'category'.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 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 (255255255, 3)'}},splitLine: {lineStyle: {color:'rgba (255255255, 01)'}},axisLabel: {
formatter: '{value} ml'}}, {type: 'value'.name: ' '.max: 25.interval: 5.axisLine: {lineStyle: {color:'rgba (255255255, 3)'}},splitLine: {lineStyle: {color:'rgba (255255255, 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:'Year-on-year growth'.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 (1202217, 2)'.grid: {
left:10.right:40.top:0.bottom:0.containLabel: true
},
// legend: {
// x : 'center',
// y : 'bottom',
// textStyle:{
// fontSize: 10,
/ / color: 'rgba (255255255, 7)
/ /},
// data:[' Related to Mongolia ',' related to Xinjiang ',' Related to military ',' related to Terrorism ',' related to Tibet ',' related to stability ',' related to police ']
// },
calculable : true.series: [{name:'Area model'.type:'pie'.radius : [10.70].center : ['50%'.'50%'].roseType : 'area'.data:[
{value:10.name:'stakeholders receive'},
{value:5.name:'xinjiang'},
{value:15.name:'stakeholders army'},
{value:25.name:'stakeholders will'},
{value:5.name:'Tibet'},
{value:15.name:'stakeholders stability'},
{value:15.name:'involved police'}]}]}; 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 (1202217, 2)'.grid: {
left:30.right:40.top:30.bottom:20.containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}}}.xAxis: {
type: 'category'.boundaryGap: false.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"
},
data: ['6-08'.'6-9'.'6-10'.'6-11'.'6 and 12'.'6-13'.'6-14']},yAxis: {
type: 'value'.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"}},series: [{name:'2014'.type:'line'.stack: 'total'.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 (1202217, 2)'.grid: {
left:20.right:20.top:0.bottom:20
},
legend: {
top:10.textStyle: {fontSize: 10.color:'rgba (255255255, 7)
},
data: ['outside'.'境内']},series: [{name: 'Access source'.type: 'pie'.radius : '55%'.center: ['50%'.'55%'].data:[
{value:335.name:'outside'},
{value:310.name:'境内'}].itemStyle: {
emphasis: {
shadowBlur: 10.shadowOffsetX: 0.shadowColor: 'rgba (0, 0, 0, 0.5)'}}}]}; myChart.setOption(option);</script>
</body>
</html>
Copy the code
traffic.html
<! doctypehtml>
<meta charset="utf-8">
<title>Police situation police force analysis</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">Alert the police</a></li>
<li><a href="people.html">Actual population</a></li>
<li><a href="activity.html">activity</a></li>
</ul>
</div>
<h1 class="tith1 fl">Public opinion analysis</h1>
<div class=" fr topbnt_right">
<ul>
<li><a href="#">return</a></li>
<li><a href="traffic.html">The traffic</a></li>
<li class="active"><a href="public.html">Public opinion</a></li>
</ul>
</div>
</div>
<! -- bnt end -->
<div class="puleft fl">
<div class="pulefttop"><h2 class="tith2"><span>Analysis of public opinion sources</span></h2>
<div class="lefttoday_tit"><p class="fl">Region: Ganzi</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>Traffic Alert 6</span></li>
<li class="c2 big2" style="top: 35%; left: 65%;"><span>Turn to 1</span></li>
<li class="c3 big4" style="top: 25%; left: 35%;"><span>Invalid alarm 2</span></li>
<li class="c4 big5" style="top: 65%; left: 65%;"><span>2 complaints</span></li>
<li class="c5 big6" style="top: 65%; left: 25%;"><span>Disaster Accident 1</span></li>
<li class="c6 big1" style="top: 45%; left: 15%;"><span>Criminal Case 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">Regional analysis of public opinion</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time period: June 10, 2018 to June 14, 2018</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">Public opinion sequential analysis</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time period: June 10, 2018 to June 14, 2018</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>Total public opinion today</p>
<h3 class=" ceeb1fd">54</h3>
<h4 class="text-muted ">sequential<img src="img/iconup.png" height="16" />2%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion this week</p>
<h3 class=" c24c9ff">54</h3>
<h4 class="text-muted ">sequential<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion this month</p>
<h3 class=" cffff00">4</h3>
<h4 class="text-muted ">sequential<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">Today's public opinion</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time: June 10, 2018</p></div>
<div class="puleft2height">
<div class="widget-inline-box text-center ">
<p>Total public opinion today</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">sequential<img src="img/iconup.png" height="16" />2%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion this week</p>
<h3 class=" c24c9ff f30">54</h3>
<h4 class="text-muted ">sequential<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion this month</p>
<h3 class=" cffff00 f30">4</h3>
<h4 class="text-muted ">sequential<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>Total public opinion today</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">sequential<img src="img/iconup.png" height="16" />2%</h4>
</div>
</div>
</div>
<div class="pumiddboxttop2 fl">
<h2 class="tith2 pt3">Popular information</h2>
<div class="lefttoday_tit "><p class="fl">Status: Adjusted</p><p class="fr">Time: June 10, 2018</p></div>
<div class="left2_table pumiddboxttop2_cont">
<ul>
<li>
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">The village surnamed Wang was bitten by his neighbor's dog and had a dispute. The village called the police.</p>
<p class="text_r">Sina Weibo forwarding: 86 2018-06-14 11:08:56</p>
</li>
</ul>
</div>
</div>
</div>
<! -- amidd_bott end-->
<div class="pmiddboxtbott" >
<h2 class="tith2 pt1">Public opinion year-on-year analysis</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time period: June 10, 2018 to June 14, 2018</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>Total number of public opinions this year</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">sequential<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">Public opinion category analysis</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time: June 10, 2018</p></div>
<div id="purightboxtop" class="purightboxtopcont"></div>
</div>
<div class="purightboxmidd"><h2 class="tith2 pt12">Seven days of public opinion trend analysis</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time: June 10, 2018</p></div>
<div id="purightboxmidd" class="purightboxmiddcont"></div>
</div>
<div class="purightboxbott"><h2 class="tith2 pt12">7 days data analysis of conflicts and disputes</h2>
<div class="lefttoday_tit"><p class="fl">Status: Adjusted</p><p class="fr">Time period: June 10, 2018 to June 14, 2018</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 (1202217, 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 (255255255, 5)}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 5)"
},
data: ['weibo'.'the website'.'news'.'贴吧'.'BBS']},series: [{name: '2011'.type: 'bar'.barWidth :20.itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1.0.0.1[{offset: 0.color: 'rgba (230253139, 7)},
{offset: 1.color: 'rgba (41220205, 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 = ['Ganzi County'.'Luding County'.'Furnace County'.'Seda County'.'Baiyu County'.Derong County.'Yajiang County'.'Kowloon County'.'Kangding' ];
var barHeight = 50;
option = {
color: ['#7ecef4'].backgroundColor: 'rgba (1202217, 2)'.grid: {
left:60.right:60.top:60.bottom:40
},
legend: {
show: true.data: ['Price range'.'average']},angleAxis: {
type: 'category'.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"
},
data: cities
},
radiusAxis: {
axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 5)"}},polar: {},series: [{
type: 'bar'.itemStyle: {
normal: {
color: 'transparent'}},data: data.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar'.stack: 'Max min'.silent: true
}, {
type: 'bar'.data: data.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar'.name: 'Price range'.stack: 'Max min'
}, {
type: 'bar'.itemStyle: {
normal: {
color: 'transparent'}},data: data.map(function (d) {
return d[2] - barHeight;
}),
coordinateSystem: 'polar'.stack: 'average'.silent: true.z: 10
}, {
type: 'bar'.data: data.map(function (d) {
return barHeight * 2
}),
coordinateSystem: 'polar'.name: 'average'.stack: 'average'.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 (1202217, 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 (255255255, 5)}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 5)"
},
data: ['weibo'.'the website'.'news'.'贴吧'.'BBS']},series: [{name: '2011'.type: 'bar'.barWidth :20.itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1.0.0.1[{offset: 0.color: 'rgba (230253139, 7)},
{offset: 1.color: 'rgba (41220205, 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 (1202217, 2)'.grid: {
left:60.right:40.top:45.bottom:40
},
title: {
top: 5.left:20.textStyle: {fontSize:10.color:'rgba (255255255, 6)
},
text: 'Sequential type: sequential day'
},
legend: {
right: 10.top: 5.textStyle: {fontSize:10.color:'rgba (255255255, 6)
},
data: ['1990'.'2015']},xAxis: {
axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"}},yAxis: {
axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 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 and 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 (1202217, 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 (255255255, 7)
},
data: ['2017'.'2018'.'Year-on-year growth']},xAxis: [{type: 'category'.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 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 (255255255, 3)'}},splitLine: {lineStyle: {color:'rgba (255255255, 01)'}},axisLabel: {
formatter: '{value} ml'}}, {type: 'value'.name: ' '.max: 25.interval: 5.axisLine: {lineStyle: {color:'rgba (255255255, 3)'}},splitLine: {lineStyle: {color:'rgba (255255255, 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:'Year-on-year growth'.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 (1202217, 2)'.grid: {
left:10.right:40.top:0.bottom:0.containLabel: true
},
// legend: {
// x : 'center',
// y : 'bottom',
// textStyle:{
// fontSize: 10,
/ / color: 'rgba (255255255, 7)
/ /},
// data:[' Related to Mongolia ',' related to Xinjiang ',' Related to military ',' related to Terrorism ',' related to Tibet ',' related to stability ',' related to police ']
// },
calculable : true.series: [{name:'Area model'.type:'pie'.radius : [10.70].center : ['50%'.'50%'].roseType : 'area'.data:[
{value:10.name:'stakeholders receive'},
{value:5.name:'xinjiang'},
{value:15.name:'stakeholders army'},
{value:25.name:'stakeholders will'},
{value:5.name:'Tibet'},
{value:15.name:'stakeholders stability'},
{value:15.name:'involved police'}]}]}; 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 (1202217, 2)'.grid: {
left:30.right:40.top:30.bottom:20.containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}}}.xAxis: {
type: 'category'.boundaryGap: false.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"
},
data: ['6-08'.'6-9'.'6-10'.'6-11'.'6 and 12'.'6-13'.'6-14']},yAxis: {
type: 'value'.axisLine: {lineStyle: {color:'rgba (255255255, 2)'}},splitLine: {lineStyle: {color:'rgba (255255255, 1)'}},axisLabel: {color:"Rgba (255255255, 7)"}},series: [{name:'2014'.type:'line'.stack: 'total'.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 (1202217, 2)'.grid: {
left:20.right:20.top:0.bottom:20
},
legend: {
top:10.textStyle: {fontSize: 10.color:'rgba (255255255, 7)
},
data: ['outside'.'境内']},series: [{name: 'Access source'.type: 'pie'.radius : '55%'.center: ['50%'.'55%'].data:[
{value:335.name:'outside'},
{value:310.name:'境内'}].itemStyle: {
emphasis: {
shadowBlur: 10.shadowOffsetX: 0.shadowColor: 'rgba (0, 0, 0, 0.5)'}}}]}; myChart.setOption(option);</script>
</body>
</html>
Copy the coderendering
