vue中引入echarts全国、全球地图

一、安装echarts

npm install echarts -S   
cnpm install echarts -S
或使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

二、main.js中全局引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//中国地图
import 'echarts/map/js/china'
//世界地图
import 'echarts/map/js/world'

三、vue组件中

mounted(){
	this.echarts();
},
methods: {
	echarts(){
		var myChart = this.$echarts.init(document.getElementById("echarts_map"));
		var option = {
			geo: {
				//全国地图map:"china",全球为map:"world"
				map: "china",
				right: "15%",
				left: "15%",
				roam: true,
					label: {
						normal: {
							show: true,
							color: "#fff",
						},
					},
				itemStyle: {
					normal: {
						borderWidth: 1,
						areaColor: "green",
						borderColor: "yellow",
					},
					emphasis: {
						areaColor: "skyblue",
					},
				},
			},
		};
		myChart.setOption(option);
		window.addEventListener("resize", function () {
			myChart.resize();
		});
	}
}