安装

npm install echarts

// 引入echarts 中国地图
import echarts from 'echarts'
import china from 'echarts/map/json/china.json'

还需要下载地图下钻用到的省份和城市数据。github地址：链接

下载好之后需要在public文件夹下新建一个static文件夹（因为vue默认public目录是根目录），将下载好的文件放入static目录中。

效果图

echarts

新建一个echarts组件，引入中国地图。

import echarts from 'echarts'
import china from 'echarts/map/json/china.json'

初始化：

 var dom = document.getElementById('left_map')
        this.map = echarts.init(dom)
        let option = this.getMapOpt()
        this.option = option
        if (option && typeof option === 'object') {
            this.map.setOption(option, true)
        }
        this.map.on('click', (param) => {
        })

给地图绑定点击事件。
思路是在点击echarts时可以获取到地图参数，通过参数名称请求省分下的城市，城市下的地区。

axios.get('static/' + this.leavel + '/' + provinceAlphabet + '.json').then((s) => {
})

获取到数据后调用

echarts.registerMap(provinceAlphabet, data)

注册地图

处理完数据后调用

//  option 为拿到城市数据处理后的echarts option
this.map.setOption(option, true)

这里是从刚刚下载好的citys和province文件夹中读取数据。 this.leavel 的值为citys或province。 provinceAlphabet为文件名称。当this.leavel === 'province’时，provinceAlphabet应为对应省份拼音，返回得结果为城市数据。 当this.leavel === 'citys’时，provinceAlphabet应为城市的地区编码。

getMapOpt方法：

  // 设置地图数据option
    getMapOpt (place, chartData) {
      let option = (option = {
        visualMap: {
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            text: ['Heigh', 'Low'],
            show: false,
            seriesIndex: [1],
            textStyle: {
                color: 'rgb(136, 215, 253)'
            },
            pieces: [{
                gte: 1,
                color: '#0383B4'
            }, {
                lte: 0,
                color: '#57B2D9'
            }]
        },
        geo: {
        	//  place的值为省市拼音 china
            map: place ? place : 'china',
            zoom: 1.2,
            label: {
                normal: {
                    show: true,
                    fontSize: '10'
                }
            },
            roam: false,
            itemStyle: {
                normal: {
                    shadowColor: '#276fce',
                    shadowOffsetX: 0.5,
                    shadowOffsetY: 1,
                    color: '#276fce'
                },
                emphasis: {
                    areaColor: 'rgb(249, 216, 107)'
                }
             }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(chartData),
            encode: {
              value: 2
            },
            symbolSize: 5,
            symbolRotate: 35,
            label: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            itemStyle: {
                color: '#F06C00'
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        {
            name: 'categoryA',
            type: 'map',
            geoIndex: 0,
            top: '9.7%',
            left: '1%',
            data: [
                { name: '北京', value: randomValue() },
                { name: '天津', value: randomValue() },
                { name: '上海', value: randomValue() },
                { name: '重庆', value: randomValue() },
                { name: '河北', value: randomValue() },
                { name: '河南', value: randomValue() },
                { name: '云南', value: randomValue() },
                { name: '辽宁', value: randomValue() },
                { name: '黑龙江', value: randomValue() },
                { name: '湖南', value: randomValue() },
                { name: '安徽', value: randomValue() },
                { name: '山东', value: randomValue() },
                { name: '新疆', value: randomValue() },
                { name: '江苏', value: randomValue() },
                { name: '浙江', value: randomValue() },
                { name: '江西', value: randomValue() },
                { name: '湖北', value: randomValue() },
                { name: '广西', value: randomValue() },
                { name: '甘肃', value: randomValue() },
                { name: '山西', value: randomValue() },
                { name: '内蒙古', value: 0 },
                { name: '陕西', value: randomValue() },
                { name: '吉林', value: randomValue() },
                { name: '福建', value: randomValue() },
                { name: '贵州', value: randomValue() },
                { name: '广东', value: randomValue() },
                { name: '青海', value: randomValue() },
                { name: '西藏', value: randomValue() },
                { name: '四川', value: randomValue() },
                { name: '宁夏', value: randomValue() },
                { name: '海南', value: randomValue() },
                { name: '台湾', value: randomValue() },
                { name: '香港', value: randomValue() },
                { name: '澳门', value: randomValue() }
            ]
        },
        //  地图点的动画效果
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: this.convertData(chartData),
                        symbolSize: 5,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            }
                        },
                         itemStyle: {
                color: '#F06C00'
            },
            zlevel: 1
           }
        ]
      })
      return option
    },