vue中使用eCharts插件显示中国地图

一、前言

    由于项目需求，需要一个中国地图，上面根据从服务器获取到的数据，显示各省份的数据。在eEcharts官网，发现没有地图相关的案列(搜索了一下，都下架了)，只有社区有。

二、查找资料

eChartes官网：官网

社区网址：社区

在社区搜索地图，找到一个跟项目接近的案列，我找到的如下：

三、导入到项目

参考项目地址

     导入项目的时候，遇到一些疑问，这些引用的json数据貌似都是外部的数据，这个社区中又没有这些文件，通过搜索发现，这些数据都是地图相关的数据信息，只能自己先准备

 var provinces = {
        '上海': '/asset/get/s/data-1594958113307-cxRUVth12.json',
        '河北': '/asset/get/s/data-1594957443106-mUbmYqE_T.json',
        '山西': '/asset/get/s/data-1594957766868-uxxAlaOQg.json',
        '内蒙古': '/asset/get/s/data-1594957676205-3QrKkEs35.json',
      ....

参考这个项目：github地图项目

    (1)找到china的json数据，将这个数据放到自己的public/data/json目录下(我的是vue项目，放到自己打包后能找到的路径下,名字不一样可以忽略)

(2)初始化加载地图

    这里需要注意的是，解析json数据，用的jquery的get方法，这个很简单，不会的自行百度一下

//数据
data() {
        return {
            allData: [
               {
                   name: '北京'，
                   value: 310
                },
                 {
                   name: '上海'，
                   value: 210
                },
            ],
        }
    },


.....
//地图初始化
initMapData(
            let that = this
            //json文件路径
            const chinaMapDataPath = '/data/json/data-1527045631990-r1dZ0IM1X.json'
            // 基于准备好的dom，初始化echarts实例
            const echarts = this.$echarts
            let myChart = echarts.init(document.getElementById('main'))

            //解析json数据
            this.$.getJSON(chinaMapDataPath, function (geoJson) {
                if (geoJson) {

                    //将数据注册到地图上(注意这样的名字，china)
                    echarts.registerMap('china', geoJson)
                    var option = {
                        title: {
                            text: '中国地图',
                            left: 'left',
                            textStyle: {
                                color:'#ffffff'
                            }
                        },
                        toolbox: {//工具栏
                            show: false,
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'map'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        tooltip: {
                            show: true,
                            // 鼠标放地图上显示数据
                            formatter: function (params) {
                                if (params.data) {
                                    return params.name + '：' + params.data['value']
                                } else {
                                    return params.name
                                }
                            },
                        },
                        visualMap: { //左侧的柱子图
                            show: false,
                            type: 'continuous',
                            text: ['高', '低'],
                            showLabel: true,
                            left: '50',
                            min: 0,
                            max: 100,
                            inRange: {
                                color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096',]
                            },
                            splitNumber: 0
                        },
                        series: [{
                            zoom: 1.1, //设置地图大小
                            name: 'MAP',
                            type: 'map',
                            // mapType: 'china',
                            map:'china',
                            selectedMode: 'false',//是否允许选中多个区域
                            label: {
                                show: true,
                                // normal: {
                                //     show: true
                                // },
                                emphasis: {
                                    show: true
                                },
                                fontSize: 10,
                                // 地图上文字样式
                                // textStyle: {//label选中textStyle属性可以直接放外面
                                //     fontSize: 10,
                                //     // fontWeight: 'bold',
                                //     // color: 'red'
                                // }
                            },
                            // emphasis:{
                            //     show: true,
                            //     label:{
                            //         show: true,
                            //     }
                            // },
                            data: that.allData
                        }]
                    }
                    myChart.setOption(option);
                    // curMap = {
                    //     mapCode: mapCode,
                    //     mapName: name
                    // };
                } else {
                    alert('无法加载该地图');
                }

            })