【Echarts地图开发全流程加全套代码】

前言

本篇分享近期做的项目echarts相关地图开发的相关细节和避坑细节！！

一、地图Json文件

echarts地图采用官网的type类型map进行配置开发

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

渲染地图需要通过Json文件来渲染，那么JSON文件可以参考我的上一篇文章内容

二、地图开发过程

初始化

通过echarts配置项开发，首先我们需要一个容器来接收

    <div ref="mapRef" class="map"></div>

class类名可以设置这个容器的宽高比例等等

ref属性值用于我们初始化函数init地图，具体如下：

this.$nextTick(() => {this.chartRef = this.$echarts.init(this.$refs.mapRef)this.chartRef.setOption(option)window.addEventListener('resize', () => {this.chartRef.resize()})
}

在组件挂载时进行上面的操作，同时在组件销毁前进行相同的注销操作，特别是addEventListener

  beforeDestroy() {this.chartRef = this.$echarts.init(this.$refs.mapRef)window.removeEventListener('resize', () => {this.chartRef.resize()})this.chartRef.dispose()this.chartRef = null},

基础配置Options

在不同的业务场景会有不同的业务需求，基本的地图配置即可渲染出一个地图。相关渲染字段不明白的可以去官网配置项文档查看详细内容

const options = {
backgroundColor: 'transparent', // 背景色// 提示浮窗配置tooltip: {//提示框组件show: true,trigger: 'item',triggerOn: 'mousemove', // 触发条件appendToBody: true,position: function (pos, params, dom, rect, size) {// 固定在鼠标位置return [pos[0], pos[1]]},backgroundColor: 'transparent', // 提示框浮层背景颜色borderWidth: 0,padding: [0], // 提示框浮层内边距// 提示框浮层的文本样式textStyle: {color: '#fff'}},
geo:[{type: 'map',map: 'china',zlevel: 4,aspectScale: 0.9,zoom: 1.45,layoutCenter: ['47%', '50%'],layoutSize: '100%',roam: false,silent: true,regions: [{name: '南海诸岛',value: 0,itemStyle: {opacity: 0},label: {show: false}}],label: {show: true,formatter: (params) => {if (this.areaCode == 100000) {const LevelOne = this.mapIconData?.find((item) => item.name === params.name)if (LevelOne) {return `{area_name|${LevelOne?.name}}\n {area_bg|${LevelOne?.showValue} 亿}`} else {return ''}} else {return `{area_name|${params?.name}}`}},rich: {area_name: {color: '#FFF',fontSize: '9px',fontWeight: 'bold',fontStyle: 'italic',align: 'center',textBorderWidth: 3,textBorderColor: '#110070',lineHeight: 10},area_bg: {color: '#FFF',fontWeight: 'bold',fontStyle: 'italic',fontSize: '11px',align: 'center',width: 47,height: 20,lineHeight: 20,backgroundColor: {image: indexImg}},area_gif: {width: 50,height: 50,lineHeight: 30,align: 'center',backgroundColor: {image: arrowImg}}}},itemStyle: {normal: {// 地图样式areaColor: 'transparent', // 区域颜色borderColor: 'transparent', // 边框颜色borderWidth: 0}}},],
series:[
{type: 'map',map: 'china',roam: false,zlevel: 2,layoutSize: '100%',layoutCenter: ['47%', '50%'],animation: false,zoom: 1.45, // 缩放比aspectScale: 0.9, //长宽比showLegendSymbol: false, // 存在legend时显示itemStyle: {normal: {// 地图样式areaColor: {type: 'pattern',image: firstImg, //配置图片repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y},borderColor: '#0bc6f2',borderWidth: 1}},emphasis: {itemStyle: {areaColor: {type: 'pattern',image: activeImg,repeat: 'repeat'},borderColor: '#fff',borderWidth: 2},label: {show: false}},select: {label: {show: false},itemStyle: {areaColor: {type: 'pattern',image: activeImg,repeat: 'repeat'},borderColor: '#fff',borderWidth: 2}},data: this.mapGeoData},]}

个性化地图配置—多图层

根据我目前所需的业务需求提供相关个性化配置以供参考~

首先就是地图的多图层问题

多图层问题为了样式美观，需要在geo数组下建造多个对象，通过zlevel属性去控制层级，并且只有第一层地图有相关业务功能所以其他图层地图设置silent属性沉默属性，不响应操作

        geo: [{type: 'map',map: 'china',zlevel: 4,aspectScale: 0.9,zoom: 1.45,layoutCenter: ['47%', '50%'],layoutSize: '100%',roam: false,silent: true,regions: [{name: '南海诸岛',value: 0,itemStyle: {opacity: 0},label: {show: false}}],label: {show: true,formatter: (params) => {if (this.areaCode == 100000) {const LevelOne = this.mapIconData?.find((item) => item.name === params.name)if (LevelOne) {return `{area_name|${LevelOne?.name}}\n {area_bg|${LevelOne?.showValue} 亿}`} else {return ''}} else {return `{area_name|${params?.name}}`}},rich: {area_name: {color: '#FFF',fontSize: '9px',fontWeight: 'bold',fontStyle: 'italic',align: 'center',textBorderWidth: 3,textBorderColor: '#110070',lineHeight: 10},area_bg: {color: '#FFF',fontWeight: 'bold',fontStyle: 'italic',fontSize: '11px',align: 'center',width: 47,height: 20,lineHeight: 20,backgroundColor: {image: indexImg}},area_gif: {width: 50,height: 50,lineHeight: 30,align: 'center',backgroundColor: {image: arrowImg}}}},itemStyle: {normal: {// 地图样式areaColor: 'transparent', // 区域颜色borderColor: 'transparent', // 边框颜色borderWidth: 0}}},{type: 'map',map: 'china',roam: false,zlevel: 2,layoutSize: '100%' /* 地图的大小 */,layoutCenter: ['47%', '50%'] /* 把地图放到盒子的正中间 */,zoom: 1.45,aspectScale: 0.9,regions: [{name: '南海诸岛',value: 0,itemStyle: {opacity: 0},label: {show: false}}],label: {show: false},// 当前第一层地图的初始样式itemStyle: {normal: {// 地图样式areaColor: {type: 'pattern',image: firstImg, //配置图片repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y},borderColor: '#0bc6f2',borderWidth: 1}},emphasis: {itemStyle: {areaColor: {type: 'pattern',image: activeImg,repeat: 'repeat'},borderColor: '#fff',borderWidth: 2},label: {show: false}},select: {label: {show: false},itemStyle: {areaColor: {type: 'pattern',image: activeImg,repeat: 'repeat'},borderColor: '#fff',borderWidth: 2}}},// 不包含子区域的地图{type: 'map',map: 'china_nochild',zlevel: 3,aspectScale: 0.9,zoom: 1.45,layoutCenter: ['47%', '50%'],layoutSize: '100%',roam: false,silent: true,regions: [{name: '南海诸岛',value: 0,itemStyle: {opacity: 0},label: {show: false}}],itemStyle: {normal: {// 地图样式areaColor: 'transparent', // 区域颜色borderColor: '#c5eaff', // 边框颜色opacity: 1,shadowColor: '#fff',shadowBlur: 20,// shadowOffsetX: 0,shadowOffsetY: 3,borderWidth: 3}}},{type: 'map',map: 'china_nochild',zlevel: -1,aspectScale: 0.9,zoom: 1.45,layoutCenter: ['47%', '52%'],layoutSize: '100%',roam: false,silent: true,regions: [{name: '南海诸岛',value: 0,itemStyle: {opacity: 0},label: {show: false}}],itemStyle: {normal: {// 地图样式areaColor: {type: 'pattern',image: secondImg, //配置图片repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y},borderColor: '#35b5ff', // 边框颜色borderWidth: 1}}},{type: 'map',map: 'china_nochild',zlevel: -2,aspectScale: 0.9,zoom: 1.45,layoutCenter: ['47%', '54%'],layoutSize: '100%',roam: false,silent: true,regions: [{name: '南海诸岛',value: 0,itemStyle: {opacity: 0},label: {show: false}}],itemStyle: {normal: {// 地图样式areaColor: '#2770ca', // 区域颜色borderColor: '#35b5ff', // 边框颜色shadowColor: '#00d2ff',shadowBlur: 18,shadowOffsetY: -10,borderWidth: 1,opacity: 1}}}],

其中地图为了实现中国地图边缘线高亮并且和地图内省界线样式冲突，添加了不包含子区域的地图对象，这个需要和后端接口提供的json对象渲染或者去Datav官网下载不包含地图子区域的json文件

个性化地图配置—迁徙线

地图上添加迁徙线的相关配置在series数组中添加

        {type: 'lines',zlevel: 2,silent: true,effect: {show: true,period: 2.6, // 箭头指向速度，值越小速度越快trailLength: 0.8, // 特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'pin', // 箭头图标color: '#4ee0ff',loop: true,symbolSize: 8 // 图标大小},lineStyle: {width: 1, // 尾迹线条宽度// opacity: 0, // 尾迹线条透明度curveness: 0.4, // 尾迹线条曲直度color: 'transparent'},data: this.mapMigrationData},

其中data为迁徙线的渲染数据，其他配置或者更多请去文章开头官网寻找~

个性化地图配置—涟漪图

地图上添加涟漪图的相关配置在series数组中添加

 {type: 'effectScatter',coordinateSystem: 'geo',geoIndex: 0,zlevel: 2,silent: true,showEffectOn: 'render', // 绘制完成后显示特效hoverAnimation: true,large: true, // 是否开启大数据量优化rippleEffect: {// 涟漪特效period: 3, // 动画时间-秒数brushType: 'stroke', // 波纹绘制方式 stroke, fillscale: 2 // 波纹圆环最大限制，值越大波纹越大},symbol: 'circle',symbolSize: function (value, params) {if (params?.name === '北京市') {return 9} else {return 5}},label: {show: false},itemStyle: {normal: {show: false,color: '#4DFEEC'}},data: this.mapRipplesData}

个性化地图配置—自定义图标

地图上添加图标的相关配置在series数组中添加

        {type: 'scatter',coordinateSystem: 'geo', // 使用地理坐标系geoIndex: 0,zlevel: 2,data: [],// data: this.mapIconData, // 要有对应的经纬度才显示，先经度再维度showEffectOn: 'render', // 绘制完成后显示特效hoverAnimation: false,emphasis: {scale: false},silent: true,large: true, // 是否开启大数据量优化，在数据图形特别多而出现卡顿时候可以开启。symbol: 'image://' + require('@/assets/icons/arrow.png'),symbolSize: 50}

注意：

• 以上配置如果是单图层会比较简单，多图层情况需要注意层级zlevel的展现
• geo数组和series数组，在需要进行业务操作交互的第一层图层，需要注意其层级level、roam、zoom、aspectScale均需要设置为一致

以上就是一些配置相关问题，有关于地图的其他配置问题和疑难问题都可以留言或私信我，我会第一时间关注并回复的~

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！