vue+ echarts实现地图（中国地图）

**

vue+ echarts实现地图（中国地图）

**

<div class="myChartMap" id="myChartMap" ></div>

<script>
  import echarts from '../../../static/js/echarts.min.js';
  import china from '../../common/js/china.json';
  echarts.registerMap('china',china);
  export default {
   data(){
    return {
       mydata: [  
                {name: '北京',value: '100' },{name: '天津',value: "200" },  
                {name: '上海',value: "500" },{name: '重庆',value: "500" },  
                {name: '河北',value: "500" },{name: '河南',value: "500" },  
                {name: '云南',value: "500" },{name: '辽宁',value: "500" },  
                {name: '黑龙江',value: "500" },{name: '湖南',value: "200" },  
                {name: '安徽',value: "200" },{name: '山东',value: "200" },  
                {name: '新疆',value: "200" },{name: '江苏',value: "200" },  
                {name: '浙江',value: "200" },{name: '江西',value: "5000" },  
                {name: '湖北',value: "1000" },{name: '广西',value: "1000" },  
                {name: '甘肃',value: "1000" },{name: '山西',value: "1000" },  
                {name: '内蒙古',value: "1000" },{name: '陕西',value: "1000" },  
                {name: '吉林',value: "5000" },{name: '福建',value: "5000" },  
                {name: '贵州',value: "5000" },{name: '广东',value: "5000" },  
                {name: '青海',value: "5000" },{name: '西藏',value: "50" },  
                {name: '四川',value: "50" },{name: '宁夏',value: "50" },  
                {name: '海南',value: "50" },{name: '台湾',value: "50" },  
                {name: '香港',value: "50" },{name: '澳门',value: "20" }  
            ]
          }
        }
methods：{
   getData(){
          //初始化echarts实例
        var myChartMap = echarts.init(document.getElementById('myChartMap'),'dark');
        var optionMap = {
            title: [{top:"3%",text: '各地区报案量', x:'left',textStyle:{fontSize:'20',textBorderType: [5, 10],textBorderDashOffset: 5,textBorderType: 'solid',color:'#5b9bd5'}},{top:"3%",text: '报案总量',textStyle:{fontSize:'14',textBorderType: [5, 10],textBorderDashOffset: 5,textBorderType: 'solid',color:'#5b9bd5'},right:20,subtext: "5000",subtextStyle: {color:'#fff',fontSize: 30,fontWeight: '700'}}],
             tooltip : { trigger: 'item'},
              //左侧小导航图标
              visualMap: {show : true,x: 'left',y: '50px',  
               splitList: [{start: 3000, end:10000},{start: 1000, end: 3000},{start: 500, end: 1000},{start: 0, end: 500},],
                color: ['#5475f5', '#9feaa5',  '#e6ac53', '#9fb5ea']
},  
                //配置属性
                series: [{ name: '数据', type: 'map',mapType: 'china',roam: false,height:'auto',
                    label: {normal: {show: false }, //省份名称  
                    emphasis: {show: true}  
                    },  
                    data:this.mydata  //数据
                }]  
            }; 
            myChartMap.setOption(optionMap); 
   }
  }
}
</script>