一、安装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();
});
}
}