echart+map

标签：etop   system   otc   top   extension   center   new   poi   uil   

reference:
https://github.com/apache/incubator-echarts/tree/master/extension/bmap baidumap的github嵌入文本

cdn：http://www.bootcdn.cn/echarts/

echart3.8.5 :http://echarts.baidu.com/download3.html

<script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
    <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.8.5/extension/bmap.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById(‘main‘));
        myChart.setOption({
            bmap: {
                center: [123.297282, 69.110789],
                zoom: 18,
                roam: true,
                mapStyle: {
                    styleJson: [
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": {
                            "color": "#021019"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#000000"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry.stroke",
                        "stylers": {
                            "color": "#147a92"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#000000"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry.stroke",
                        "stylers": {
                            "color": "#0b3d51"
                        }
                    },
                    {
                        "featureType": "local",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#000000"
                        }
                    },
                    {
                        "featureType": "land",
                        "elementType": "all",
                        "stylers": {
                            "color": "#08304b"
                        }
                    },
                    {
                        "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": "#1e1c1c"
                        }
                    },
                    {
                        "featureType": "manmade",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#022338"
                        }
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "all",
                        "elementType": "labels.icon",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "all",
                        "elementType": "labels.text.fill",
                        "stylers": {
                            "color": "#2da0c6",
                            "visibility": "on"
                        }
                    }
                    ]
                }
            },
            series: [{
                type: ‘scatter‘,
                coordinateSystem: ‘bmap‘,
                data: [ [120, 30, 1] ]
            }]
        });
        var bmap = myChart.getModel().getComponent(‘bmap‘).getBMap();
        bmap.addControl(new BMap.MapTypeControl());
    </script>

echart+map

标签：etop   system   otc   top   extension   center   new   poi   uil   

原文地址：https://www.cnblogs.com/cyany/p/9092915.html