xmnk
/
wkshi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
							<html>
    <head>
        <meta charset='utf-8'>
        <script src='lib/esl.js'></script>
        <script src='lib/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'
            ], function (echarts) {

                var myChart = echarts.init(document.getElementById('main'));

                $.get('data/lines-bus.json', function (data) {
                    var hStep = 300 / (data.length - 1);
                    var busLines = data.map(function (busLine, idx) {
                        var prevPt;
                        var points = [];
                        for (var i = 0; i < busLine.length; i += 2) {
                            var pt = [busLine[i], busLine[i + 1]];
                            if (i > 0) {
                                pt = [
                                    prevPt[0] + pt[0],
                                    prevPt[1] + pt[1]
                                ];
                            }
                            prevPt = pt;

                            points.push([pt[0] / 1e4, pt[1] / 1e4]);
                        }
                        return {
                            coords: points,
                            lineStyle: {
                                normal: {
                                    color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                                }
                            }
                        };
                    });
                    console.log(busLines.length);
                    // busLines = busLines.slice(0, 100);

                    myChart.setOption({
                        animation: false,
                        bmap: {
                            center: [116.46, 39.92],
                            zoom: 10,
                            roam: true,
                            mapStyle: {
                              'styleJson': [
                                {
                                  'featureType': 'water',
                                  'elementType': 'all',
                                  'stylers': {
                                    'color': '#031628'
                                  }
                                },
                                {
                                  'featureType': 'land',
                                  'elementType': 'geometry',
                                  'stylers': {
                                    'color': '#000102'
                                  }
                                },
                                {
                                  'featureType': 'highway',
                                  'elementType': 'all',
                                  'stylers': {
                                    'visibility': 'off'
                                  }
                                },
                                {
                                  'featureType': 'arterial',
                                  'elementType': 'geometry.fill',
                                  'stylers': {
                                    'color': '#000000'
                                  }
                                },
                                {
                                  'featureType': 'arterial',
                                  'elementType': 'geometry.stroke',
                                  'stylers': {
                                    'color': '#0b3d51'
                                  }
                                },
                                {
                                  'featureType': 'local',
                                  'elementType': 'geometry',
                                  'stylers': {
                                    'color': '#000000'
                                  }
                                },
                                {
                                  'featureType': 'railway',
                                  'elementType': 'geometry.fill',
                                  'stylers': {
                                    'color': '#000000'
                                  }
                                },
                                {
                                  'featureType': 'railway',
                                  'elementType': 'geometry.stroke',
                                  'stylers': {
                                    'color': '#08304b'
                                  }
                                },
                                {
                                  'featureType': 'subway',
                                  'elementType': 'geometry',
                                  'stylers': {
                                    'lightness': -70
                                  }
                                },
                                {
                                  'featureType': 'building',
                                  'elementType': 'geometry.fill',
                                  'stylers': {
                                    'color': '#000000'
                                  }
                                },
                                {
                                  'featureType': 'all',
                                  'elementType': 'labels.text.fill',
                                  'stylers': {
                                    'color': '#857f7f'
                                  }
                                },
                                {
                                  'featureType': 'all',
                                  'elementType': 'labels.text.stroke',
                                  'stylers': {
                                    'color': '#000000'
                                  }
                                },
                                {
                                  'featureType': 'building',
                                  'elementType': 'geometry',
                                  'stylers': {
                                    'color': '#022338'
                                  }
                                },
                                {
                                  'featureType': 'green',
                                  'elementType': 'geometry',
                                  'stylers': {
                                    'color': '#062032'
                                  }
                                },
                                {
                                  'featureType': 'boundary',
                                  'elementType': 'all',
                                  'stylers': {
                                    'color': '#465b6c'
                                  }
                                },
                                {
                                  'featureType': 'manmade',
                                  'elementType': 'all',
                                  'stylers': {
                                    'color': '#022338'
                                  }
                                },
                                {
                                  'featureType': 'label',
                                  'elementType': 'all',
                                  'stylers': {
                                    'visibility': 'off'
                                  }
                                }
                              ]
                            }
                        },
                        series: [{
                            type: 'lines',
                            coordinateSystem: 'bmap',
                            polyline: true,
                            data: busLines,
                            silent: true,
                            lineStyle: {
                                normal: {
                                    // color: '#c23531',
                                    // color: 'rgb(200, 35, 45)',
                                    opacity: 0.2,
                                    width: 1
                                }
                            },
                            progressiveThreshold: 500,
                            progressive: 200
                        }, {
                            type: 'lines',
                            coordinateSystem: 'bmap',
                            polyline: true,
                            data: busLines,
                            lineStyle: {
                                normal: {
                                    width: 0
                                }
                            },
                            effect: {
                                constantSpeed: 20,
                                show: true,
                                trailLength: 0.1,
                                symbolSize: 1.5
                            },
                            zlevel: 1
                        }]
                    });

                });
            });

        </script>
    </body>
</html>