Echarts+Vue实现市级地图

要实现一个市级的地图 ，首先先获取地图的json数据，一般通过

DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。http://datav.aliyun.com/portal/school/atlas/area_selector这个网址去获取，它是阿里云的一个数据可视化平台，而地图数据是高德提供的。

一、获取JSON文件

1、打开http://datav.aliyun.com/portal/school/atlas/area_selector

 2、点击选择自己想要的区域，例如点击了广东省，就会有广东省的轮廓显示出来

 3、可以精确到市，这个时候就可以下载json文件，选择的区域是省级的就可以下载到选择的那个省份的json文件，市级的话就是对应的市的json文件

下载好的文件格式如下：

二、把JSON文件转换为js文件

1、新建js文件

2、把下面代码复制到js文件中

1.  
   /*
2.  
   * Licensed to the Apache Software Foundation (ASF) under one
3.  
   * or more contributor license agreements. See the NOTICE file
4.  
   * distributed with this work for additional information
5.  
   * regarding copyright ownership. The ASF licenses this file
6.  
   * to you under the Apache License, Version 2.0 (the
7.  
   * "License"); you may not use this file except in compliance
8.  
   * with the License. You may obtain a copy of the License at
9.  
   *
10.  
    * http://www.apache.org/licenses/LICENSE-2.0
11.  
    *
12.  
    * Unless required by applicable law or agreed to in writing,
13.  
    * software distributed under the License is distributed on an
14.  
    * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15.  
    * KIND, either express or implied. See the License for the
16.  
    * specific language governing permissions and limitations
17.  
    * under the License.
18.  
    */
19.  
     
20.  
    (function(root, factory) {
21.  
    if (typeof define === 'function' && define.amd) {
22.  
    // AMD. Register as an anonymous module.
23.  
    define(['exports', 'echarts'], factory);
24.  
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
25.  
    // CommonJS
26.  
    factory(exports, require('echarts'));
27.  
    } else {
28.  
    // Browser globals
29.  
    factory({}, root.echarts);
30.  
    }
31.  
    }(this, function(exports, echarts) {
32.  
    var log = function(msg) {
33.  
    if (typeof console !== 'undefined') {
34.  
    console && console.error && console.error(msg);
35.  
    }
36.  
    }
37.  
    if (!echarts) {
38.  
    log('ECharts is not Loaded');
39.  
    return;
40.  
    }
41.  
    if (!echarts.registerMap) {
42.  
    log('ECharts Map is not loaded')
43.  
    return;
44.  
    }
45.  
    //注意，下面的内容要改成自己的
46.  
    echarts.registerMap('你选择的json文件的城市名字', "填入json文件里面的全部内容");
47.  
    }));

 3、把第一个单引号的内容改成自己选择的城市，注意要一模一样，像我选择的是“惠州市”，就不能填“惠州”；第二个双引号要去掉，然后填入json文件里的所有内容，注意跟第一个引号不一样的是，这里的双引号要去掉

 三、代码实现

1.通过npm安装echarts（已经安装了的忽略这步）

npm install echarts --save

echarts官网地址Apache EChartshttps://echarts.apache.org/zh/index.html

2、在页面引进echarts和城市js文件

 3、完整代码

1.  
   <template>
2.  
   <div id="huizhou-map" ref="mapBox" style="backgroup-color:#ffffff;" />
3.  
   </template>
4.  
   <script>
5.  
   import * as echarts from 'echarts'
6.  
   import '@/assets/huizhou'
7.  
   export default {
8.  
   data() {
9.  
   return {
10.  
    chart: null,
11.  
    options: {}
12.  
    }
13.  
    },
14.  
    created() {
15.  
    this.options = {
16.  
    tooltip: {
17.  
    trigger: 'item'
18.  
    },
19.  
    title: {
20.  
    text: '惠州地图',
21.  
    x: 'center'
22.  
    },
23.  
    geo: { // 地图的显示信息
24.  
    map: '惠州市',
25.  
    roam: true,
26.  
    itemStyle: {
27.  
    normal: {
28.  
    areaColor: '#0d0059',
29.  
    borderColor: '#389dff',
30.  
    borderWidth: 1, // 设置外层边框
31.  
    shadowBlur: 5, // 阴影模糊度
32.  
    shadowOffsetY: 8,
33.  
    shadowOffsetX: 0,
34.  
    shadowColor: '#01012a'
35.  
    },
36.  
    emphasis: { // 鼠标移上去的hover效果
37.  
    areaColor: '#184cff',
38.  
    shadowOffsetX: 0,
39.  
    shadowOffsetY: 0,
40.  
    shadowBlur: 5,
41.  
    borderWidth: 0,
42.  
    shadowColor: 'rgba(0, 0, 0, 0.5)'
43.  
    }
44.  
    }
45.  
    },
46.  
    series: [
47.  
    {
48.  
    map: '惠州市',
49.  
    type: 'map',
50.  
    aspectScale: 0.9,
51.  
    roam: false,
52.  
    label: {
53.  
    show: true,
54.  
    textStyle: {
55.  
    color: '#fff',
56.  
    fontSize: 12
57.  
    }
58.  
    },
59.  
     
60.  
    itemStyle: {
61.  
    normal: {
62.  
    areaColor: '#0d0059',
63.  
    borderColor: '#389dff',
64.  
    borderWidth: 0.5
65.  
    },
66.  
    emphasis: {
67.  
    areaColor: '#17008d',
68.  
    shadowOffsetX: 0,
69.  
    shadowOffsetY: 0,
70.  
    shadowBlur: 5,
71.  
    borderWidth: 0,
72.  
    shadowColor: 'rgba(0, 0, 0, 0.5)'
73.  
    }
74.  
    }
75.  
    }
76.  
    ]
77.  
    }
78.  
    },
79.  
    mounted() {
80.  
    this.chart = echarts.init(this.$refs.mapBox)
81.  
    this.chart.setOption(this.options)
82.  
    },
83.  
    beforeDestroy() {
84.  
    if (!this.chart) {
85.  
    return
86.  
    }
87.  
    this.chart.dispose()
88.  
    this.chart = null
89.  
    }
90.  
    }
91.  
    </script>
92.  
    <style rel="stylesheet/scss" lang="scss" scoped>
93.  
    #huizhou-map{
94.  
    width: 800px;
95.  
    height: 800px;
96.  
    margin: 0 auto;
97.  
    background-color: #b6bad8;
98.  
    }
99.  
     
100.  
     </style>

四、实现效果图

这篇好文章是转载于：学新通技术网