vue2结合echarts实现一个地图的效果
作者：吕洋羊
本文介绍了用vue2结合echarts实现一个地图的效果。之前用echarts都是直接从官网上找示例然后复制粘贴，改改配置就直接用了，但是前段时间的大屏任务需要制作3D地图，由于没有示例并且内容比较繁琐在，所以自己还是摸索了一下如何制作。这一期先分享如何用vue和echarts实现一个地图，最终效果图如下
大家有需要源码的可以去Gitee上面下载,后续会持续更新实现3D效果。
https://gitee.com/guoJunJia/vue-charts-implement-maps.git
老样子，按照惯例，去官网找示例，但是地图的示例很粗糙 ，所以这里就一步一步的来构建自己的基础地图。
首先肯定就是基础部分，先创建一个容器，来容纳我们的地图
<div ref="chart" style="width:900px;height:600px; " />
接着就是将我们自己的容器初始化成为一个echarts的容器，这样才能在容器中显示echarts图表。这里我们需要使用echarts库提供的一些实例和方法。使用前需要下载echarts库
npm install echarts --save
import * as echarts from 'echarts'; // 在mounted函数中书写 const myChart = echarts.init(this.$refs.chart);
在书写具体代码之前，我们需要自己准备一个地图的JSON文件，为构建想要的地图做准备。这里给大家提供一个链接，可以去下载各市区的JSON文件。当然如果自己有其他好的途径也可以，JSON文件都大差不大。
https://hxkj.vip/demo/echartsMap/
这里我以荆州的JSON为例来构建地图。获取到的JSON文件保存下来，使用的时候必须使用echarts的registerMap方法进行注册，否则是不能用的。传入两个参数，第一个是你后续在配置项中给map 的名称，第二个是你的JSON文件。
import jingzhouMap from "./jingzhouMap.json";
// 在mounted函数中书写
echarts.registerMap("jingzhouMap", jingzhouMap);
echarts中最重要的就是书写配置项，他的官方文档中也有配置项的详细内容和使用场景，这里我就不一一赘述，我只描述一些关键的配置项，代码中相应的也会有注释说明。
itemStyle配置的是每一个区域块的样式，这也是我们主要需要配置的一项，在里面可以设置地图的颜色、边框、文字等等内容。其中分为主要分为normal和emphasis两个对象，前者就是基本的设置，对所有的区域快都有效，emphasis则是当鼠标移入某个地图块后会对其进行高亮显示，用于设置高亮的特殊样式。
// 设置初始化的地图样式
// 在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容器中
myChart.setOption(option);
那么到目前为止，基本的地图就已经制作完成了，只是它看起来很粗糙丑陋，接下来要做的就是对我们的地图进行样式的优化。需要注意的是，echarts是不支持CSS修改样式的，想要修改样式只能通过添加或者修改配置项来实现。
例如修改地图的颜色，我们可以在itemStyle的normal中配置areaColor选项，可以直接设置颜色，如
normal: {
areaColor: "blue",
},
这样可以很方便的去改变地图的颜色，但是展现的效果不美观，也不能很好的展示地图的纹理，所以这里推荐使用第二种，传入图片作为地图的背景色，但是需要注意的是，不能直接给图片的地址，而是要传入一个DOM元素才行，否则会出错不显示。以下是官网上面关于纹理填充的说明。
底图可以从我的项目中直接获取使用，也可以自己去寻找自己觉得好看的底图。同样为了修改高亮的样式，我也在emphasis中设置了纹理图片。整体效果如下。
接下来，我们来给每个区块地图显示地名，让地图看起来不那么单调，这里我们需要使用的配置的是label属性。label的本意就是标签的意思，与原生是一个行内元素，所以我们在设置的时候不能设置宽高，并且里面只能放置文字，其包含的属性大多也都是设置文字样式的，如字体大小fontSize、字体颜色color等。
例如我们可以在normal中添加以下代码，来设置label的样式，这样在我们的地图中就能显示地名信息
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的效果
formatter: function (params) {
const areaname = params.name;
return `${areaname}`;
},
结合rich使用，就可以给label设置更多的样式，需要注意的是，在书写属性的时候不能使用连字符 '-' ,要使用小驼峰的命名方式，否则会报错，如font-size应写为fontSize。rich中的基本写法如下
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在使用的时候，返回的时候可以选择系列，使用|进行分配系列，当然也可以在返回值中有多个系列去控制不同属性的样式。如
formatter: function (params) {
const areaname = params.name;
const index = params.dataIndex;
return `{a|${areaname}}{b|${index}}`;
},
和areaColor一样，label的背景色backgroundColor也可以设置为图片，只是这里的图片不需要是个DOM元素，只要填入图片的路径即可，书写规范如下
backgroundColor: { image: '这里书写你的图片路径' },
同样我们也可以在emphasis中书写label的配置项，给高亮选择的区块设置不同的样式，来满足不同的功能需求。
最后，给整个页面添加一个背景色，让我们的地图看起来更加的美观，整体的地图效果如下：
以上就是vue2结合echarts实现一个地图的效果的详细内容，更多关于vue2 echarts地图效果的资料请关注脚本之家其它相关文章！