vue中echarts引入中国地图

    <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div>

  
 mounted() {
        this.drawLine();
    },
  drawLine(){
        // 基于准备好的dom，初始化echarts实例
        var myChartContainer = document.getElementById('myChartChina');       
        var resizeMyChartContainer = function(){
          myChartContainer.style.width=(document.body.offsetWidth/2)+'px'//页面一半的大小
        } 
         resizeMyChartContainer();
        var myChartChina = this.$echarts.init(myChartContainer); 

        function randomData() {  
                return Math.round(Math.random()*500);  
            } 
        // 绘制图表
       var optionMap = {  
              tooltip: {},
                 legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:['']
                        },      
                 visualMap: {
                            min: 0,
                            max: 1500,
                            left: '10%',
                            top: 'bottom',
                            text: ['高','低'],
                            calculable : true,
                            color:['#0b50b9','#c3e2f4']
                        },   
                 selectedMode: 'single',
                 series : [                         
                            {
                              name: '', 
                              type: 'map',
                              mapType: 'china',
                              itemStyle: {
                                    normal:{
                                        borderColor: 'rgba(0, 0, 0, 0.2)'
                                    },
                                    emphasis:{
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                showLegendSymbol: true,
                                label: {
                                    normal: {
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                data:[               
                                     {name: '北京',value: randomData() },
                                      {name: '天津',value: randomData() },
                                      {name: '上海',value: randomData() },
                                      {name: '重庆',value: randomData() },
                                      {name: '河北',value: randomData() },
                                      {name: '河南',value: randomData() },
                                      {name: '云南',value: randomData() },
                                      {name: '辽宁',value: randomData() },
                                      {name: '黑龙江',value: randomData() },
                                      {name: '湖南',value: randomData() },
                                      {name: '安徽',value: randomData() },
                                      {name: '山东',value: randomData() },
                                      {name: '新疆',value: randomData() },
                                      {name: '江苏',value: randomData() },
                                      {name: '浙江',value: randomData() },
                                      {name: '江西',value: randomData() },
                                      {name: '湖北',value: randomData() },
                                      {name: '广西',value: randomData() },
                                      {name: '甘肃',value: randomData() },
                                      {name: '山西',value: randomData() },
                                      {name: '内蒙古',value: randomData() },
                                      {name: '陕西',value: randomData() },
                                      {name: '吉林',value: randomData() },
                                      {name: '福建',value: randomData() },
                                      {name: '贵州',value: randomData() },
                                      {name: '广东',value: randomData() },
                                      {name: '青海',value: randomData() },
                                      {name: '西藏',value: randomData() },
                                      {name: '四川',value: randomData() },
                                      {name: '宁夏',value: randomData() },
                                      {name: '海南',value: randomData() },
                                      {name: '台湾',value: randomData() },
                                      {name: '香港',value: randomData() },
                                      {name: '澳门',value: randomData() }
                                ]
                            }
                        ]
               }
     
        myChartChina.setOption(optionMap);
        window.onresize=function(){
            resizeMyChartContainer();
            myChartChina.resize();
        }
      }

 主要注意的一点在main.js里面：

除了引入echarts之外

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 还要特别引入china.json，这样中国地图才会出现，不然只会出现右下角的南海诸岛

import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)