以前写过 [vue项目中封装echarts的比较优雅的方式](https://juejin.cn/post/6995518429952212999)，[vue2项目中封装echarts地图比较优雅的方式](https://juejin.cn/post/7072658645296611359/)，这次对地图做一个小拓展，在[vue2项目中封装echarts地图比较优雅的方式](https://juejin.cn/post/7072658645296611359/) 的基础上进行。 ## 能学到的知识 * 1、echarts地图背景图设置，可以设置随意的地图纹理 * 2、echarts地图打点，显示数据 ### 效果图虽然不明显，但是打点是真的在闪动的 ![20220513154714402.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66ceba257c9a4596a2ced36499e2593f~tplv-k3u1fbpfcp-watermark.image?) ## 实现在 [vue2项目中封装echarts地图比较优雅的方式](https://juejin.cn/post/7072658645296611359/) 的基础上稍微做点改变。 ### echarts地图模块封装 ``` |-- src |-- components |-- chart |-- options // 存放各种图表的option |-- map // 地图option |-- index.js ``` 具体代码如下： ``` // import echarts from 'echarts' import * as echarts from 'echarts' import mapbg from '@/assets/images/map-bg.png' const getSimpleMap = (jsonMap, data, config) => { if (!echarts.getMap(jsonMap.mark)) { echarts.registerMap(jsonMap.mark, jsonMap.json) } const convertData = (data) => { console.log(data) var res = [] for (var i = 0; i < data.length; i++) { const mapData = data[i].hoverObj const center = data[i].mapProperty.center if (center && mapData) { res.push({ name: mapData.name, value: center.concat(mapData.num) }) } } return res } const defaultConfig = { tooltip: { // 窗口外框 trigger: 'item', padding: 0, borderWidth: 0, borderColor: '#FFFFFF', backgroundColor: '#FFFFFF', formatter: (params) => { const { data } = params const str = `

${data.name}

区号：

${data.hoverObj == null ? '' : data.hoverObj.adcode}

` return str } }, geo: { map: jsonMap.mark, type: 'map', layoutCenter: ['50%', '50%'], layoutSize: '150%', zoom: 0.65, roam: false, // 样式一 // itemStyle: { // normal: { // areaColor: 'rgba(13, 110, 191, 1)', // shadowColor: 'rgba(13, 110, 191, 0.5)', // shadowOffsetX: 6, // shadowOffsetY: 12 // } // } // 样式二 itemStyle: { normal: { borderColor: '#AEF3FF', borderWidth: 2, areaColor: { image: mapbg, // repeat: 'repeat' // // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat' }, shadowColor: 'rgba(13, 110, 191, 0.5)', shadowOffsetX: 6, shadowOffsetY: 12 } } }, series: [ { type: 'map', map: jsonMap.mark, // 自定义扩展图表类型 zoom: 0.65, // 缩放 animationDuration: 1200, // 点击选中后的效果 select: { label: { color: '#FFFFFF', fontSize: 12, fontWeight: 400 }, // 清除点击选中后的背景色 itemStyle: { color: null } }, // 样式一 // itemStyle: { // // 地图样式 // normal: { // borderColor: '#FFFFFF', // borderWidth: 3, // areaColor: 'rgba(201, 229, 255, 1)' // } // }, // 样式二 itemStyle: { // 地图样式 normal: { borderColor: '#AEF3FF', borderWidth: 2, areaColor: { image: mapbg, // repeat: 'repeat' // // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat' } } }, // 样式一 // label: { // show: true, // color: '#666666', // fontSize: 12, // fontWeight: 400 // }, // 样式二 label: { show: true, color: '#FFFFFF', fontSize: 12, fontWeight: 400 }, emphasis: { // 鼠标移入动态的时候显示的默认样式 label: { show: true, color: '#FFFFFF', fontSize: 15, fontWeight: 600 }, itemStyle: { areaColor: 'rgba(102, 182, 255, 0.7)', borderColor: '#FFFFFF', borderWidth: 2 } }, layoutCenter: ['50%', '50%'], layoutSize: '150%', data: data }, { type: 'effectScatter', coordinateSystem: 'geo', symbol: 'image://data:image/png;base64,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', symbolSize: [16, 16], // symbolOffset: [], label: { normal: { show: true, offset: [0, -18], textStyle: { color: '#fff', fontSize: 12, fontWeight: 500 }, formatter(value) { return '{a|' + value.data.value[2] + '}' }, rich: { a: { color: '#FFFFFF', backgroundColor: '#06406A', width: 28, height: 16, lineHeight: 16, align: 'center', borderWidth: 1, borderColor: '#79D6FE', borderRadius: 2, padding: [0, 4, 0, 4] } } } }, itemStyle: { normal: { color: 'rgba(255, 178, 76, 1)' } }, data: convertData(data), showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, zlevel: 9 } ] } const opt = Object.assign({}, defaultConfig, config) const { legend, tooltip, series, geo, grid } = opt const chartOpt = { grid, legend, tooltip, geo, series } return chartOpt } export default { getSimpleMap } ``` 新增的代码，最好在`Visual Studio Code`的`Timeline`里面对比查看，只是添加了地图纹理和地图打点。 #### 地图纹理（components--chart--options--map--index.js）实现代码在： * `geo`样式二的`itemStyle`，这里控制鼠标移入地图模块时的纹理 * `series`样式二的`itemStyle`，这里控制地图默认状态下的纹理 #### 地图打点（components--chart--options--map--index.js）实现代码在`effectScatter`模块，主要是自定义了打点的图标，还有自定义了显示信息的`label`的样式，这里可以根据设计随意实现。打点数据在`convertData`方法里面处理，可以根据接口数据看着办。 #### 数据（views--echartMapTest--index.js）因为要在地图上打点，需要坐标，加载数据的时候，需要加上地图的坐标，主要是加上这一行，`properties`包含了地图所有基本数据了 ``` mapProperty: item.properties ``` 具体如下： ``` initMap(url) { mapRequest(url).then((res) => { const mapData = res.data const jsonMap = { mark: this.mapName, json: mapData } const data = mapData.features.map((item) => { const { name, adcode } = item.properties let hoverObj = {} const objIndex = this.$utils.findElem(this.mapPopData, 'adcode', adcode) if (objIndex !== -1) { hoverObj = this.mapPopData[objIndex] } else { hoverObj = null } return { name, mapProperty: item.properties, hoverObj: hoverObj } }) this.mapOpt = this.$eChartFn.getSimpleMap(jsonMap, data) }).catch((err) => { console.log(err, '加载地图失败') }) } ``` ## 代码总览涉及的文件如下（具体参考`代码`）： ``` |-- public |-- data |-- 4401.json |-- mapdata.json |-- src |-- api |-- map.js // 获取地图geojson数据、地图弹窗接口模拟数据 |-- components |-- chart |-- index.vue // 图表单文件组件，供界面调用 |-- index.js // 实现自动化导入options里的图表option |-- options // 存放各种图表的option |-- map // 地图option |-- index.js |-- views |-- echartMapTest // 实例所在 |-- index.vue |-- index.scss |-- index.js |-- utils |---utils.js |-- main.js // 全局引入echarts图表 ``` ## 代码按`代码总览`的目录去[代码](https://github.com/liyoro/vue-skill)里找着看就行了。 ## 总结 `echarts`地图的纹理不只可以纯色或者渐变色的，还可以根据设计随意设置。项目中UI设计的很好看，这里只是随意截取了纹理的一部分做了个例子。以上，基本只要UI设计的出来，就可以实现任意纹理样式的地图。