vue:引用json地图

<template>
    <div class="ui-map" id="main">
         123
    </div>
</template>
<script>
  import * as echarts from "echarts";
  import JSON from "../utils/500236.json"
  export default {
    data(){
        return {

        }
    },
    mounted () {
        this.leftCenterMap()
    },
    methods:{
        leftCenterMap () {
            var chinaGeoCoordMap = {
                '平安乡': [109.17,31.34],
                '竹园镇': [109.27,31.30],
                "青莲镇": [109.12,31.23],
                '红土乡': [109.11,31.12],
                "公平镇": [109.20,31.12],
                "石岗乡": [109.34,31.12],
                "大树镇": [109.33,31.21],
                "康乐镇": [109.44,31.11],
                "汾河镇": [109.51,31.13],
                "岩湾乡": [109.53,31.19],
                "草堂镇": [109.65,31.09],
                "白帝镇": [109.60,31.06],
                "白帝城风景区管理委员会": [109.55,31.04],
                "永安镇": [109.46,31.02],
                "朱衣镇": [109.39,31.02],
                "康坪乡": [109.25,30.98],
                "永乐镇": [109.52,31.03],
                "安坪镇": [109.30,30.91],
                "鹤峰乡": [109.55,30.93],
                "新民镇": [109.47,30.90],
                "甲高镇": [109.18,30.89],
                "羊市镇": [109.05,30.82],
                "吐祥镇": [109.16,30.71],
                "青龙镇": [109.28,30.78],
                "五马镇": [109.38,30.85],
                "冯坪乡": [109.50,30.83],
                "云雾土家族乡": [109.13,30.60],
                "太和土家族乡": [109.26,30.64],
                "龙桥土家族乡": [109.37,30.61],
                "长安土家族乡": [109.56,30.83],
                "兴隆镇": [109.45,30.66],
            };
            var datamap = [
                { name: '兴隆镇', value: 250 },
                { name: '长安土家族乡', value: 250 },
                { name: '龙桥土家族乡', value: 250 },
                { name: '太和土家族乡', value: 250 },
                { name: '云雾土家族乡', value: 250 },
                { name: '冯坪乡', value: 250 },
                { name: '五马镇', value: 250 },
                { name: '青龙镇', value: 250 },
                { name: '吐祥镇', value: 250 },
                { name: '羊市镇', value: 250 },
                { name: '甲高镇', value: 250 },
                { name: '新民镇', value: 250 },
                { name: '鹤峰乡', value: 250 },
                { name: '安坪镇', value: 250 },
                { name: '永乐镇', value: 250 },
                { name: '白帝城风景区管理委员会', value: 250 },
                { name: '白帝镇', value: 250 },
                { name: '草堂镇', value: 250 },
                { name: '岩湾乡', value: 250 },
                { name: '汾河镇', value: 250 },
                { name: '康乐镇', value: 250 },
                { name: '大树镇', value: 250 },
                { name: '公平镇', value: 250 },
                { name: '石岗乡', value: 250 },
                { name: '红土乡', value: 250 },
                { name: '青莲镇', value: 250 },
                { name: '竹园镇', value: 250 },
                { name: '平安乡', value: 250 },
                
            ];
            var convertData = function (datamap) {
                var res = [];
                for (var i = 0; i < datamap.length; i++) {
                    var geoCoord = chinaGeoCoordMap[datamap[i].name];
                    if (geoCoord) {
                        res.push({
                            name: datamap[i].name,
                            value: geoCoord.concat(datamap[i].value)
                        });
                    }
                }
                return res;
            }
            var myChart = echarts.init(document.getElementById('main')) // 拿到一个实例
            echarts.registerMap('my', JSON, {})//引入地图文件
            console.log(JSON)
            var option = {
                tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(255,255,255,0)',
                textStyle: {
                    color: '#000',
                    decoration: 'none',
                },
                formatter: function (params) {
                    // console.log(params)
                    var tipHtml = '';
                    tipHtml = `
                        <div class="ui-map-img">
                            <div class='ui-maptxt'>${params.name}</div>
                            <div class='ui-mapNum'>产量: ${params.value} 吨</div>
                        </div>
                    `
                    return tipHtml;
                },
            },
            grid: {
                left: '0', // 与容器左侧的距离
                right: '0', // 与容器右侧的距离
                top: '0', // 与容器顶部的距离
                bottom: '0', // 与容器底部的距离
            },
            geo: {
                map: 'my',
                aspectScale: 0.85,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: '60%',

                itemStyle: {
                    normal: {
                        shadowColor: '#276fce',
                        shadowOffsetX: 0,
                        shadowOffsetY: 15,
                        opacity: 0.3,
                    },
                },
            },
            series: [
                {
                    type: 'map',
                    mapType: 'my',
                    aspectScale: 0.85,
                    layoutCenter: ["50%", "50%"], //地图位置
                    layoutSize: '60%',
                    zoom: 0.5, //当前视角的缩放比例
                    // roam: true, //是否开启平游或缩放
                    scaleLimit: { //滚轮缩放的极限控制
                        min: 1,
                        max: 2
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    data: datamap,
                    itemStyle: {
                        normal: {
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.9,
                                colorStops: [{
                                    offset: 0,
                                    color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
                                }],
                            },
                            borderColor: 'RGBA(52, 140, 250, 1)',
                            borderWidth: 2,
                            shadowColor: '#092f8f', //外发光
                            shadowBlur: 20,

                        },
                        emphasis: {
                            areaColor: '#0c274b',
                            // borderColor: '#087cf9',
                            // borderWidth: 5,
                            label: {
                                color: '#fff'

                            },
                        },

                    }
                },
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    symbolSize: 10,
                    rippleEffect: { //坐标点动画
                        period: 3,
                        scale: 5,
                        brushType: 'fill'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}',
                            color: '#f28813',
                            fontWeight: "bold",
                            fontSize: 14
                        }
                    },

                    data:
                        [   
                           {
                                name: "平安乡",
                                value: [109.17,31.34],
                            },
                            {
                                name: "竹园镇",
                                value: [109.27,31.30],
                            },    
                            {
                                name: "青莲镇",
                                value: [109.12,31.23],
                            },
                            {
                                name: "红土乡",
                                value: [109.11,31.12],
                            },
                            {
                                name: "公平镇",
                                value: [109.20,31.12],
                            },
                            {
                                name: "石岗乡",
                                value: [109.34,31.12],
                            },
                            {
                                name: "大树镇",
                                value: [109.33,31.21],
                            },
                            {
                                name: "康乐镇",
                                value: [109.44,31.11],
                            },
                            {
                                name: "汾河镇",
                                value: [109.51,31.13],
                            },
                            {
                                name: "岩湾乡",
                                value: [109.53,31.19],
                            },
                            {
                                name: "草堂镇",
                                value: [109.65,31.09],
                            },
                            {
                                name: "白帝镇",
                                value: [109.60,31.06],
                            },
                            {
                                name: "白帝城风景区管理委员会",
                                value: [109.55,31.04],
                            },
                            {
                                name: "永安镇",
                                value: [109.46,31.02],
                            },
                            {
                                name: "朱衣镇",
                                value: [109.39,31.02],
                            },
                            {
                                name: "康坪乡",
                                value: [109.25,30.98],
                            },
                            {
                                name: "永乐镇",
                                value: [109.52,31.03],
                            },
                            {
                                name: "兴隆镇",
                                value: [109.45,30.66],
                            },
                            {
                                name: "长安土家族乡",
                                value: [109.56,30.83],
                            },
                            {
                                name: "龙桥土家族乡",
                                value: [109.37,30.61],
                            },
                            {
                                name: "太和土家族乡",
                                value: [109.26,30.64],
                            },
                            {
                                name: "云雾土家族乡",
                                value: [109.13,30.60],
                            },
                            {
                                name: "冯坪乡",
                                value: [109.50,30.83],
                            },
                            {
                                name: "五马镇",
                                value: [109.38,30.85],
                            },
                            {
                                name: "青龙镇",
                                value: [109.28,30.78],
                            },
                            {
                                name: "吐祥镇",
                                value: [109.16,30.71],
                            },
                            {
                                name: "羊市镇",
                                value: [109.05,30.82],
                            },
                            {
                                name: "甲高镇",
                                value: [109.18,30.89],
                            },
                            {
                                name: "新民镇",
                                value: [109.47,30.90],
                            },
                            {
                                name: "鹤峰乡",
                                value: [109.55,30.93],
                            },
                            {
                                name: "安坪镇",
                                value: [109.30,30.91],
                            },

                        ],
                    symbolSize: function (val) {
                        return 6;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke',
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'left',
                            show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: 'yellow',
                            shadowBlur: 10,
                            shadowColor: 'yellow',
                        },
                    },
                    zlevel: 1,
                },

            ]
            }
            myChart.setOption(option)
            var index = 0; //播放所在下标
            var showTip = setInterval(function () {
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: index,
                });
                index++;
                if (index >= 28) {
                    index = 0;
                }
            }, 2000);

            myChart.on('mouseover', function (params) {
                console.log(params);
                clearInterval(showTip);
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: params.dataIndex,
                });
            });

            myChart.on('mouseout', function (params) {
                showTip && clearInterval(showTip);
                showTip = setInterval(function () {
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: index,
                    });
                    index++;
                    if (index >= 28) {
                        index = 0;
                    }
                }, 2000);
            });
        }
    }
  }
</script>

<style>
.ui-map {
    width: 50%;
    height: 80vh;
    background-color: #000;
    margin: 0 auto;
}
.ui-map-img {
    background: RGBA(52, 140, 250, 1);
    padding: 0.5vw;
    color: #fff;
}
</style>