vue中使用echarts地图且修改地图文字位置

使用echarts地图的时候，从阿里云 地图选择器 下载完对应省份的geojson之后，在页面中显示，会出现一些地市名字覆盖的情况，可以直接修改geojson中的数据对文字的位置进行修改

解决方法

打开JSON，搜索需要修改的name，找到properties里面加一个”cp”字段，这个是 [ 经度 ， 纬度 ] ，通过调整该坐标进行定位

说那么多没什么屁用，直接参考下面的DEMO

{"type":"Feature","properties":{"adcode":411200,"name":"三门峡市", "cp":[110.911888,34.361995], "center":[111.194099,34.777338],"centroid":[111.111998,34.361995],"childrenNum":6,"level":"city","subFeatureIndex":11,"acroutes":[100000,410000],"parent":{"adcode":410000}},"geometry":{"type":"MultiPolygon","coordinates":[......]

vue中使用echarts，main.js中注册，这个看个人心情，反正就是先install，再引入依赖…

const echarts = require('echarts');
Vue.prototype.$echarts= echarts;

<template>
    <div class="map-box" ref="echartsMap"></div>
</template>

<script>
// 下载的geojson
let dataGeoLocation = require('@/assets/js/geolocation/henan.json');

export default {
    data() {
        return {
            echartsDataMap: {
                visualMap: {
                    min: 0,
                    max: 500,
                    show: false,
                    splitNumber: 5,
                    inRange: {
                        color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: '河南',
                    label: {
                        normal: {
                            show: true,
                            color: '#fff'
                        },
                        emphasis: {
                            show: true,
                            color: '#fff'
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#10457f',
                            borderColor: '#3398db',
                            borderWidth: 1.5
                        },
                        emphasis: {
                            areaColor: '#3398db'
                        }
                    },
                    "left": 0,
                    "right": 0,
                    "top": 0,
                    "bottom": 0
                }
            }
        }
    },
    mounted() {
        
        // 地图
        let echartsMap = this.$echarts.init(this.$refs.echartsMap);
        this.$echarts.registerMap('河南', dataGeoLocation);
        echartsMap.setOption(this.echartsDataMap);

        // 地图点击事件
        echartsMap.off('click');
        echartsMap.on('click', (params) => {
            console.log(params);
        });
    }
}
</script>