test/lines-bus.html

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset='utf-8'>
        <script src='lib/simpleRequire.js'></script>
        <script src='lib/config.js'></script>
        <script src='lib/jquery.min.js'></script>
        <script src='http://api.map.baidu.com/api?v=3.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu'></script>
        <meta name='viewport' content='width=device-width, initial-scale=1' />
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
            #clear {
                position: absolute;
                left: 10px;
                top: 10px;
            }
            #clear2 {
                position: absolute;
                left: 10px;
                top: 40px;
            }
        </style>
        <div id='main'></div>
        <button id='clear'>Clear(`chart.setOption`)</button>
        <button id='clear2'>Clear(`chart.clear`)</button>
        <script>

            require([
                'echarts',
                'data/lines-bus.json',
                'extension/bmap'
            ], function (echarts, data) {

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

                    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
                        }]
                    });

                    document.getElementById('clear').addEventListener('click', function() {
                        myChart.setOption({
                            series: [{
                                data: []
                            }, {
                                data: []
                            }]
                        });
                    });
                    document.getElementById('clear2').addEventListener('click', function() {
                        myChart.clear();
                    });
            });
        </script>
    </body>
</html>