I have written before about the more elegant way to encapsulate Echarts in VUE projects. In the large screen visualization, in addition to data charts, it is also very common to display provinces and cities map areas. This is a sister article.
When selecting a region on the regional map, you need to pop up to show the data. The styles are all kinds of data, text and text mix and match, and video…… In addition to encapsulating the Echarts region map module, it also introduces the implementation of custom pop-ups and the way of dynamic loading interface data
Knowledge that can be learned
- 1, Echarts map module packaging, reusable
- 2, Echarts map custom pop-ups (display custom styles, custom data, custom pictures), other chart custom pop-ups can refer to.
- 3. Echarts map custom popup dynamically displays interface data
- 4. The map module is also adaptive based on the implementation of the sister
- 5, based on
vue2、vue cli3,echarts 5
rendering
Let’s start with an illustration to illustrate the effect.
- 1. Regional map of Guangzhou
- 2, custom popup window, show the name of the selected region, area code, popup window added a small picture
- 3. Basically, pictures and videos can be displayed on the custom popover. Here I only show the way of adding pictures to the custom popover
- 4. Popover data is taken from the analog interface
Pay attention to
1. Echarts in VUE5.xThe following versions and5.xThe differences introduced in the previous version
5.xThe following version
import echarts from 'echarts'
Copy the code5.xThe above version
import * as echarts from 'echarts'
Copy the code2, Remember invue.config.jsTo enable runtime compilation
runtimeCompiler: true
Copy the codeimplementation
Data preparation
|-- public
|-- data
|-- 4401.json
|-- mapdata.json
|-- images
|-- map-ic.png
Copy the code- 1.
4401.jsonIt’s for guangzhou areageojsonData, used to giveechartsShows a regional map of Guangzhou - 2,
mapdata.jsonAfter obtaining the data, it will be transmitted to the encapsulated ECharts map module according to the situation. The knowledge of simulating the interface request can be referred to here:The VUE local mock server requests mock data - 3,
map-ic.pngMap custom popup used in the image
Echarts map module package
| - SRC | - components | - chart | - options / / for all sorts of chart option | - map / / map option | -- index. JsCopy the codeThe 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 = `<div style="width:300px; height: 98px; Box-shadow: 0px 4px 20px 0px Rgba (0, 0, 0, 0.8); color: #fff; text-align:left; border-radius: 6px;" > <div style="background-color: rgba(102, 182, 255, 1); height: 44px; line-height: 44px; font-size:14px; font-weight:400; border-top-left-radius: 6px; border-top-right-radius: 6px; display: flex; align-items: center;" > <img style="width: 13px; height:16px; margin-left: 24px; margin-right: 3px;" src="images/map-ic.png">${data.name} </div> <div style="width: 100%; height:54px; display: flex; flex-wrap: wrap;" > <div style="display: flex; justify-content: space-between; width: 100%; padding-left:15px; padding-right: 15px;" > <div style="display:flex; align-items:center; width:132px;" > <div style="font-size: 12px; color: #555555; margin-right:10px;" "> <div style="font-size: 14px; color: #333333;" >${data.hoverObj == null ? '' : data.hoverObj.adcode}</div> </div> </div> </div> </div>` return str } }, geo: { map: jsonMap.mark, type: 'Map ', layoutCenter: ['50%', '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, // zoom animationDuration: 1200, itemStyle: {// map style normal: {borderColor: '#FFFFFF', borderWidth: 3, areaColor: 'RGBA (201, 229, 255, 1)'}}, label: {show: // Show: true, color: '#666666', fontSize: 12, fontWeight: 400}, emphasis: {// Show: true, color: '#666666', fontSize: 12, fontWeight: 400} '#FFFFFF', fontSize: 15, fontWeight: 600 }, itemStyle: { areaColor: 'rgba(102, 182, 255, 1)', borderColor: '#FFFFFF', borderWidth: 2 } }, layoutCenter: ['50%', '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 }Copy the codeCustom pop-ups are implemented in the Formatter of the tooltip. You can customize the HTML pop-ups to display the data in the params.
I prefer to implement the popover styles given by the design directly in plain HTML and then copy them directly into formatter. Each time you encounter a different design, just modify the HTML in the Formatter and match the data to be displayed. Here can be further encapsulated, interested can try.
Page calls
<chart-view
class="map-view"
:chart-option="mapOpt"
height="100%"
@click="handleMapClick" />
Copy the code- 1.
:chart-option="mapOpt"This is for encapsulationechartsThe interface data of the map module will be processed. See the next section for details - 2,
@click="handleMapClick"Here is the data of the corresponding area when the map is clicked, which is used for the next operation, such as map drilling
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 ')})}Copy the codeHere, map GEOJSON data and interface returned data are matched to achieve the effect that popover data is the corresponding region data.
Map geoJSON data must have adcode field, so the interface data mapPopData should also add this field, used to match. The hoverObj in the above code is the matched data for each region, resulting in the array data, which is passed to the encapsulated Echarts module with the following code
this.mapOpt = this.$eChartFn.getSimpleMap(jsonMap, data)
Copy the codeSee the index.js file in the echartMapTest folder for the code
Code overview
The files involved are as follows (specific reference code) :
|-- public |-- data |-- 4401.json |-- mapdata.json |-- images |-- map-ic.png |-- src |-- api |-- map.js // Obtain geojson map data, map the pop-up interface analog data | - components | - chart | -- index. Vue / / component diagram form file, For interface call | -- index. Js / / automated import chart option in the options | - options / / for all sorts of chart option | - map / / map option | -- index. Js | - views | | - echartMapTest / / instance is - index. The vue | -- index. SCSS | -- index. Js | - utils | - utils. Js. | - the main js / / global introduced echarts chartsCopy the codecode
Just look for the code in the code Overview directory.
conclusion
Above, is the echarts map module package, and the implementation of a custom popover. Use and reuse are more convenient.
Recently found that www.makeapie.com stopped serving, very good things to use, thank you for so many years of dedication.
If there is demand, it can be transferred to PPChart, which is a substitute
The resources
- 1. Map selector
- 2, Echarts
- The vUE local mock server requests mock data
- 3. A more elegant way to encapsulate Echarts in vUE projects
- 4, simple skills to separate VUE file CSS, JS code, easy to read the development