复制china.js

在 src 目录下创建 js 文件夹

将 china.js 文件复制到 js 文件夹

引入 china.js

在 .vue 文件中引入 china.js 文件

import "../js/china.js";

代码

html

<div id="map" ref="map">

</div>

css

#map{
    width: 400px;
    height: 350px;
    margin: 10px auto 0;

}

js

在 methods 增加下面函数：

showMap(){
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(this.$refs.map);


    var outname = ['吉林','辽宁','广东','黑龙江','内蒙古','安徽','河南','云南','新疆','海南','河北','台湾','青海','西藏','江苏','陕西','北京','甘肃','宁夏回族自治区','四川','贵州'];
    var outvalue = [107,49,20,11,58,406,295,352,81,222,207,468,303,389,33,79,380,112,332,336,404] ;
    var outdata = [];
    for (var i = 0; i < outname.length; i++) {
        outdata.push({
            name: outname[i],
            value: outvalue[i]
        })
    }

    var option = {
        tooltip: {
            show: true,
            formatter: function(params) {
                if(params.value){
                    return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '个&nbsp;&nbsp;';
                }else{
                    return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;0个&nbsp;&nbsp;';
                }
            },

              backgroundColor: 'rgba(50,50,50,0.9)',
            borderWidth:0, // 不显示边框
            textStyle :{
                color : '#ddd',
                fontSize : 10,
            },
        },
        visualMap: {
            min: 0,
            max: 100,
            itemWidth: 10,
            itemHeight: 89,
            right: '0', // 距离右侧位置
            bottom: '0', // 距离底部位置
            text: ['高', '低'],
            textStyle: {
                color: '#666666',
                fontSize: 13,
            },
            inRange: {
                color: ['#D9EEFF','#2F9BFF']
            },
            outOfRange: {
                show: false,
            },
            orient: 'horizontal', // 水平显示，默认是垂直显示
        },

        geo: {
            map: 'china',
            show: true,
            roam: false,
            label: {
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    show: false
                }
            }
        },
        series: [{
            type: 'map',
            map: 'china',
            aspectScale: 0.75,
            //zoom:1.1,
            label: {
                normal: {
                    formatter: function(para) {
                        return '{name|' + para.name + '}'
                    },
                    rich: {
                        cnNum: {
                            fontSize: 11,
                            color: '#333333',
                            align: 'center',
                        },
                        name: {
                            fontSize: 11,
                            color: '#333333',
                            align: 'center',
                            lineHeight: 20,
                        },
                    },
                    //formatter: '{b}',
                    color: '#333333',
                    show: true
                },
                emphasis: {
                    show: false,
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#D9EEFF',
                    borderColor: '#fff',
                    borderWidth: 1,
                },
                emphasis: {
                    areaColor: '#FFAE00',
                }
            },
            data: outdata
        }]
    };



    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

在 mounted 中调用该函数：

mounted() {
    // 显示地理图表
    this.showMap()
},

原文出处：/show_1IX6o79V2cPJ.html