vue2+echarts实现地图效果

前言--用vue2结合echarts实现一个地图的效果。之前用echarts都是直接从官网上找示例然后复制粘贴，改改配置就直接用了，但是前段时间的大屏任务需要制作3D地图，由于没有示例并且内容比较繁琐在，所以自己还是摸索了一下如何制作。这一期先分享如何用vue和echarts实现一个地图，最终效果图如下

大家有需要源码的可以去Gitee上面下载,后续会持续更新实现3D效果。

gitee.com/guoJunJia/v...

老样子，按照惯例，去官网找示例，但是地图的示例很粗糙，所以这里就一步一步的来构建自己的基础地图。

首先肯定就是基础部分，先创建一个容器，来容纳我们的地图

<div ref="chart" style="width:900px;height:600px; " />

接着就是将我们自己的容器初始化成为一个echarts的容器，这样才能在容器中显示echarts图表。这里我们需要使用echarts库提供的一些实例和方法。使用前需要下载echarts库

npm install echarts --save

kotlin 复制代码

import * as echarts from 'echarts';

// 在mounted函数中书写
const myChart = echarts.init(this.$refs.chart);

在书写具体代码之前，我们需要自己准备一个地图的JSON文件，为构建想要的地图做准备。这里给大家提供一个链接，可以去下载各市区的JSON文件。当然如果自己有其他好的途径也可以，JSON文件都大差不大。

hxkj.vip/demo/echart...

这里我以荆州的JSON为例来构建地图。获取到的JSON文件保存下来，使用的时候必须使用echarts的registerMap方法进行注册，否则是不能用的。传入两个参数，第一个是你后续在配置项中给map 的名称，第二个是你的JSON文件。

javascript 复制代码

import jingzhouMap from "./jingzhouMap.json";


// 在mounted函数中书写
echarts.registerMap("jingzhouMap", jingzhouMap);

echarts中最重要的就是书写配置项，他的官方文档中也有配置项的详细内容和使用场景，这里我就不一一赘述，我只描述一些关键的配置项，代码中相应的也会有注释说明。

itemStyle配置的是每一个区域块的样式，这也是我们主要需要配置的一项，在里面可以设置地图的颜色、边框、文字等等内容。其中分为主要分为normal和emphasis两个对象，前者就是基本的设置，对所有的区域快都有效，emphasis则是当鼠标移入某个地图块后会对其进行高亮显示，用于设置高亮的特殊样式。

go 复制代码

    // 设置初始化的地图样式
    // 在mounted函数中书写
      const option = {
        series: [
          {
            type: "map",       // 设置图表类型为地图
            map: "jingzhouMap",     // 地图要加载的JSON文件
            zoom: 1.32,        // 地图缩放大小，这个根据自己需求，默认是1，不缩放
            layoutCenter: ["50%", "46%"],   //  定义地图中心在屏幕中的位置
            // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
            layoutSize: 650,
            aspectScale: 0.9, // 长宽比
            roam: false,
            itemStyle: {       // 这里就是设置item 的样式，也就是地图中每个区块的样式（区块就是JSON文件中包含经纬度信息的对象，获取的地图JSON文件中应该有一个数组，其中的每一个对象就对应一个区块）
              normal: {        // 区块的基本样式
                borderColor: "#41b8ff",   // 区块的边界（边框）颜色
                borderWidth: 3,           // 区块的边界（边框）宽度
              },
              emphasis: {         // 区块高亮时的样式（鼠标移入的时候可以选中进行高亮显示）
                borderColor: "#fff",
                shadowBlur: 10,   // 模糊度
                shadowColor: "rgba(0,255,244,0.6)",  // 模糊阴影的颜色
                borderWidth: 4,
                color: "#41b8ff",    // 鼠标选择区域颜色
              },
            },
          },
        ],
      };

配置好option之后，使用echarts实例上的setOption方法即可将我们写的配置传入到echarts容器中

ini 复制代码

myChart.setOption(option);

那么到目前为止，基本的地图就已经制作完成了，只是它看起来很粗糙丑陋，接下来要做的就是对我们的地图进行样式的优化。需要注意的是，echarts是不支持CSS修改样式的，想要修改样式只能通过添加或者修改配置项来实现。

例如修改地图的颜色，我们可以在itemStyle的normal中配置areaColor选项，可以直接设置颜色，如

css 复制代码

normal: {
     areaColor: "blue",
},

这样可以很方便的去改变地图的颜色，但是展现的效果不美观，也不能很好的展示地图的纹理，所以这里推荐使用第二种，传入图片作为地图的背景色，但是需要注意的是，不能直接给图片的地址，而是要传入一个DOM元素才行，否则会出错不显示。以下是官网上面关于纹理填充的说明。

底图可以从我的项目中直接获取使用，也可以自己去寻找自己觉得好看的底图。同样为了修改高亮的样式，我也在emphasis中设置了纹理图片。整体效果如下。

接下来，我们来给每个区块地图显示地名，让地图看起来不那么单调，这里我们需要使用的配置的是label属性。label的本意就是标签的意思，与原生是一个行内元素，所以我们在设置的时候不能设置宽高，并且里面只能放置文字，其包含的属性大多也都是设置文字样式的，如字体大小fontSize、字体颜色color等。

例如我们可以在normal中添加以下代码，来设置label的样式，这样在我们的地图中就能显示地名信息

dart 复制代码

label: {
     show: true,     // 是否显示label
     fontSize: 14,   // 字体大小
     color: "#fff",  // 字体颜色
},

效果如下

那么，我们如果想给label设置背景色并且设置宽高要怎么实现呢？前面说过label是行内元素，不能设置宽高，所以我们直接设置是不行的，所以就要使用其他的方法。echarts为了满足开发者的需求，提供了formatter（标签内容格式器）和rich（富文本标签）来让开发者实现更多的效果。

formatter支持字符串模板和回调函数两种形式，不管是哪种形式，都可以使用"\n"进行换行。如果是模板字符串，一共有三个变量{a},{b},{c}。其中{a}：系列名。{b}：数据名。{c}：数据值。可以直接用来展示，例如这里是显示地名。那么就是使用变量{b}，有其他显示需求的可以自己根据三个变量进行自定义。

formatter: "{b}",

formatter只能提供数据层面的操作，比如数据的重建、组合等等，想要更加炫酷的样式就要结合rich来使用。可以通过在rich中书写对象，通过给对象书写样式来使用。使用rich才可以给label设置宽高等样式，否则是不行的。rich可以相当于是一个具有条件选择的富文本标签，可以通过选择想要的对象来使用对象中的属性。

使用rich的时候，formatter中就要使用回调函数，该函数自带的参数就是当前区域块的信息

formatter: function (params) { console.log(params) }

在控制台打印结果如下

可以看到参数params中包含了很多信息，其中name就是我们要展示的label文字，我们就可以通过return来返回params.name达到显示label的效果

javascript 复制代码

formatter: function (params) {
         const areaname = params.name;
         return `${areaname}`;
},

结合rich使用，就可以给label设置更多的样式，需要注意的是，在书写属性的时候不能使用连字符 '-' ,要使用小驼峰的命名方式，否则会报错，如font-size应写为fontSize。rich中的基本写法如下

less 复制代码

 label: {
     show: true, // 是否显示label
     fontSize: 14, // 字体大小
     color: "#fff", // 字体颜色
     formatter: function (params) {
         const areaname = params.name;
         return `{a|${areaname}}`; // |前代表选择的rich项，后面代表要展示的部分
     },
     rich: {
         a: {     // a代表就是分类，通过在formatter中进行选择，就代表使用a对象下的属性
              color: "#fff",
              padding: 8,
              width: 35,
              height: 8,
              fontSize: 14,
              fontWeight: "normal",
              fontFamily: "Adobe Heiti Std",
              position: "left",
              backgroundColor: "#ccc",
            },
         b: {     
              color: "red",
              padding: 8,
              width: 35,
              height: 8,
              fontSize: 14,
              fontWeight: "normal",
              fontFamily: "Adobe Heiti Std",
              position: "left",
              backgroundColor: "blue",
            },
      },
},

在formatter和rich的组合中，rich提供了一系列的可选项，可选项的名称可以自己定义（如以上代码的a，b）formatter在使用的时候，返回的时候可以选择系列，使用|进行分配系列，当然也可以在返回值中有多个系列去控制不同属性的样式。如

javascript 复制代码

formatter: function (params) {
      const areaname = params.name;
      const index = params.dataIndex;
      return `{a|${areaname}}{b|${index}}`; 
},

和areaColor一样，label的背景色backgroundColor也可以设置为图片，只是这里的图片不需要是个DOM元素，只要填入图片的路径即可，书写规范如下

backgroundColor: { image: '这里书写你的图片路径' },

同样我们也可以在emphasis中书写label的配置项，给高亮选择的区块设置不同的样式，来满足不同的功能需求。

最后，给整个页面添加一个背景色，让我们的地图看起来更加的美观，整体的地图效果如下：