123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <html>
- <head>
- <meta charset='utf-8'>
- <script src='esl.js'></script>
- <script src='config.js'></script>
- <script src='lib/jquery.min.js'></script>
- <script src='http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM'></script>
- <meta name='viewport' content='width=device-width, initial-scale=1' />
- </head>
- <body>
- <style>
- html, body, #main {
- width: 100%;
- height: 100%;
- margin: 0;
- }
- </style>
- <div id='main'></div>
- <script>
- require([
- 'echarts',
- 'echarts/chart/lines',
- 'echarts/component/legend',
- 'extension/bmap/bmap'
- ], function (echarts) {
- var myChart = echarts.init(document.getElementById('main'));
- $.get('data/hangzhou-tracks.json', function (data) {
- var lines = data.map(function (track) {
- return {
- coords: track.map(function (seg, idx) {
- return seg.coord;
- })
- };
- });
- // var lines = [].concat.apply([], data.map(function (track) {
- // return track.slice(1).map(function (seg, idx) {
- // return [track[idx], track[idx + 1]];
- // });
- // }));
- // lines = lines.concat(lines);
- myChart.setOption({
- animation: false,
- bmap: {
- center: [120.13066322374, 30.240018034923],
- zoom: 14,
- roam: true,
- mapStyle: {
- styleJson: [
- {
- 'featureType': 'water',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'land',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#f3f3f3'
- }
- },
- {
- 'featureType': 'railway',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'highway',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#fdfdfd'
- }
- },
- {
- 'featureType': 'highway',
- 'elementType': 'labels',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'geometry',
- 'stylers': {
- 'color': '#fefefe'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#fefefe'
- }
- },
- {
- 'featureType': 'poi',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'green',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'subway',
- 'elementType': 'all',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'manmade',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'local',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'arterial',
- 'elementType': 'labels',
- 'stylers': {
- 'visibility': 'off'
- }
- },
- {
- 'featureType': 'boundary',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#fefefe'
- }
- },
- {
- 'featureType': 'building',
- 'elementType': 'all',
- 'stylers': {
- 'color': '#d1d1d1'
- }
- },
- {
- 'featureType': 'label',
- 'elementType': 'geometry.fill',
- 'stylers': {
- 'color': '#848484'
- }
- },
- {
- 'featureType': 'label',
- 'elementType': 'geometry',
- 'stylers': {
- 'visibility': 'off'
- }
- }
- ]
- }
- },
- series: [{
- type: 'lines',
- coordinateSystem: 'bmap',
- data: lines,
- polyline: true,
- lineStyle: {
- normal: {
- color: 'purple',
- opacity: 0.4,
- width: 1
- }
- }
- }]
- });
- });
- });
- </script>
- </body>
- </html>
|