Echart广州市地图

``<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

<div id="xiaQu" style="width: 1000px;height: 700px;"></div>
<script>
    function createMap(type) {
        //辖区地图
        var xiaQuDom = document.getElementById("xiaQu");
        var xiaQuChart = echarts.init(xiaQuDom);
        xiaQuOption = null;
        window.onresize = function () {
            xiaQuChart.resize();
        };
        xiaQuChart.showLoading();
        var geoJson = {
            "type": "FeatureCollection",
            "features": []
        };

        if (type) {
            echarts.registerMap('HK', geoJson);
            xiaQuChart.hideLoading();
            var geoCoordMap = {
                '荔湾区': [113.243038, 23.124943],
                '越秀区': [113.280714, 23.125624],
                '白云区': [113.262831, 23.162281],
                '海珠区': [113.262008, 23.103131],
                '从化区': [113.587386, 23.545283],
                '黄埔区': [113.450761, 23.103239],
                '增城区': [113.829579, 23.290497],
                '天河区': [113.335367, 23.13559],
                '花都区': [113.211184, 23.39205],
                '番禺区': [113.364619, 22.938582],
                '南沙区': [113.53738, 22.794531],
            };
            var data = [{
                name: '荔湾区',
                value: 20057.34
            },
            {
                name: '越秀区',
                value: 15477.48
            },
            {
                name: '白云区',
                value: 31686.1
            },
            {
                name: '海珠区',
                value: 6992.6
            },
            {
                name: '从化区',
                value: 44045.49
            },
            {
                name: '黄埔区',
                value: 40689.64
            },
            {
                name: '增城区',
                value: 37659.78
            },
            {
                name: '天河区',
                value: 45180.97
            },
            {
                name: '花都区',
                value: 55204.26
            },
            {
                name: '番禺区',
                value: 21900.9
            },
            {
                name: '南沙区',
                value: 4918.26
            }
            ];

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                console.log(res)
                return res;
            };
            xiaQuChart.setOption(option = {
                title: {
                    // text: '香港18区人口密度 (2011)',
                    // subtext: '人口密度数据来自Wikipedia',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (p / km2)'
                },
                // visualMap: {
                //     min: 800,
                //     max: 50000,
                //     text: ['High', 'Low'],
                //     realtime: false,
                //     calculable: true,
                //     inRange: {
                //         color: ['lightskyblue', 'yellow', 'orangered']
                //     }
                // },
                geo: {
                    map: 'HK',
                    // left: '350',
                    zoom: 1.2,
                    itemStyle: { //地图区域的多边形 图形样式
                        normal: { //是图形在默认状态下的样式
                            label: {
                                show: true, //是否显示标签
                                textStyle: {
                                    color: '#ff0'
                                },
                            },

                            borderWidth: 1,
                            borderColor: 'rgba(37,124,169)',
                            shadowColor: '#e8e8e8',
                            shadowOffsetY: 15,
                            shadowOffsetX: 8,

                        },

                    },
                },
                series: [{
                    name: 'credit_pm2.5',
                    type: 'effectScatter',
                    // left: '150',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbol: "circle",
                    symbolSize: 10,
                    zoom: 1.2,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    // label: {
                    //     normal: {
                    //         formatter: '{b}',
                    //         position: 'bottom',
                    //         color: 'red',
                    //         show: true
                    //     }
                    // },
                    itemStyle: {
                        normal: {
                            color: '#fff',
                            shadowBlur: 0,
                            shadowColor: '#96CEFF'
                        }
                    },
                    zlevel: 1
                }, {
                    // name: '香港18区人口密度',
                    type: 'map',
                    mapType: 'HK', // 自定义扩展图表类型
                    zoom: 1.2,//地图倍数
					roam: true, //是否开启平游或缩放
                    showLegendSymbol: false,//消除地图默认红点
                    itemStyle: {
                        normal: {
                            borderColor: "#fff",
                            areaColor: '#96CEFF',//地图总体颜色
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: data,
                }, {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin',
                    symbolSize: 100,//气泡大小
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#222',
                                fontSize: 12,
                                fontWeight:"bold",
                            },
                            formatter(value) {
                                return value.data.value[2]
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color:"#fff",//气泡颜色
                            areaColor: 'red',
                            borderColor: '#3E9CEC',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        },
                        
                    },
                    zlevel: 6,
                    data: convertData(data),
                }]
            });
        }

    }
    createMap("type")
</script>
```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值