话不多说,先看效果图

实际效果网页

echart-map-guangzhou

demo开始

1.你需要一个echart广州地图的JSON文件,这里我给大家准备好了

guangzhou.json

2.然后你需要一个echart的js包,你可以到echart的官网进行下载

echart官网

3.贴出我的参考代码(由于时间急,没有细细的整理代码,就直接扔出来了, 如有错误之处,请留言指明)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>echart-map-gz</title>
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="height: 800px;width: 800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading();
    //步骤一:创建异步对象
    var ajax = new XMLHttpRequest();
    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
    ajax.open('get','guangzhou.json');
    //步骤三:发送请求
    ajax.send();
    //步骤四:注册事件 onreadystatechange 状态改变就会调用
    ajax.onreadystatechange = function () {
        if (ajax.readyState==4 &&ajax.status==200) {
            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
            myChart.hideLoading();
            geoCoordMap=ajax.response;
            //将地图注册上去
            echarts.registerMap('guangzhou',ajax.response );
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }

    var dataa=[
        {name:"荔湾区", value: [113.243038,23.124943,"荔湾区-1号店"]},
        {name:"海珠区", value: [113.262008,23.103131,"海珠区-1号店"]},
        {name:"越秀区", value: [113.280714,23.125624,"越秀区-1号店"]},
        {name:"天河区", value: [113.335367,23.13559,"天河区-1号店"]},
        {name:"黄埔区", value: [113.450761,23.103239,"黄埔区-1号店"]},
        {name:"白云区", value: [113.262831,23.162281,"白云区-1号店"]},
        {name:"番禺区", value: [113.364619,22.938582,"番禺区-1号店"]},
        {name:"南沙区", value: [113.53738,22.794531,"南沙区-1号店"]},
        {name:"从化区", value: [113.587386,23.545283,"从化区-1号店"]},
        {name:"花都区", value: [113.211184,23.39205,"花都区-1号店"]},
        {name:"增城区", value: [113.829579,23.290497,"增城区-1号店"]},
    ]
    
    // 指定图表的配置项和数据
    var option = {
        backgroundColor: '#ccc',
        title: {
            text: '广州市 echart -门店分布图',
            subtext: '数据来源于我瞎编的',
            sublink: 'http://lengff.com',
            x: 'center',
            itemGap:2,
            subtextStyle:{
                color:"#fff"
            },
            textStyle:{
                color:"#fff"
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.name + ' : ' + params.value[2];
            }
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x:'right',
            data:['测试门店分布'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'guangzhou',
            roam: true,
            zoom:1.2,
            layoutSize:"50%",
            label: {
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#2b87bb',
                    borderColor: '#73ffb3'
                },
                emphasis: {
                    borderColor: '#fff',
                    borderWidth: 1,
                    areaColor: '#4e4e4e'
                }
            }
        },
        toolbox: {
            show: true,
            right: 'left',
            top: 0,
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name:'测试门店分布',
                type: 'scatter',
                coordinateSystem: 'geo',
                label: {
                    normal: {
                        color:'#fff',
                        formatter: '{b}',
                        position: 'bottom',
                        show: true
                    }
                },
                data: dataa,
                symbolSize: 30,
                encode: {value: 2},
                symbol:'pin',
                zlevel: 1
            }
        ]
    }
</script>
</body>
</html>