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

This article mainly introduces "vue2 project how to elegantly encapsulate echarts map". In daily operation, I believe many people have doubts about how to elegantly encapsulate echarts map in vue2 project. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "vue2 project how to elegantly encapsulate echarts map". Next, please follow the editor to study!

Knowledge that can be learned

1. Echarts map module is encapsulated and reusable.

2, echarts map custom pop-up window (showing custom style, custom data, custom picture), other chart custom pop-up window can be referenced.

3. Echarts map customized pop-up window to dynamically display interface data.

4. Based on the implementation of Sister, this map module is also self-adaptive.

5. Based on vue2, vue cli3, echarts 5

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. Differences introduced by echarts versions below 5.x and above 5.x in vue import echarts from 'echarts'5.x and above import * as echarts from' echarts'2, Remember to enable run-time 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 according to the situation. For the knowledge of simulating the API request, please see here: https://juejin.cn/post/6995147964427534373/.

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 / / introduce the echarts chart here globally The study on "how to elegantly encapsulate echarts maps in the vue2 project" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.