Vue项目中使用Echarts地图（精确到区）

使用地图需要获取地图的json文件
这里是免费获取地图json

在原本Echarts图变中你看到的代码是这样的：

var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/510100_full.json";
//地图json
function showProvince() {
    var name = 'chengdu';
    // myChart.showLoading();
    $.get(uploadedDataURL, function(geoJson) {
        // myChart.hideLoading();
        echarts.registerMap(name, geoJson);
        var option = {
            backgroundColor: '#044060',
            title: {
                text: "成都地图分布",
                subtext: "时间周期：2017.01.01——2019.12.30",
                left: 'center',
                textStyle: {
                    color: '#ffffff'
                }
            },
            visualMap: {
                min: 0,
                max: 45000,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                inRange:{
                   color: ['yellow','lightskyblue', 'orangered']
                },
                textStyle: {
                    color: '#ffffff'
                }
            },
            series: [{
                type: 'map',
                mapType: name,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {

                    normal: {
                        borderColor: '#389BB7',
                        areaColor: '#fff',
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                },
                animation: false,
                data: [{ name: '武侯区', value: 0 },
                            { name: '锦江区', value: 10 },
                            { name: '青羊区', value: 30 },
                            { name: '金牛区', value: 100 },
                            { name: '成华区', value: 50 },
                            { name: '龙泉驿区', value: 901 },
                            { name: '温江区', value: 1000 },
                            { name: '青白江区', value: 120 },
                            { name: '新都区', value: 330 },
                            { name: '双流区', value: 440 },
                            { name: '郫都区', value: 990 }
                    ]
            }]}
        myChart.setOption(option)
    });
}

var currentIdx = 0;

showProvince();

在echarts自带编译里

经过验证，直接复制使用是不行的，我们需要对他的方法进行重写。
因为使用地图图表有一个获取子级内容的请求，需要使用到jquery。
我们需要在你的Vue项目中下载jquery
npm install jquery -s
下载后在你需要使用的组件中引入jquery和echarts依赖源。

 import jquery from 'jquery'
 import echarts from 'echarts'

在你的生命周期钩子mounted中初始化echarts,并调用渲染事件

mounted(){
this.myChartpayMoney= this.$myCharts.init(document.getElementById("payMoney"));
 this.payMoney();
}

编写你的渲染事件。

payMoney(){
                var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/510100_full.json";
                var name = 'chengdu';
                let _this = this;
                jquery.get(uploadedDataURL,(geoJson)=>{
                    echarts.registerMap(name, geoJson);
                    var options = {
                                    backgroundColor: '#fff',
                                    title: {
                                        text: "",
                                        subtext: "",
                                        left: 'center',
                                        textStyle: {
                                            color: '#ffffff'
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'item',
                                        formatter: function (val) {
                                            let str = `${val.data.name}</br>核销金额${val.data.value}</br>带动消费金额：${val.data.num}</br>带动比：${(val.data.num/val.data.value).toFixed(2)}`
                                            return str
                                        }
                                    },
                                    visualMap: {
                                        min: 0,
                                        max: 45000,
                                        left: 'left',
                                        top: 'bottom',
                                        text: ['高', '低'], // 文本，默认为数值文本
                                        calculable: true,
                                        inRange:{
                                            color: ['yellow','lightskyblue', 'orangered']
                                        },
                                        textStyle: {
                                            color: '#ffffff'
                                        }
                                    },
                                    series: [{
                                        type: 'map',
                                        mapType: name,
                                        label: {
                                            normal: {
                                                show: true
                                            },
                                            emphasis: {
                                                textStyle: {
                                                    color: '#fff'
                                                }
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                borderColor: '#389BB7',
                                                areaColor: '#fff',
                                            },
                                            emphasis: {
                                                areaColor: '#389BB7',
                                                borderWidth: 0
                                            }
                                        },
                                        animation: false,
                                        data: [{ name: '武侯区', value:4300,num:120},
                                            { name: '锦江区', value: 10000,num:120 },
                                            { name: '青羊区', value: 3000 ,num:120},
                                            { name: '金牛区', value: 40110 ,num:120},
                                            { name: '成华区', value: 45000 ,num:120},
                                            { name: '龙泉驿区', value: 9001,num:120},
                                            { name: '温江区', value: 1000 ,num:120},
                                            { name: '青白江区', value: 1200,num:120 },
                                            { name: '新都区', value: 30030 ,num:120},
                                            { name: '双流区', value: 440 ,num:120},
                                            { name: '郫都区', value: 990 ,num:120}
                                        ]
                                    }]
                    }
                    _this.myChartpayMoney.setOption(options)
                })
            },

其中使用的this.$myCharts为你在main.js中引入并挂载在原型链上的方法名

其他内容自行替换，如果在使用过程中出现了什么问题，可以在下方留言