Visualization is no longer new to us, and maps are commonly used. There are many companies whose business scope may be limited to a certain urban area, so drawing a map of China is of little significance, you only need to draw a map of a certain province or urban area, and then count the distribution of each region, the specific effect is shown in the figure:
First, the implementation principle:
Before drawing a map, we need to understand what the implementation principle is like, and then follow the specific implementation steps to achieve the effect in turn. If you don't understand the principle, copy and paste every time you finish.
1. Before you start, confirm how many layers your map needs to be divided into, and its function.
2. The effect is realized, and a three-layer map is required to achieve the effect.
- One layer is placed at the bottom layer, and the border of the map is set, corresponding to the blue map line of the outermost layer in the map.
- The second layer is placed in the middle to implement a basic map layer that displays the names of the corresponding areas.
- The three layers are placed on the outermost layer to implement data markers, corresponding to the circles and data in the map.
3. When dragging or zooming, there is a misalignment, so that it is synchronously scaled and dragged
Echarts uses the pentagram:
1. Download and introduce echarts
Echarts has been updated to version 5.0, after installation remember to check if your version is 5.0.
npm install echarts --save Download the json data for the map
You can download map data of China and various provinces, cities and districts. Free file download address:
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
Download the map data of the corresponding province or municipality.
induct:
import * as echarts from "echarts"
import chinaJSON from '../../assets/json/china.json' 2. Prepare the container
Defines the dimensions of the container in which the width and height are determined to hold the map.
<template>
<div ref="xian"></div>
</template> 3. Instantiate the echarts object
import * as echarts from 'echarts'
import xianJSON from '../../assets/json/xian.json'
const xian = ref()
var myChart = echarts.init(xian.value)
// 创建了一个 myChart 对象 If you are drawing a map, you need to introduce and register the map first:
echarts.registerMap('xa', xianJSON) 4. Specify configuration items and data
var option = {
// 存放需要绘制图片类型，以及样式设置
} 5. Set the configuration item for the echarts object
myChart.setOption(option) Third, the specific implementation steps
Step 1: Draw a basic map layer showing the various areas.
The specific code is:
<template>
<div>
<div ref="xian"
style="width: 100%;height: 800px;border: solid 1px red;background: #011868;"
></div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import xianJSON from '../../assets/json/xian.json'
const xian = ref()
onMounted(() => {
drwaMap()
})
function drwaMap() {
var myChart = echarts.init(xian.value)
echarts.registerMap('xa', xianJSON)
var option = {
geo: {
map: 'xa',
zoom: 1,
roam: true,
center: [109.00853, 34.11078],
label: {
show: true,
color: 'rgba(255,255,255,0.2)',
},
itemStyle: {
normal: {
areaColor: '#080b1a',
borderColor: 'rgba(0,116,255,0.2)',
borderWidth: 2,
borderType: 'dashed',
},
emphasis: {
areaColor: '#4f6ee9',
color: 'rgba(255,255,255,0.8)',
},
},
},
}
myChart.setOption(option)
}
</script> Step 2: Draw a map layer on the bottom layer and set the outer border of the map
Add the series attribute, draw another map layer, and use z to drop to the bottom.
series: [
//绘制一个新地图
{
type: 'map',
map: 'xa',
zoom: 1,
roam: true,
center: [109.00853, 34.11078],
z: -1, // 置于底层
itemStyle: {
normal: {
areaColor: '#2e488f',
borderColor: '#0074ff',
borderWidth: 5,//设置外层边框线粗细
},
},
},
], Step 3: Add data point markers for the distribution
Add another configuration item to the series:
{
type: 'effectScatter', // 特效散点图
coordinateSystem: 'geo',
symbol: 'circle',
// symbolSize 设置标记点的大小，
//把大小限制再 30 - 50 之间
symbolSize: function (val) {
return 30 + (val[2] / 100) * 20
},
colorBy: 'series',
//显示name并设置样式
label: {
show: true,
formatter: function (data) {
return data.value[2]
},
color: '#080b1a',
fontSize: '16',
offset: [0, 0],
align: 'center',
},
//涟漪效果设置
rippleEffect: {
color: '#32479d',
number: 3,
period: 4,
scale: 2,
brushType: 'stroke',
},
itemStyle: {
normal: {
color: '#00e6ff',
borderColor: '#32479d',
borderWidth: 2,
},
},
data: [
{ name: '蓝田', value: [109.423479, 34.181634, 50] },
{ name: '长安区', value: [108.923479, 34.110134, 30] },
{ name: '周至县', value: [108.123479, 34.010134, 2] },
{ name: '鄠邑区', value: [108.573479, 34.100134, 4] },
{ name: '临潼区', value: [109.283479, 34.510134, 3] },
{ name: '高陵区', value: [109.059479, 34.550134, 1] },
],
}, Step 4: Deal with the problem of not being synchronized when zooming in and out.
When capturing georoam events, when the upper layer of the geo is scaled and offset, the map of the lower layer is synchronized with the upper layer. To add code:
myChart.on('georoam', function (params) {
var option = myChart.getOption() //获得option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.series[0].zoom = option.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
} else {
//捕捉到拖曳时
option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
}
myChart.setOption(option) //设置option
}) 4. Complete source code
<template>
<div>
<div
ref="xian"
style="
width: 100%;
height: 800px;
border: solid 1px red;
background: #0c0b2a;
"
></div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import xianJSON from '../../assets/json/xian.json'
const xian = ref()
onMounted(() => {
drwaMap()
})
function drwaMap() {
var myChart = echarts.init(xian.value)
echarts.registerMap('xa', xianJSON)
var option = {
geo: {
map: 'xa',
zoom: 1,
roam: true,
center: [109.00853, 34.11078],
label: {
show: true,
color: 'rgba(255,255,255,0.2)',
},
itemStyle: {
normal: {
areaColor: '#080b1a',
borderColor: 'rgba(0,116,255,0.2)',
borderWidth: 2,
borderType: 'dashed',
},
emphasis: {
areaColor: '#4f6ee9',
color: 'rgba(255,255,255,0.8)',
},
},
},
series: [
//绘制一个新地图
{
type: 'map',
map: 'xa',
zoom: 1,
roam: true,
center: [109.00853, 34.11078],
z: -1,
itemStyle: {
normal: {
areaColor: '#2e488f',
borderColor: '#0074ff',
borderWidth: 5,
},
},
},
{
type: 'effectScatter', // 特效散点图
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: function (val) {
return 30 + (val[2] / 100) * 20
},
colorBy: 'series',
//显示name并设置样式
label: {
show: true,
formatter: function (data) {
return data.value[2]
},
color: '#080b1a',
fontSize: '16',
offset: [0, 0],
align: 'center',
},
//涟漪效果设置
rippleEffect: {
color: '#32479d',
number: 3,
period: 4,
scale: 2,
brushType: 'stroke',
},
itemStyle: {
normal: {
color: '#00e6ff',
borderColor: '#32479d',
borderWidth: 2,
},
},
data: [
{ name: '蓝田', value: [109.423479, 34.181634, 50] },
{ name: '长安区', value: [108.923479, 34.110134, 30] },
{ name: '周至县', value: [108.123479, 34.010134, 2] },
{ name: '鄠邑区', value: [108.573479, 34.100134, 4] },
{ name: '临潼区', value: [109.283479, 34.510134, 3] },
{ name: '高陵区', value: [109.059479, 34.550134, 1] },
],
},
],
}
myChart.setOption(option)
// 同步缩放、偏移
myChart.on('georoam', function (params) {
var option = myChart.getOption() //获得option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.series[0].zoom = option.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
} else {
//捕捉到拖曳时
option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
}
myChart.setOption(option) //设置option
})
}
</script>