前言
以为工作原因需要用在vue中编写Echarts地图 [白眼ing...] 作为一个后台搬砖人员，心里是真的苦。 百度一番后，相关教程一般都是需要下载地图数据文件，引入页面后结合Echarts使用。
但一个偶然的机会发现echarts4.x的依赖包中已经包含了中国以及各省的地图数据。无需自己下载。
所以特地写个博客，用以记录并给后来者一个简单易用的解决方案。
安装Echarts依赖
要在vue中使用Echarts 需要先安装依赖
npm install echarts --save
这是我的Echarts版本(据了解低版本的echarts，默认并没有地图相关数据)
"echarts": "^4.0.4"
编写页面 准备数据
这里编写一个简单的页面用以演示
demo.vue
export default {
name: "mapDemo",
data() {
return {
};
},
//钩子函数 不了解的话 建议看看 vue的生命周期
mounted() {
},
methods:{
}
}
引入Echarts 以及 地图数据
接下来我们来引入 echarts 和相关地图数据,这里暂用广东的数据做测试。
import echarts from "echarts";
import 'echarts/map/js/province/guangdong.js'; //引入广东地图
地图数据在 根目录 node_modules > echarts > map 文件夹下
node_modules >echarts 目录结构图
编写测试数据
在页面的相同文件夹新建一个 map-option.js 文件
//map-option.js
export default {
title : {
text: '订阅我博客的人群分布',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['iphoneX']
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text:['max','min'],
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series : [
{
name: 'iphoneX',
type: 'map',
mapType: '广东',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '珠海市',value:130},
{name: '广州市',value: 50},
{name: '中山市',value:31},
{name: '佛山市',value: 55},
{name: '清远市',value:90},
{name: '梅州市',value: 10},
{name: '汕头市',value:70},
{name: '东莞市',value: 50},
{name: '惠州市',value:30},
{name: '深圳市',value: 50}
]
}
]
};
在页面中引入 option 数据
import option from "./map-option.js";
初始化Echarts
在 methods 中编写方法
mapEchartsInit(){
var myChart=echarts.init(this.$refs.map);
myChart.setOption(option, true);
}
在 mounted 中调用
mounted() {
this.mapEchartsInit();
}
完整版页面代码
import echarts from "echarts";
import 'echarts/map/js/province/guangdong.js'; //引入广东地图
import option from "./map-option.js";
export default {
name: "mapDemo",
data() {
return {
};
},
//钩子函数 不了解的话 建议看看 vue的生命周期
mounted() {
this.mapEchartsInit();
},
methods:{
mapEchartsInit(){
var myChart=echarts.init(this.$refs.map);
myChart.setOption(option, true);
}
}
}
访问页面
成功页面
就这样 vue 整合echarts地图 就成功啦~