前端学习 之 Vue 引入Echarts地图

前言

以为工作原因需要用在vue中编写Echarts地图 [白眼ing...] 作为一个后台搬砖人员，心里是真的苦。 百度一番后，相关教程一般都是需要下载地图数据文件，引入页面后结合Echarts使用。
但一个偶然的机会发现echarts4.x的依赖包中已经包含了中国以及各省的地图数据。无需自己下载。

所以特地写个博客，用以记录并给后来者一个简单易用的解决方案。

安装Echarts依赖

要在vue中使用Echarts 需要先安装依赖

npm install echarts --save

这是我的Echarts版本(据了解低版本的echarts，默认并没有地图相关数据)

"echarts": "^4.0.4"

---

编写页面 准备数据

这里编写一个简单的页面用以演示

demo.vue

<template>
    <div ref="map" style="height:600px;width:600px;" ></div>
</template>
<script>
export default {
  name: "mapDemo",
  data() {
    return {

    };
  },
  //钩子函数  不了解的话 建议看看 vue的生命周期
  mounted() {

  },
  methods:{
  }
}
</script>

引入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();
  }

完整版页面代码

<template>
    <div ref="map" style="height:600px;width:600px;" ></div>
</template>
<script>
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);
      }
  }
}
</script>

访问页面

成功页面

就这样 vue 整合echarts地图 就成功啦~

• Echarts官网: https://echarts.baidu.com/
• Echarts官网社区：https://gallery.echartsjs.com/explore.html#sort=rank_{timeframe=all}author=all (有大量优质Echarts图，可以在线调试，小白神器)
• 参考博客：https://www.jianshu.com/p/c81aed6bcd0c

---

<p>原文作者：Hman</p>
<p>原文链接：https://hman.fun/2019/05/14/vue-echarts-map-01/</p>

---