ECharts的地图中的点靠太近文字展示一左一右进行展示

做的是福州市的地图，因为坐标点位置过于接近，对几乎重叠的位置坐标进行了位置的一部分偏移

之前的效果图

html中：

将福建省的地图数据的js进行导入，不知道自己的地图的json格式可参考以下网址进行获取

http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

js中：

$(function () {
    map();
    function map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map_1'));
        //获取的数据格式，从后端进行好数据格式的拼接在前端进行传入即可
        var data = [
            {
                "value": "ABC",
                "name": "展示数据1",
                "mapPoint": "119.706144,26.47128"
            },
            {
                "value": "DEF",
                "name": "测试数据",
                "mapPoint": "119.300234,25.425311"
            },
            {
                "value": "THY",
                "name": "测试数据2",
                "mapPoint": "119.484914,26.00994"
            },
            {
                "value": "WER",
                "name": "展示数据3",
                "mapPoint": "119.513543,26.038961"
            },
            {
                "value": "DFG",
                "name": "测试数据5",
                "mapPoint": "119.497396,26.024141"
            },
            {
                "value": "THJ",
                "name": "展示数据9",
                "mapPoint": "119.58684,26.140737"
            },
            {
                "value": "EWQ",
                "name": "展示数据5",
                "mapPoint": "119.461111,25.989225"
            }
        ];

        //对坐标点进行格式化，可格式化坐标点的位置，大小，颜色等
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
        //分割获取坐标点的位置
                var geoCoord = data[i].mapPoint.split(",");
        //因为坐标点位置过于接近，为了更清晰的查看坐标点的位置，我对其中一个坐标点位置进行了偏移
                if(data[i].value == 'DFG'){
                    geoCoord[0] = parseFloat(geoCoord[0]);
                    geoCoord[1] = parseFloat(geoCoord[1]);
                }
                if (geoCoord) {
        //因为会叠在一起，这里将要将展示位置不一样的进行了单独的处理
                    if(data[i].value == 'THY' || data[i].value == 'WER'){
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
        //这里是对文字进行格式化的处理
                            label:{
                                normal : {
                                    formatter:'{b}',
        //这个是展示坐标位置，具体可查看echarts的api接口中写的，有多种展示效果
                                    position : 'left',
        //文字距离坐标点的间距信息
                                    distance : 10,
        //是否展示文字
                                    show : true,
        //展示的文字颜色
                                    color : '#ffeb7b',
        //展示的文字大小
                                    fontSize : 14
                                },
                                emphasis : {
                                    show : false
                                }
                            }
                        });
                    } else{
        //当不是上面的情况时，坐标的展示文字位置就为这边的方向
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                            label:{
                                normal : {
                                    formatter:'{b}',
                                    position : 'right',
                                    distance : 10,
                                    show : true,
                                    color : '#ffeb7b',
                                    fontSize : 14
                                },
                                emphasis : {
                                    show : false
                                }
                            }
                        });
                    }

                }
            }
            return res;
        };

option = {
    tooltip : {
        trigger: 'item',
		formatter: function (params) {
              if(typeof(params.value)[2] == "undefined"){
              	return params.name + ' : ' + params.value;
              }else{
              	return params.name + ' : ' + params.value[2];
              }
            }
    },
  
    geo: {
    //使用哪个地图，如果引入了其他地图，更改这个名称就好了
        map: '福州市',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: false,//禁止其放大缩小
    //地图的底色，根据自己项目进行设置
        itemStyle: {
            normal: {
                areaColor: '#4c60ff',
                borderColor: '#002097'
            },
            emphasis: {
                areaColor: '#293fff'
            }
        }
    },
    series : [
        {
            name: '消费金额',
            type: 'effectScatter',
            coordinateSystem: 'geo',
     //数据格式等都设置在这里面了
            data: convertData(data),
    //点的大小，可根据传入的值进行一定倍数的相除，这边写死，可自己控制台输出val值看看
            symbolSize: function (val) {
                return 6;
    //return val[2] / 15;
            },
    //是否开启点中样式变化，true的话鼠标移动到对应的点，点会进行放大处理
            hoverAnimation: true,
            itemStyle: {
                normal: {
                    color: '#ffeb7b'
                }
            }
        }
		
    ]
};
		
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }

})

设置之后的效果图

echarts的api：

https://echarts.apache.org/zh/option.html#series-effectScatter