一、npm安装依赖
Echarts最新的5.0版本,缺少内置的中国地图资料文件(china.js),所以只能用4.9版本,命令如下
`npm install echarts@4.9.0`
也可通过package.json文件查看/修改版本号
二,引入依赖
main.js 全局注册
* import echarts from 'echarts'
* Vue.prototype.$echarts = echarts
* import 'echarts/map/js/china';
*
* 使用 this.$echarts.init()
三、地图代码
<template>
<div>
<h3>Vue + echarts4.9 基本地图</h3>
<div id="daFeiMap" ref="daFeiMap" />
</div>
</template>
<script>
/*
* main.js 全局注册
* import echarts from 'echarts'
* Vue.prototype.$echarts = echarts
* import 'echarts/map/js/china';
*
* 使用 this.$echarts.init()
* */
//或者
//import echarts from "echarts"
//import china from 'echarts/map/json/china.json'
//echarts.registerMap('china',china)
//Vue.prototype.$echarts = echarts
import echarts from 'echarts'
import 'echarts/map/js/china'; // 这个主要执行了 echarts.registerMap('china', " china.json 数据 ");
export default {
mounted() {
this.drawMap();
},
methods: {
drawMap() {
// const myChart = echarts.init(document.getElementById('daFeiMap'))
const myChart = echarts.init(this.$refs.daFeiMap)
const mapBoxOption = {
series: [
{
type: 'map',
mapType: 'china',
label: {
normal: {
show: true, // 显示省份标签
textStyle: {
color: 'blue' // 省份标签字体颜色
}
},
emphasis: { // 对应的鼠标悬浮效果
show: false,
textStyle: {
color: '#800080'
}
}
},
itemStyle: {
normal: {
borderWidth: 0.5, // 区域边框宽度
borderColor: '#009fe8', // 区域边框颜色
areaColor: '#ffefd5' // 区域颜色
},
emphasis: {
borderWidth: 0.5,
borderColor: '#4b0082',
areaColor: '#ffdead'
}
},
}
],
}
// myChart.registerMap("china"," china.json 数据 ")
myChart.setOption(mapBoxOption)
}
},
};
</script>
<style scoped>
#daFeiMap {
width: 500px;
height: 480px;
}
</style>