**
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>
