182 lines
18 KiB
HTML
182 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta name="description" content="ECharts">
|
|||
|
|
<meta name="author" content="kener.linfeng@gmail.com">
|
|||
|
|
<title>ECharts · Example</title>
|
|||
|
|
|
|||
|
|
<link rel="shortcut icon" href="../asset/ico/favicon.png">
|
|||
|
|
|
|||
|
|
<link href="../asset/css/font-awesome.min.css" rel="stylesheet">
|
|||
|
|
<link href="../asset/css/bootstrap.css" rel="stylesheet">
|
|||
|
|
<link href="../asset/css/carousel.css" rel="stylesheet">
|
|||
|
|
<link href="../asset/css/echartsHome.css" rel="stylesheet">
|
|||
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|||
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
|
|||
|
|
<script src="./www/js/echarts.js"></script>
|
|||
|
|
<script src="../asset/js/codemirror.js"></script>
|
|||
|
|
<script src="../asset/js/javascript.js"></script>
|
|||
|
|
|
|||
|
|
<link href="../asset/css/codemirror.css" rel="stylesheet">
|
|||
|
|
<link href="../asset/css/monokai.css" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<style type="text/css">
|
|||
|
|
.CodeMirror {
|
|||
|
|
height: 550px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!-- Fixed navbar -->
|
|||
|
|
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="row-fluid example">
|
|||
|
|
<div id="sidebar-code" class="col-md-4">
|
|||
|
|
<div class="well sidebar-nav">
|
|||
|
|
<div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
|
|||
|
|
<textarea id="code" name="code">
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
backgroundColor: '#1b1b1b',
|
|||
|
|
title : {
|
|||
|
|
text: '百度迁徙2015',
|
|||
|
|
x:'center',
|
|||
|
|
y:'top',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'white'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
selected: {},
|
|||
|
|
x: 'left',
|
|||
|
|
orient: 'vertical',
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'white'
|
|||
|
|
},
|
|||
|
|
data: []
|
|||
|
|
},
|
|||
|
|
series : [{
|
|||
|
|
name: "Migration",
|
|||
|
|
type: 'map',
|
|||
|
|
mapType: 'china',
|
|||
|
|
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
borderColor:'rgba(100,149,237,0.2)',
|
|||
|
|
borderWidth:0.5,
|
|||
|
|
areaStyle: {
|
|||
|
|
color: '#1b1b1b'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [{}],
|
|||
|
|
hoverable: false,
|
|||
|
|
clickable: false,
|
|||
|
|
roam: true,
|
|||
|
|
markLine: {
|
|||
|
|
effect: {
|
|||
|
|
color: 'rgba(204, 246, 255, 0.09)',
|
|||
|
|
show: true,
|
|||
|
|
period: 40
|
|||
|
|
},
|
|||
|
|
bundling: {
|
|||
|
|
enable: true
|
|||
|
|
},
|
|||
|
|
large: true,
|
|||
|
|
smooth: true,
|
|||
|
|
smoothness: 0.1,
|
|||
|
|
symbol: ['none', 'none'],
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(2, 166, 253, 0.05)',
|
|||
|
|
type: 'solid',
|
|||
|
|
width: 0.5,
|
|||
|
|
opacity: 0.2
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: []
|
|||
|
|
},
|
|||
|
|
markPoint: {
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 1.5,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: 'rgba(255, 0, 0, 0.5)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: []
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var geoCoord = {"北京":[116.395645,39.929986],"上海":[121.487899,31.249162],"天津":[117.210813,39.14393],"重庆":[106.530635,29.544606],"安徽":[117.216005,31.859252],"合肥":[117.282699,31.866942],"安庆":[117.058739,30.537898],"蚌埠":[117.35708,32.929499],"亳州":[115.787928,33.871211],"巢湖":[117.88049,31.608733],"池州":[117.494477,30.660019],"滁州":[118.32457,32.317351],"阜阳":[115.820932,32.901211],"淮北":[116.791447,33.960023],"淮南":[117.018639,32.642812],"黄山":[118.29357,29.734435],"六安":[116.505253,31.755558],"马鞍山":[118.515882,31.688528],"宿州":[116.988692,33.636772],"铜陵":[117.819429,30.94093],"芜湖":[118.384108,31.36602],"宣城":[118.752096,30.951642],"福建":[117.984943,26.050118],"福州":[119.330221,26.047125],"龙岩":[117.017997,25.078685],"南平":[118.181883,26.643626],"宁德":[119.542082,26.656527],"莆田":[119.077731,25.44845],"泉州":[118.600362,24.901652],"三明":[117.642194,26.270835],"厦门":[118.103886,24.489231],"漳州":[117.676205,24.517065],"甘肃":[102.457625,38.103267],"兰州":[103.823305,36.064226],"白银":[104.171241,36.546682],"定西":[104.626638,35.586056],"甘南":[102.917442,34.992211],"嘉峪关":[98.281635,39.802397],"金昌":[102.208126,38.516072],"酒泉":[98.508415,39.741474],"临夏":[103.215249,35.598514],"陇南":[104.934573,33.39448],"平凉":[106.688911,35.55011],"庆阳":[107.644227,35.726801],"天水":[105.736932,34.584319],"武威":[102.640147,37.933172],"张掖":[100.459892,38.93932],"广东":[113.394818,23.408004],"广州":[113.30765,23.120049],"潮州":[116.630076,23.661812],"东莞":[113.763434,23.043024],"佛山":[113.134026,23.035095],"河源":[114.713721,23.757251],"惠州":[114.410658,23.11354],"江门":[113.078125,22.575117],"揭阳":[116.379501,23.547999],"茂名":[110.931245,21.668226],"梅州":[116.126403,24.304571],"清远":[113.040773,23.698469],"汕头":[116.72865,23.383908],"汕尾":[115.372924,22.778731],"韶关":[113.594461,24.80296],"深圳":[114.025974,22.546054],"阳江":[111.97701,21.871517],"云浮":[112.050946,22.937976],"湛江":[110.365067,21.257463],"肇庆":[112.479653,23.078663],"中山":[113.42206,22.545178],"珠海":[113.562447,22.256915],"东沙群岛":[117.309186,19.083978],"广西":[108.924274,23.552255],"南宁":[108.297234,22.806493],"百色":[106.631821,23.901512],"北海":[109.122628,21.472718],"崇左":[107.357322,22.415455],"防城港":[108.351791,21.617398],"桂林":[110.26092,25.262901],"贵港":[109.613708,23.103373],"河池":[108.069948,24.699521],"贺州":[111.552594,24.411054],"来宾":[109.231817,23.741166],"柳州":[109.422402,24.329053],"钦州":[108.638798,21.97335],"梧州":[111.305472,23.485395],"玉林":[110.151676,22.643974],"贵州":[106.734996,26.902826],"贵阳":[106.709177,26.629907],"安顺":[105.92827,26.228595],"毕节":[105.300492,27.302612],"六盘水":[104.852087,26.591866],"铜仁":[109.196161,27.726271],"遵义":[106.93126,27.699961],"黔西南":[104.900558,25.095148],"黔东南":[107.985353,26.583992],"黔南":[107.523205,26.264536],"海南":[100.624066,36.284364],"海口":[110.330802,20.022071],"白沙":[109.358586,19.216056],"保亭":[109.656113,18.597592],"昌江":[109.0113,19.222483],"儋州":[109.413973,19.571153],"澄迈":[109.996736,19.693135],"东方":[108.85101,18.998161],"定安":[110.32009,19.490991],"琼海":[110.414359,19.21483],"琼中":[109.861849,19.039771],"乐东":[109.062698,18.658614],"临高":[109.724101,19.805922],"陵水":[109.948661,18.575985],"三亚":[109.522771,18.257776],"屯昌":[110.063364,19.347749],"万宁":[110.292505,18.839886],"文昌":[110.780909,19.750947],"五指山":[109.51775,18.831306],"三沙":[112.342491,16.843901],"西沙群岛":[111.79977,16.219423],"南沙群岛":[114.736439,10.370353],"河北":[115.661434,38.61384],"石家庄":[114.522082,38.048958],"保定":[115.49481,38.886565],"沧州":[116.863806,38.297615],"承德":[117.933822,40.992521],"邯郸":[114.482694,36.609308],"衡水":[115.686229,37.746929],"廊坊":[116.703602,39.518611],"秦皇岛":[119.604368,39.945462],"唐山":[118.183451,39.650531],"<22>
|
|||
|
|
|
|||
|
|
function getGeoCoord (name) {
|
|||
|
|
var city = name.split('_').pop();
|
|||
|
|
var coord = geoCoord[city];
|
|||
|
|
return coord;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
url: 'data/migration.json',
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(data) {
|
|||
|
|
option.series[0].markLine.data = data.allLine.sort(function (a, b) {
|
|||
|
|
return b.num - a.num
|
|||
|
|
}).slice(0, 3000).map(function (line) {
|
|||
|
|
return [{
|
|||
|
|
geoCoord: getGeoCoord(line.start)
|
|||
|
|
}, {
|
|||
|
|
geoCoord: getGeoCoord(line.end)
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
option.series[0].markPoint.data = data.topCityOut.map(function (point) {
|
|||
|
|
return {
|
|||
|
|
geoCoord: getGeoCoord(point.name)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</textarea>
|
|||
|
|
</div><!--/.well -->
|
|||
|
|
</div><!--/span-->
|
|||
|
|
<div id="graphic" class="col-md-8">
|
|||
|
|
<div id="main" class="main" style="height: 530px;"></div>
|
|||
|
|
<div>
|
|||
|
|
<button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
|
|||
|
|
<span class="text-primary">切换主题</span>
|
|||
|
|
<select id="theme-select"></select>
|
|||
|
|
|
|||
|
|
<span id='wrong-message' style="color:red"></span>
|
|||
|
|
</div>
|
|||
|
|
</div><!--/span-->
|
|||
|
|
</div><!--/row-->
|
|||
|
|
|
|||
|
|
</div><!--/.fluid-container-->
|
|||
|
|
|
|||
|
|
<footer id="footer"></footer>
|
|||
|
|
<!-- Le javascript
|
|||
|
|
================================================== -->
|
|||
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|||
|
|
<script src="../asset/js/jquery.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../asset/js/echartsHome.js"></script>
|
|||
|
|
<script src="../asset/js/bootstrap.min.js"></script>
|
|||
|
|
<script src="../asset/js/echartsExample.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|