教程] 利用 ECharts 实现高德地图的数据可视化使用 ECharts 对高德地图进行数据可视化
最编程
2024-03-28 18:01:36
...
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="utf-8">
5 <meta name="renderer" content="webkit">
6 <meta http-equiv="cleartype" content="on">
7 <meta http-equiv="x-dns-prefetch-control" content="on">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9 <!-- 下边这些dns-prefetch 是为了实现DNS预解析的 -->
10 <link rel="dns-prefetch" href="https://webapi.amap.com">
11 <link rel="dns-prefetch" href="https://restapi.amap.com">
12 <link rel="dns-prefetch" href="https://vdata.amap.com">
13 <link rel="dns-prefetch" href="https://vdata01.amap.com">
14 <link rel="dns-prefetch" href="https://vdata02.amap.com">
15 <link rel="dns-prefetch" href="https://vdata03.amap.com">
16 <link rel="dns-prefetch" href="https://vdata04.amap.com">
17 <link rel="dns-prefetch" href="https://sdf.amap.com">
18 <link rel="dns-prefetch" href="https://wprd01.is.autonavi.com">
19 <link rel="dns-prefetch" href="https://wprd02.is.autonavi.com">
20 <link rel="dns-prefetch" href="https://wprd03.is.autonavi.com">
21 <link rel="dns-prefetch" href="https://wprd04.is.autonavi.com">
22 <link rel="dns-prefetch" href="https://webst01.is.autonavi.com">
23 <link rel="dns-prefetch" href="https://webst02.is.autonavi.com">
24 <link rel="dns-prefetch" href="https://webst03.is.autonavi.com">
25 <link rel="dns-prefetch" href="https://webst04.is.autonavi.com">
26 <title>高德地图结合ECharts测试</title>
27 <!-- 替换自己的key并设置要引入的插件，如果你用的版本是2.0, 可以把v=1.4.15改为v=2.0 -->
28 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key&plugin=AMap.Scale,AMap.ToolBar,AMap.CustomLayer"></script>
29 <!-- 引入最新版的 echarts CDN -->
30 <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
31 <!-- 引入最新版的 echarts-extension-amap 高德地图扩展库 CDN -->
32 <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.min.js"></script>
33 <style type="text/css">
34 * {
35 margin: 0;
36 padding: 0;
37 }
38 html, body, #echarts-amap {
39 width: 100%;
40 height: 100%;
41 overflow: hidden;
42 }
43 </style>
44 </head>
45 <body>
46 <div id="echarts-amap"></div>
47 <!-- 数据来源于百度地图 仅作示例 与高德坐标稍有偏差 -->
48 <script type="text/javascript">
49 var data = [
50 {name: '海门', value: 9},
51 {name: '鄂尔多斯', value: 12},
52 {name: '招远', value: 12},
53 {name: '舟山', value: 12},
54 {name: '齐齐哈尔', value: 14},
55 {name: '盐城', value: 15},
56 {name: '赤峰', value: 16},
57 {name: '青岛', value: 18},
58 {name: '乳山', value: 18},
59 {name: '金昌', value: 19},
60 {name: '泉州', value: 21},
61 {name: '莱西', value: 21},
62 {name: '日照', value: 21},
63 {name: '胶南', value: 22},
64 {name: '南通', value: 23},
65 {name: '拉萨', value: 24},
66 {name: '云浮', value: 24},
67 {name: '梅州', value: 25},
68 {name: '文登', value: 25},
69 {name: '上海', value: 25},
70 {name: '攀枝花', value: 25},
71 {name: '威海', value: 25},
72 {name: '承德', value: 25},
73 {name: '厦门', value: 26},
74 {name: '汕尾', value: 26},
75 {name: '潮州', value: 26},
76 {name: '丹东', value: 27},
77 {name: '太仓', value: 27},
78 {name: '曲靖', value: 27},
79 {name: '烟台', value: 28},
80 {name: '福州', value: 29},
81 {name: '瓦房店', value: 30},
82 {name: '即墨', value: 30},
83 {name: '抚顺', value: 31},
84 {name: '玉溪', value: 31},
85 {name: '张家口', value: 31},
86 {name: '阳泉', value: 31},
87 {name: '莱州', value: 32},
88 {name: '湖州', value: 32},
89 {name: '汕头', value: 32},
90 {name: '昆山', value: 33},
91 {name: '宁波', value: 33},
92 {name: '湛江', value: 33},
93 {name: '揭阳', value: 34},
94 {name: '荣成', value: 34},
95 {name: '连云港', value: 35},
96 {name: '葫芦岛', value: 35},
97 {name: '常熟', value: 36},
98 {name: '东莞', value: 36},
99 {name: '河源', value: 36},
100 {name: '淮安', value: 36},
101 {name: '泰州', value: 36},
102 {name: '南宁', value: 37},
103 {name: '营口', value: 37},
104 {name: '惠州', value: 37},
105 {name: '江阴', value: 37},
106 {name: '蓬莱', value: 37},
107 {name: '韶关', value: 38},
108 {name: '嘉峪关', value: 38},
109 {name: '广州', value: 38},
110 {name: '延安', value: 38},
111 {name: '太原', value: 39},
112 {name: '清远', value: 39},
113 {name: '中山', value: 39},
114 {name: '昆明', value: 39},
115 {name: '寿光', value: 40},
116 {name: '