Shulou(Shulou.com)06/01 Report--

This article mainly introduces the vue2 project how to encapsulate echarts map related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe you read this vue2 project how to encapsulate echarts map article will have a harvest, let's take a look at it.

Effect picture

First of all, let's give an effect picture to illustrate the effect achieved below.

1. Regional map of Guangzhou

2. Customize the pop-up window, showing the name and area code of the selected area, and adding a small picture to the pop-up window.

3. Basically, pictures and videos can be displayed on custom pop-up windows. Here, only custom pop-up windows and pictures are shown. The video is the same. If you are interested, just try it yourself.

4. Pop-up window data is taken from the analog interface.

Note 1. The differences between echarts versions below 5.x and those above 5.x in vue

Versions below 5.x

Import echarts from 'echarts'

Version 5.x or above

Import * as echarts from 'echarts'2, remember to enable runtime compilation in vue.config.js runtimeCompiler: true for data preparation |-- public |-- data |-- 4401.json |-- mapdata.json |-- images |-- map-ic.png

1. 4401.json is the geojson data of Guangzhou area, which is used to display the regional map of Guangzhou to echarts.

2. Mapdata.json is the fake data requested by the simulation interface. You can customize it casually. After obtaining the data, you can download it to the encapsulated echarts map module depending on the situation. The knowledge of the simulation interface request can be found here: the vue local simulation server requests mock data.

3. Pictures used in custom pop-up windows of map-ic.png Maps

Echarts map module encapsulates |-- src |-- components |-- chart |-- options / / option for storing various charts |-- map / / Map option |-- index.js

The specific code is as follows:

Import * as echarts from 'echarts'const getSimpleMap = (jsonMap, data, config) = > {if (! echarts.getMap (jsonMap.mark)) {echarts.registerMap (jsonMap.mark, jsonMap.json)} const defaultConfig = {tooltip: {/ / window frame trigger:' item', padding: 0, borderWidth: 0, borderColor:'# FFFFFF', backgroundColor:'# FFFFFF' Formatter: (params) = > {const {data} = params const str = `

${data.name} area code: ${data.hoverObj = = null?': data.hoverObj.adcode} `return str}} Geo: {map: jsonMap.mark, type: 'map', layoutCenter: [' 50%'], layoutSize: '150%', zoom: 0.65, roam: false, itemStyle: {normal: {areaColor: 'rgba (201,229,255,1)', shadowColor: 'rgba (142,201,255,1)' ShadowOffsetX:-5, shadowOffsetY: 12}}, series: [{type: 'map', map: jsonMap.mark, / / Custom extended chart type zoom: 0.65, / / scale animationDuration: 1200 ItemStyle: {/ / Map style normal: {borderColor:'# FFFFFF', borderWidth: 3, areaColor: 'rgba (201,229,255,1)}}, label: {show: true, color:' # 666666, fontSize: 12 FontWeight: 400}, emphasis: {/ / default style label: {show: true, color:'# FFFFFF', fontSize: 15, fontWeight: 600}, itemStyle: {areaColor: 'rgba (102,182,255) 1)', borderColor:'# FFFFFF', borderWidth: 2}}, layoutCenter: ['50% FFFFFF', borderWidth,'50%'], layoutSize: '150% data: data}]} 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}

The custom pop-up window is mainly implemented in the formatter of tooltip. Customize the html pop-up window and display the data to be displayed in params to the corresponding place on OK.

Personally, I like to directly implement the pop-up window style designed by pure html, and then copy it directly into formatter. Every time you encounter a different design, just modify the html in formatter and match the data to be displayed. It can be further encapsulated here, and those who are interested can try.

Page call

1. Chart-option= "mapOpt" is a parameter passed to the encapsulated echarts map module. The interface data needs to be processed. For more information, please see the next section.

2. @ click= "handleMapClick" here is the data of the corresponding area when you click on the map, which is used for further operations, such as map drilldown.

Interface data processing 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 = findElem (this.mapPopData, 'adcode') Adcode) if (objIndex! = =-1) {hoverObj = this.mapPopData [objIndex]} else {hoverObj = null} return {name, hoverObj: hoverObj}}) this.mapOpt = this.$eChartFn.getSimpleMap (jsonMap, data)}) .catch ((err) = > {console.log (err) 'failed to load map')})}

Here, the map geojson data and the interface return data are matched to achieve the effect that the pop-up window data is the corresponding area data.

Map geojson data must have an adcode field, so it is best to add this field to the interface data mapPopData to match. The hoverObj in the above code matches the data of each region, and finally forms an array data, which passes parameters to the encapsulated echarts module through the following code

This.mapOpt = this.$eChartFn.getSimpleMap (jsonMap, data)

For specific code, please refer to the index.js file in the echartMapTest folder.

Code overview

The files involved are as follows (see code for details):

| |-- public |-- data |-- 4401.json |-- mapdata.json |-- images |-- map-ic.png |-- src |-- api |-- map.js / / obtain map geojson data, Map pop-up window interface simulation data |-- components |-- chart |-- index.vue / / Chart single file component Can be called by the interface |-- index.js / / automatically import the chart option in options |-- options / / the option where various charts are stored |-- map / / Map option |-- index.js |-- views |-- echartMapTest / / where the instance is located |- -index.vue |-- index.scss |-- index.js |-- utils |-- utils.js |-- main.js / / globally introduce echarts charts. This is the end of the article on "how to encapsulate echarts maps in a vue2 project". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to encapsulate echarts maps in the vue2 project". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.