vue-cli之Echarts 省市地图+经纬度描点

引入echarts模块和地图js

 import echarts from 'echarts'
 import 'echarts/map/js/province/hubei.js'

全局代码如下：

        var dom = document.getElementById("mapEchart");
        var mapChart = echarts.init(dom);
        // 散点在地图上的坐标
        var geoCoordMap = {
            "武汉": [114.23, 30.11],
        };
        // 将坐标与值对应并反映在地图上
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
        var option = {
            tooltip: {
              backgroundColor:'rgba(0, 0, 0, 0.75)',
              padding: 10,
              axisPointer: {
                  type: ''
              }
            },
            visualMap: {
                type: 'piecewise',
                textStyle: {
                    color: '#fff'
                },
                pieces: [
                    {min: 200, label: '正常', color: '#FF7052'},
                    {min: 0, max: 200, label: '离线', color: '#2CE273'},
                ],
            },
            geo: {
                map: '湖北',
                label: {
                   show: true,
                   color: '#FFFFFF'
                },
                layoutCenter: ['50%', '50%'],
                layoutSize: 370,
                itemStyle: {
                    normal: {
                        areaColor: '#1890FF',
                        borderColor: '#FFFFFF'
                    },
                    emphasis: {
                        areaColor: '#005DB4',
                        color: '#FFFFFF'
                    }
                }
            },
            series: [
                {
                    type: 'effectScatter',
                    map: '湖北',
                    coordinateSystem: 'geo',
                    data: convertData([
                        {name: "武汉", value: 210}
                    ]),
                    symbolSize: 4,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                }
            ]
        };
        if (option && typeof option === "object") {
            mapChart.setOption(option, true);
        }

注：geo中的map名称必须跟引入的文件名称一致！如引入的为hubei.js，名称则为‘湖北’。

效果图：

QQ图片20201030171544.png