vue echarts 地图使用

1.首先安装echart
2.引用
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts;
3.引入地图数据 import worldJson from ‘echarts/map/json/world.json’
注意：name与你引入的echart库的map下word.js,保持一致
{ name: ‘United States’, value: 12247.116, selected: true},
遇到两个
{ name: ‘United States of America’, value: 12247.116, selected: true}

<template>
    <div class="echart">
        <div ref="worldDiv" style="width: 900px;height: 600px;"></div>
    </div>
</template>
<script>
    import worldJson from 'echarts/map/json/world.json'
    export default {
        name: 'World',
        data() {
            return {
                option: {
                    title: {
                        text: 'World Population (2020)',
                        subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
                        sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
                        x: 'center',
                        y: 'top'
                    },
                    tooltip: {
                        trigger: 'item',
                        // formatter: function (params) {
                        //     var value = (params.value + '').split('.');
                        //     console.log('params',value)
                        //      console.log('value', value)
                        //     value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
                        //         + '.' + value[1];
                        //     return params.seriesName + '<br/>' + params.name + ' : ' + value;
                        // }
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        x: 'right',
                        y: 'center',
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    // dataRange: {
                    //     min: 0,
                    //     max: 1000000,
                    //     text: ['High', 'Low'],
                    //     realtime: false,
                    //     calculable: true,
                    //     color: ['orangered', 'yellow', 'lightskyblue']
                    // },
                    series: [
                        {
                            name: 'World Population (2010)',
                            type: 'map',
                            mapType: 'world',
                            roam: true,
                            mapLocation: {
                                y: 60
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    areaColor: '#0D62AA',
                                    borderColor: '#41c7db ',
                                    borderWidth: 0,