簡介：ECharts實作可視化大屏展示，包含人口分析，警情警力分析多張效果圖，
完整的html+css+js+img:https://download.csdn.net/download/weixin_41937552/16361615
上一篇：【ECharts系列|02可視化大屏】 輿情分析，人口分析及警情警力活動情況的實作【上篇】
people.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 class="active"><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>
<!-- 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>
效果圖：
public.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><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 class="active"><a href="public.html">輿情</a></li>
</ul>
</div>
</div>
<!-- bnt end -->
<div class="puleft fl">
<div class="pulefttop"><h2 class="tith2"><span>輿情來源分析</span></h2>
<div class="lefttoday_tit"><p class="fl">地區：甘孜</p><p class="fr">2018-06-14</p></div>
<div class="box pbox">
<div class="lefttoday_bar pulefttoday_bar fl">
<ul>
<li class="c1 big1" style="top: 25%;left: 16%;"><span>交通警情6</span></li>
<li class="c2 big2" style="top: 35%;left: 65%;"><span>求助1</span></li>
<li class="c3 big4" style="top: 25%;left: 35%;"><span>無效報警2</span></li>
<li class="c4 big5" style="top: 65%;left: 65%;"><span>投訴2</span></li>
<li class="c5 big6" style="top: 65%;left: 25%;"><span>災害事故1</span></li>
<li class="c6 big1" style="top: 45%;left: 15%;"><span>刑事案件1</span></li>
<li class="c1 big0" style="top: 35%;left: 75%;"></li>
<li class="c2 big0" style="top: 85%;left: 55%;"></li>
<li class="c3 big0" style="top: 85%;left: 15%;"></li>
</ul>
</div>
<div class="pvr fr pulefttoday_bar2" >
<ul>
<li class="hot1">1</li>
<li class="hot2">2</li>
<li class="hot3">3</li>
<li class="hot4">4</li>
<li class="hot5">5</li>
</ul>
<div id="puleftbox2bott_cont" class="puleftbox2bott_cont" ></div>
</div>
</div>
<!-- lefttoday_number end -->
</div>
<div class="puleftboxtmidd">
<h2 class="tith2">輿情區域分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10 至 2018-06-14</p></div>
<div class="box pbox">
<div id="puleftboxtmidd1" class="fl puleftboxtmidd1"></div>
<div class="pvr fr pulefttoday_bar2" >
<ul>
<li class="hot1">1</li>
<li class="hot2">2</li>
<li class="hot3">3</li>
<li class="hot4">4</li>
<li class="hot5">5</li>
</ul>
<div id="puleftboxtmidd2" class="puleftbox2bott_cont"></div>
</div>
</div>
</div>
<div class="puleftboxtbott">
<h2 class="tith2 pt1">輿情環比分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10 至 2018-06-14</p></div>
<div class="box pbox">
<div id="puleftboxtbott1" class="fl puleftboxtbott1" ></div>
<div class="puleftboxtbott2 fr" >
<div class="widget-inline-box text-center ">
<p>今日輿情總數</p>
<h3 class=" ceeb1fd">54</h3>
<h4 class="text-muted ">環比<img src="img/iconup.png" height="16" />2%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>本周輿情總數</p>
<h3 class=" c24c9ff">54</h3>
<h4 class="text-muted ">環比<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>本月輿情總數</p>
<h3 class=" cffff00">4</h3>
<h4 class="text-muted ">環比<img src="img/icondown.png" height="16" />3%</h4>
</div>
</div>
</div>
</div>
</div>
<!-- left1 end -->
<div class="fl pt6 puleft2">
<div class="pmidd_bott">
<div class="pumiddboxttop1 fl">
<h2 class="tith2 pt3">今日輿情</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10</p></div>
<div class="puleft2height">
<div class="widget-inline-box text-center ">
<p>今日輿情總數</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">環比<img src="img/iconup.png" height="16" />2%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>本周輿情總數</p>
<h3 class=" c24c9ff f30">54</h3>
<h4 class="text-muted ">環比<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>本月輿情總數</p>
<h3 class=" cffff00 f30">4</h3>
<h4 class="text-muted ">環比<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>今日輿情總數</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">環比<img src="img/iconup.png" height="16" />2%</h4>
</div>
</div>
</div>
<div class="pumiddboxttop2 fl">
<h2 class="tith2 pt3">熱門資訊</h2>
<div class="lefttoday_tit "><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10</p></div>
<div class="left2_table pumiddboxttop2_cont">
<ul>
<li>
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
</ul>
</div>
</div>
</div>
<!-- amidd_bott end-->
<div class="pmiddboxtbott" >
<h2 class="tith2 pt1">輿情同比分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10 至 2018-06-14</p></div>
<div class="box pbox">
<div id="pumiddboxtbott1" class="fl pumiddboxtbott1cont"></div>
<div class="pumiddboxtbott2 fr" >
<div class="widget-inline-box text-center ">
<p>今年輿情總數</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">環比<img src="img/iconup.png" height="16" />2%</h4>
</div>
</div>
</div>
</div>
<!-- amidd_bott end -->
</div>
<!-- mrbox_top end -->
<div class="mr_right fl">
<div class="purightboxtop"><h2 class="tith2 pt12">輿情類別分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10</p></div>
<div id="purightboxtop" class="purightboxtopcont"></div>
</div>
<div class="purightboxmidd"><h2 class="tith2 pt12">七日輿情走勢分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10</p></div>
<div id="purightboxmidd" class="purightboxmiddcont"></div>
</div>
<div class="purightboxbott"><h2 class="tith2 pt12">矛盾糾紛七日資料分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10 至 2018-06-14</p></div>
<div id="purightboxbott" class="purightboxbottcont" ></div>
</div>
</div>
<!-- mrbox_top_right end -->
</div>
</div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('puleftbox2bott_cont'));
option = {
color:['#7ecef4'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:40,
right:20,
top:30,
bottom:0,
containLabel: true
},
xAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
axisLabel:{
color:"rgba(255,255,255,0)"
},
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.5)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.5)"
},
data: ['微博','網站','新聞','貼吧','論壇']
},
series: [
{
name: '2011年',
type: 'bar',
barWidth :20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{offset: 0, color: 'rgba(230,253,139,.7)'},
{offset: 1, color: 'rgba(41,220,205,.7)'}
]
)
}
},
data: [18203, 23489, 29034, 104970, 131744]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('puleftboxtmidd1'));
var data = [
[5000, 10000, 6785.71],
[4000, 10000, 6825],
[3000, 6500, 4463.33],
[2500, 5600, 3793.83],
[2000, 4000, 3060],
[2000, 4000, 3222.33],
[2500, 4000, 3133.33],
[1800, 4000, 3100],
[1500, 1800, 1650]
];
var cities = ['甘孜縣', '瀘定縣', '爐霍縣', '色達縣', '白玉縣', '得榮縣', '雅江縣', '九龍縣', '康定市' ];
var barHeight = 50;
option = {
color:['#7ecef4'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:60,
right:60,
top:60,
bottom:40
},
legend: {
show: true,
data: ['價格范圍', '均值']
},
angleAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
data: cities
},
radiusAxis: {
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.5)"
}
},
polar: {
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '價格范圍',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function (d) {
return d[2] - barHeight;
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
z: 10
}, {
type: 'bar',
data: data.map(function (d) {
return barHeight * 2
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}],
legend: {
show: true,
data: ['A', 'B', 'C']
}
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('puleftboxtmidd2'));
option = {
color:['#7ecef4'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:40,
right:20,
top:30,
bottom:0,
containLabel: true
},
xAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
axisLabel:{
color:"rgba(255,255,255,0)"
},
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.5)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.5)"
},
data: ['微博','網站','新聞','貼吧','論壇']
},
series: [
{
name: '2011年',
type: 'bar',
barWidth :20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{offset: 0, color: 'rgba(230,253,139,.7)'},
{offset: 1, color: 'rgba(41,220,205,.7)'}
]
)
}
},
data: [18203, 23489, 29034, 104970, 131744]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('puleftboxtbott1'));
var data = [
[[28604,77,17099,'Australia',1990],[31163,77.4,2440,'Canada',1990],[1516,68,1605773,'China',1990],[13670,74.7,10082,'Cuba',1990],[28599,75,49805,'Finland',1990],[29476,77.1,569499,'France',1990],[31476,75.4,789237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870776,'India',1990],[29550,79.1,129285,'Japan',1990],[2076,67.9,201954,'North Korea',1990],[12087,72,42954,'South Korea',1990],[24021,75.4,33934,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,381958,'Poland',1990],[19349,69.6,1475652,'Russia',1990],[10670,67.3,53905,'Turkey',1990],[26424,75.7,57117,'United Kingdom',1990],[37062,75.4,252810,'United States',1990]],
[[44056,81.8,23973,'Australia',2015],[43294,81.7,35927,'Canada',2015],[13334,76.9,1376043,'China',2015],[21291,78.5,11562,'Cuba',2015],[38923,80.8,55057,'Finland',2015],[37599,81.9,64345,'France',2015],[44053,81.1,80545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311027,'India',2015],[36162,83.5,126571,'Japan',2015],[1390,71.4,251317,'North Korea',2015],[34644,80.7,503439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,386194,'Poland',2015],[23038,73.13,143918,'Russia',2015],[19360,76.5,78630,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321771,'United States',2015]]
];
option = {
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:60,
right:40,
top:45,
bottom:40
},
title: {
top: 5,
left:20,
textStyle:{
fontSize:10,
color:'rgba(255,255,255,.6)'
},
text: '環比型別：榷訓比'
},
legend: {
right: 10,
top: 5,
textStyle:{
fontSize:10,
color:'rgba(255,255,255,.6)'
},
data: ['1990', '2015']
},
xAxis: {
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
}
},
yAxis: {
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
scale: true
},
series: [{
name: '1990',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(251, 118, 123)'
}, {
offset: 1,
color: 'rgb(204, 46, 72)'
}])
}
}
}, {
name: '2015',
data: data[1],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(129, 227, 238)'
}, {
offset: 1,
color: 'rgb(25, 183, 207)'
}])
}
}
}]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('pumiddboxtbott1'));
option = {
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:60,
right:60,
top:70,
bottom:40
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
top:10,
textStyle:{
fontSize: 10,
color:'rgba(255,255,255,.7)'
},
data:['2017年','2018年','同比增速']
},
xAxis: [
{
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '',
min: 0,
max: 250,
interval: 50,
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.3)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.01)'
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '',
max: 25,
interval: 5,
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.3)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'2017年',
type:'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#b266ff'},
{offset: 1, color: '#121b87'}
]
)
}
},
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'2018年',
type:'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#00f0ff'},
{offset: 1, color: '#032a72'}
]
)
}
},
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'同比增速',
type:'line',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#fffb34'},
{offset: 1, color: '#fffb34'}
]
)
}
},
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('purightboxtop'));
option = {
color:['#76c4bf','#e5ffc7','#508097','#4d72d9'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:10,
right:40,
top:0,
bottom:0,
containLabel: true
},
// legend: {
// x : 'center',
// y : 'bottom',
// textStyle:{
// fontSize: 10,
// color:'rgba(255,255,255,.7)'
// },
// data:['涉蒙','涉疆','涉軍','涉恐','涉藏','涉穩','涉警']
// },
calculable : true,
series : [
{
name:'面積模式',
type:'pie',
radius : [10, 70],
center : ['50%', '50%'],
roseType : 'area',
data:[
{value:10, name:'涉蒙'},
{value:5, name:'涉疆'},
{value:15, name:'涉軍'},
{value:25, name:'涉恐'},
{value:5, name:'涉藏'},
{value:15, name:'涉穩'},
{value:15, name:'涉警'}
]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('purightboxmidd'));
option = {
color:['#7de494','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:30,
right:40,
top:30,
bottom:20,
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
data: ['6-08','6-09','6-10','6-11','6-12','6-13','6-14']
},
yAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
},
series: [
{
name:'2014年',
type:'line',
stack: '總量',
areaStyle: {normal: {}},
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('purightboxbott'));
option = {
color:['#00f1fc','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:20,
right:20,
top:0,
bottom:20
},
legend: {
top:10,
textStyle:{
fontSize: 10,
color:'rgba(255,255,255,.7)'
},
data:['境外','境內']
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '55%'],
data:[
{value:335, name:'境外'},
{value:310, name:'境內'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
traffic.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><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 class="active"><a href="public.html">輿情</a></li>
</ul>
</div>
</div>
<!-- bnt end -->
<div class="puleft fl">
<div class="pulefttop"><h2 class="tith2"><span>輿情來源分析</span></h2>
<div class="lefttoday_tit"><p class="fl">地區：甘孜</p><p class="fr">2018-06-14</p></div>
<div class="box pbox">
<div class="lefttoday_bar pulefttoday_bar fl">
<ul>
<li class="c1 big1" style="top: 25%;left: 16%;"><span>交通警情6</span></li>
<li class="c2 big2" style="top: 35%;left: 65%;"><span>求助1</span></li>
<li class="c3 big4" style="top: 25%;left: 35%;"><span>無效報警2</span></li>
<li class="c4 big5" style="top: 65%;left: 65%;"><span>投訴2</span></li>
<li class="c5 big6" style="top: 65%;left: 25%;"><span>災害事故1</span></li>
<li class="c6 big1" style="top: 45%;left: 15%;"><span>刑事案件1</span></li>
<li class="c1 big0" style="top: 35%;left: 75%;"></li>
<li class="c2 big0" style="top: 85%;left: 55%;"></li>
<li class="c3 big0" style="top: 85%;left: 15%;"></li>
</ul>
</div>
<div class="pvr fr pulefttoday_bar2" >
<ul>
<li class="hot1">1</li>
<li class="hot2">2</li>
<li class="hot3">3</li>
<li class="hot4">4</li>
<li class="hot5">5</li>
</ul>
<div id="puleftbox2bott_cont" class="puleftbox2bott_cont" ></div>
</div>
</div>
<!-- lefttoday_number end -->
</div>
<div class="puleftboxtmidd">
<h2 class="tith2">輿情區域分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10 至 2018-06-14</p></div>
<div class="box pbox">
<div id="puleftboxtmidd1" class="fl puleftboxtmidd1"></div>
<div class="pvr fr pulefttoday_bar2" >
<ul>
<li class="hot1">1</li>
<li class="hot2">2</li>
<li class="hot3">3</li>
<li class="hot4">4</li>
<li class="hot5">5</li>
</ul>
<div id="puleftboxtmidd2" class="puleftbox2bott_cont"></div>
</div>
</div>
</div>
<div class="puleftboxtbott">
<h2 class="tith2 pt1">輿情環比分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10 至 2018-06-14</p></div>
<div class="box pbox">
<div id="puleftboxtbott1" class="fl puleftboxtbott1" ></div>
<div class="puleftboxtbott2 fr" >
<div class="widget-inline-box text-center ">
<p>今日輿情總數</p>
<h3 class=" ceeb1fd">54</h3>
<h4 class="text-muted ">環比<img src="img/iconup.png" height="16" />2%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>本周輿情總數</p>
<h3 class=" c24c9ff">54</h3>
<h4 class="text-muted ">環比<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>本月輿情總數</p>
<h3 class=" cffff00">4</h3>
<h4 class="text-muted ">環比<img src="img/icondown.png" height="16" />3%</h4>
</div>
</div>
</div>
</div>
</div>
<!-- left1 end -->
<div class="fl pt6 puleft2">
<div class="pmidd_bott">
<div class="pumiddboxttop1 fl">
<h2 class="tith2 pt3">今日輿情</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10</p></div>
<div class="puleft2height">
<div class="widget-inline-box text-center ">
<p>今日輿情總數</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">環比<img src="img/iconup.png" height="16" />2%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>本周輿情總數</p>
<h3 class=" c24c9ff f30">54</h3>
<h4 class="text-muted ">環比<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>本月輿情總數</p>
<h3 class=" cffff00 f30">4</h3>
<h4 class="text-muted ">環比<img src="img/icondown.png" height="16" />3%</h4>
</div>
<div class="widget-inline-box text-center ">
<p>今日輿情總數</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">環比<img src="img/iconup.png" height="16" />2%</h4>
</div>
</div>
</div>
<div class="pumiddboxttop2 fl">
<h2 class="tith2 pt3">熱門資訊</h2>
<div class="lefttoday_tit "><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10</p></div>
<div class="left2_table pumiddboxttop2_cont">
<ul>
<li>
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li class="bg">
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
<li>
<p class="text_l">村名王某因為被隔壁鄰居的狗咬了，產生了糾紛，村名報警，</p>
<p class="text_r">新浪微博 轉發：86 2018-06-14 11:08:56</p>
</li>
</ul>
</div>
</div>
</div>
<!-- amidd_bott end-->
<div class="pmiddboxtbott" >
<h2 class="tith2 pt1">輿情同比分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10 至 2018-06-14</p></div>
<div class="box pbox">
<div id="pumiddboxtbott1" class="fl pumiddboxtbott1cont"></div>
<div class="pumiddboxtbott2 fr" >
<div class="widget-inline-box text-center ">
<p>今年輿情總數</p>
<h3 class=" ceeb1fd f30">54</h3>
<h4 class="text-muted ">環比<img src="img/iconup.png" height="16" />2%</h4>
</div>
</div>
</div>
</div>
<!-- amidd_bott end -->
</div>
<!-- mrbox_top end -->
<div class="mr_right fl">
<div class="purightboxtop"><h2 class="tith2 pt12">輿情類別分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10</p></div>
<div id="purightboxtop" class="purightboxtopcont"></div>
</div>
<div class="purightboxmidd"><h2 class="tith2 pt12">七日輿情走勢分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10</p></div>
<div id="purightboxmidd" class="purightboxmiddcont"></div>
</div>
<div class="purightboxbott"><h2 class="tith2 pt12">矛盾糾紛七日資料分析</h2>
<div class="lefttoday_tit"><p class="fl">狀態：已調節</p><p class="fr">時間段：2018-06-10 至 2018-06-14</p></div>
<div id="purightboxbott" class="purightboxbottcont" ></div>
</div>
</div>
<!-- mrbox_top_right end -->
</div>
</div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('puleftbox2bott_cont'));
option = {
color:['#7ecef4'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:40,
right:20,
top:30,
bottom:0,
containLabel: true
},
xAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
axisLabel:{
color:"rgba(255,255,255,0)"
},
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.5)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.5)"
},
data: ['微博','網站','新聞','貼吧','論壇']
},
series: [
{
name: '2011年',
type: 'bar',
barWidth :20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{offset: 0, color: 'rgba(230,253,139,.7)'},
{offset: 1, color: 'rgba(41,220,205,.7)'}
]
)
}
},
data: [18203, 23489, 29034, 104970, 131744]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('puleftboxtmidd1'));
var data = [
[5000, 10000, 6785.71],
[4000, 10000, 6825],
[3000, 6500, 4463.33],
[2500, 5600, 3793.83],
[2000, 4000, 3060],
[2000, 4000, 3222.33],
[2500, 4000, 3133.33],
[1800, 4000, 3100],
[1500, 1800, 1650]
];
var cities = ['甘孜縣', '瀘定縣', '爐霍縣', '色達縣', '白玉縣', '得榮縣', '雅江縣', '九龍縣', '康定市' ];
var barHeight = 50;
option = {
color:['#7ecef4'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:60,
right:60,
top:60,
bottom:40
},
legend: {
show: true,
data: ['價格范圍', '均值']
},
angleAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
data: cities
},
radiusAxis: {
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.5)"
}
},
polar: {
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '價格范圍',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function (d) {
return d[2] - barHeight;
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
z: 10
}, {
type: 'bar',
data: data.map(function (d) {
return barHeight * 2
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}],
legend: {
show: true,
data: ['A', 'B', 'C']
}
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('puleftboxtmidd2'));
option = {
color:['#7ecef4'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:40,
right:20,
top:30,
bottom:0,
containLabel: true
},
xAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
axisLabel:{
color:"rgba(255,255,255,0)"
},
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.5)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.5)"
},
data: ['微博','網站','新聞','貼吧','論壇']
},
series: [
{
name: '2011年',
type: 'bar',
barWidth :20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{offset: 0, color: 'rgba(230,253,139,.7)'},
{offset: 1, color: 'rgba(41,220,205,.7)'}
]
)
}
},
data: [18203, 23489, 29034, 104970, 131744]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('puleftboxtbott1'));
var data = [
[[28604,77,17099,'Australia',1990],[31163,77.4,2440,'Canada',1990],[1516,68,1605773,'China',1990],[13670,74.7,10082,'Cuba',1990],[28599,75,49805,'Finland',1990],[29476,77.1,569499,'France',1990],[31476,75.4,789237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870776,'India',1990],[29550,79.1,129285,'Japan',1990],[2076,67.9,201954,'North Korea',1990],[12087,72,42954,'South Korea',1990],[24021,75.4,33934,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,381958,'Poland',1990],[19349,69.6,1475652,'Russia',1990],[10670,67.3,53905,'Turkey',1990],[26424,75.7,57117,'United Kingdom',1990],[37062,75.4,252810,'United States',1990]],
[[44056,81.8,23973,'Australia',2015],[43294,81.7,35927,'Canada',2015],[13334,76.9,1376043,'China',2015],[21291,78.5,11562,'Cuba',2015],[38923,80.8,55057,'Finland',2015],[37599,81.9,64345,'France',2015],[44053,81.1,80545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311027,'India',2015],[36162,83.5,126571,'Japan',2015],[1390,71.4,251317,'North Korea',2015],[34644,80.7,503439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,386194,'Poland',2015],[23038,73.13,143918,'Russia',2015],[19360,76.5,78630,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321771,'United States',2015]]
];
option = {
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:60,
right:40,
top:45,
bottom:40
},
title: {
top: 5,
left:20,
textStyle:{
fontSize:10,
color:'rgba(255,255,255,.6)'
},
text: '環比型別：榷訓比'
},
legend: {
right: 10,
top: 5,
textStyle:{
fontSize:10,
color:'rgba(255,255,255,.6)'
},
data: ['1990', '2015']
},
xAxis: {
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
}
},
yAxis: {
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
scale: true
},
series: [{
name: '1990',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(251, 118, 123)'
}, {
offset: 1,
color: 'rgb(204, 46, 72)'
}])
}
}
}, {
name: '2015',
data: data[1],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(129, 227, 238)'
}, {
offset: 1,
color: 'rgb(25, 183, 207)'
}])
}
}
}]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('pumiddboxtbott1'));
option = {
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:60,
right:60,
top:70,
bottom:40
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
top:10,
textStyle:{
fontSize: 10,
color:'rgba(255,255,255,.7)'
},
data:['2017年','2018年','同比增速']
},
xAxis: [
{
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '',
min: 0,
max: 250,
interval: 50,
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.3)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.01)'
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '',
max: 25,
interval: 5,
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.3)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'2017年',
type:'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#b266ff'},
{offset: 1, color: '#121b87'}
]
)
}
},
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'2018年',
type:'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#00f0ff'},
{offset: 1, color: '#032a72'}
]
)
}
},
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'同比增速',
type:'line',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#fffb34'},
{offset: 1, color: '#fffb34'}
]
)
}
},
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('purightboxtop'));
option = {
color:['#76c4bf','#e5ffc7','#508097','#4d72d9'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:10,
right:40,
top:0,
bottom:0,
containLabel: true
},
// legend: {
// x : 'center',
// y : 'bottom',
// textStyle:{
// fontSize: 10,
// color:'rgba(255,255,255,.7)'
// },
// data:['涉蒙','涉疆','涉軍','涉恐','涉藏','涉穩','涉警']
// },
calculable : true,
series : [
{
name:'面積模式',
type:'pie',
radius : [10, 70],
center : ['50%', '50%'],
roseType : 'area',
data:[
{value:10, name:'涉蒙'},
{value:5, name:'涉疆'},
{value:15, name:'涉軍'},
{value:25, name:'涉恐'},
{value:5, name:'涉藏'},
{value:15, name:'涉穩'},
{value:15, name:'涉警'}
]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('purightboxmidd'));
option = {
color:['#7de494','#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:30,
right:40,
top:30,
bottom:20,
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
data: ['6-08','6-09','6-10','6-11','6-12','6-13','6-14']
},
yAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.2)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.7)"
},
},
series: [
{
name:'2014年',
type:'line',
stack: '總量',
areaStyle: {normal: {}},
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('purightboxbott'));
option = {
color:['#00f1fc','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:20,
right:20,
top:0,
bottom:20
},
legend: {
top:10,
textStyle:{
fontSize: 10,
color:'rgba(255,255,255,.7)'
},
data:['境外','境內']
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '55%'],
data:[
{value:335, name:'境外'},
{value:310, name:'境內'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/271956.html
標籤：其他
上一篇：小白的開始-我的第一次博客