前言
最近幾天用echarts做中國地圖，就把以前寫的demo：在vue中實現(xiàn)中國地圖 拿來用，結(jié)果到項目里直接報錯了，后來發(fā)現(xiàn)是因為版本的問題，沒辦法只能從頭進行踩坑了。以下內(nèi)容基于vue3 和 echarts 5.32
常用的功能應該就這些，已經(jīng)非常全了，創(chuàng)作不易，覺得不錯就點個贊。
基本使用
獲取地圖數(shù)據(jù)
可以從 阿里云數(shù)據(jù)可視化平臺 下載，下面都以山東地圖為例（要下載包含子區(qū)域的）
有時候阿里云數(shù)據(jù)平臺會升級服務導致無法下載地圖數(shù)據(jù)，我從網(wǎng)上找了一份也可以用下面的下載
鏈接: 百度云地圖json下載
提取碼: abcd
demo
<template>
<div class="echart-demo" id="demo"></div>
</template>
<script setup lang="ts">
//引入echart和json數(shù)據(jù)
import * as echarts from 'echarts'
import shanDong from './shandong.json'
import { onMounted } from 'vue'
//設(shè)置echart數(shù)據(jù)
let setOption = () => {
//獲取echart對象
let dom = document.getElementById('demo')
if (dom) {
//初始化
let myEchart = echarts.init(dom)
//注冊地圖
echarts.registerMap('山東', shanDong)
let option = {
series: [{
tooltip: {
trigger: 'item',
},
name: '山東省數(shù)據(jù)',
type: 'map',
map: '山東', // 自定義擴展圖表類型
showLegendSymbol: true, // 存在legend時顯示
label: { // 文字
show: true,
color: '#fff',
fontSize: 10
},
itemStyle: { // 地圖樣式
areaColor: '#282C34', //區(qū)域顏色
borderColor: '#ffffff', //邊框顏色
borderWidth: 1
},
emphasis: { // 鼠標移入時顯示的默認樣式
itemStyle: {
areaColor: '#4adcf0',
borderColor: '#404a59',
borderWidth: 1
},
label: { // 文字
show: true,
color: '#0D5EFF',
fontSize: 12,
fontWeight: 600
},
},
data: [],
}],
}
myEchart.setOption(option);
window.addEventListener('resize', function () {
myEchart.resize();
});
}
}
onMounted(() => {
setOption()
})
</script>
<style scoped lang="scss">
.echart-demo {
width: 800px;
height: 600px;
border: 1px solid red;
}
</style>
效果圖
區(qū)域分級
就拿疫情為例，之前有段時間煙臺的疫情比較嚴重，我想讓煙臺顯示為紅色
series: [{
tooltip: {
trigger: 'item',
},
name: '山東省數(shù)據(jù)',
type: 'map',
map: '山東', // 自定義擴展圖表類型
showLegendSymbol: true, // 存在legend時顯示
label: { // 文字
show: true,
color: '#fff',
fontSize: 10
},
itemStyle: { // 地圖樣式
areaColor: '#282C34', //區(qū)域顏色
borderColor: '#ffffff', //邊框顏色
borderWidth: 1
},
emphasis: { // 鼠標移入時顯示的默認樣式
itemStyle: {
areaColor: '#4adcf0',
borderColor: '#404a59',
borderWidth: 1
},
label: { // 文字
show: true,
color: '#0D5EFF',
fontSize: 12,
fontWeight: 600
},
},
data: [
{
name: '煙臺市',
//自定義區(qū)域的顏色
itemStyle: {
areaColor: '#F50508',
borderColor: '#1773c3', // 區(qū)域邊框
shadowColor: '#1773c3', // 陰影
}
}
],
}],
}
效果：
注意點：
1、name的屬性值必須要對應，比如地圖上是煙臺市，name值要是煙臺，那么就不會生效。
2、你注冊的地圖名稱，必須與map值一致，比如
echarts.registerMap('山東', shanDong)
map: '山東', // 自定義擴展圖表類型
實際應用：
實際應用時一定會請求后臺，可以根據(jù)后臺返回的數(shù)據(jù)，來返回相應的data數(shù)據(jù)
水波
水波是比較常見的，一般是在中國地圖上某幾個市顯示水波，這里就讓省會濟南顯示水波。查詢經(jīng)緯度可以使用 百度拾取坐標系統(tǒng)
水波需要用到effectScatter，具體配置見：series-effectScatter
let option = {
geo: {
map: '山東',
show: true,
roam: true,
label: {
emphasis: {
show: false
}
},
// 地圖的背景色
itemStyle: {
normal: {
areaColor: '#091632',
borderColor: '#9adcfa',
shadowColor: '#09184F',
shadowBlur: 20
}
}
},
series: [
{
tooltip: {
trigger: 'item',
},
name: '山東省數(shù)據(jù)',
type: 'map',
map: '山東', // 自定義擴展圖表類型
showLegendSymbol: true, // 存在legend時顯示
label: { // 文字
show: true,
color: '#fff',
fontSize: 10
},
itemStyle: { // 地圖樣式
areaColor: '#282C34', //區(qū)域顏色
borderColor: '#ffffff', //邊框顏色
borderWidth: 1
},
emphasis: { // 鼠標移入時顯示的默認樣式
itemStyle: {
areaColor: '#4adcf0',
borderColor: '#404a59',
borderWidth: 1
},
label: { // 文字
show: true,
color: '#0D5EFF',
fontSize: 12,
fontWeight: 600
},
},
data: [],
zlevel: 0 //層級，層級大的會在層級小的上面
},
// 氣泡
{
type: 'effectScatter',
coordinateSystem: 'geo', //使用地理坐標系
//要有對應的經(jīng)緯度才顯示，先經(jīng)度再維度
data: [{ name: '濟南', value: [117, 36.67] }],
showEffectOn: 'render', //繪制完成后顯示特效
rippleEffect: {
scale: 4, // 波紋的最大縮放比例
brushType: 'stroke'
},
hoverAnimation: true,
label: { //圖形上的文本標簽
show: true,
formatter: '',
position: 'right',
fontWeight: 500,
fontSize: 10
},
//默認樣式
itemStyle: {
color: '#32cd32',
shadowBlur: 10,
shadowColor: '#333'
},
//鼠標移入時樣式
emphasis: {
itemStyle: {
color: '#f4e925' // 高亮顏色
}
},
zlevel: 1
}
],
}
關(guān)鍵點：
1、要顯示水波的數(shù)據(jù)格式
//要有對應的經(jīng)緯度才顯示，先經(jīng)度再維度
data: [{ name: '濟南', value: [117, 36.67] }],
2、必須添加geo，否則水波不會顯示，搞了好久才發(fā)現(xiàn)問題在哪。具體配置見：geo配置
效果：
輪播高亮
思路：當鼠標移入時，區(qū)域會高亮，輪播高亮無非就是模擬鼠標移入（當然可能不太準確），下面會給一個簡單demo，細節(jié)方面可能會有問題，大家自己改一下就好。
實現(xiàn)輪播高亮我們需要借助官方提供的：dispatchAction 、 highlight 、downplay 這3個API來實現(xiàn)
//設(shè)置輪播
myEchart.dispatchAction({
type: 'highlight',
seriesIndex: 0, //指定哪一個系列，就是series里的哪一個
dataIndex: 0 //指定高亮的下標
})
注意： 必須在設(shè)置完屬性后，再使用
接下來無法就是用個定時器，動態(tài)改變dataIndex的值就好
效果：
完整代碼：
<template>
<div class="echart-demo" id="demo"></div>
</template>
<script setup lang="ts">
//引入echart和json數(shù)據(jù)
import * as echarts from 'echarts'
import shanDong from './shandong.json'
import { onMounted } from 'vue'
//記錄echart對象
let myEchartRef: any = null
//記錄高亮的下標
let activeIndex = 0
//改變激活項
let changeIndex = () => {
//山東省有16個地級市，就隨機生成0~15之間的正整數(shù)
let index = parseInt(Math.random() * 16)
//清除之前的高亮
myEchartRef.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: activeIndex
});
//設(shè)置高亮
myEchartRef.dispatchAction({
type: 'highlight',
seriesIndex: 0, //指定哪一個系列，就是series里的哪一個
dataIndex: index //指定高亮的下標
})
//跟新標識
activeIndex = index
}
//設(shè)置echart數(shù)據(jù)
let setOption = () => {
//獲取echart對象
let dom = document.getElementById('demo')
if (dom) {
//初始化
myEchartRef = echarts.init(dom)
//注冊地圖
echarts.registerMap('山東', shanDong)
let option = {
series: [
{
tooltip: {
trigger: 'item',
},
name: '山東省數(shù)據(jù)',
type: 'map',
map: '山東', // 自定義擴展圖表類型
showLegendSymbol: true, // 存在legend時顯示
label: { // 文字
show: true,
color: '#fff',
fontSize: 10
},
itemStyle: { // 地圖樣式
areaColor: '#282C34', //區(qū)域顏色
borderColor: '#ffffff', //邊框顏色
borderWidth: 1
},
emphasis: { // 鼠標移入時顯示的默認樣式
itemStyle: {
areaColor: '#4adcf0',
borderColor: '#404a59',
borderWidth: 1
},
label: { // 文字
show: true,
color: '#0D5EFF',
fontSize: 12,
fontWeight: 600
},
},
data: [],
zlevel: 0 //層級，層級大的會在層級小的上面
},
],
}
myEchartRef.setOption(option);
window.addEventListener('resize', function () {
myEchartRef.resize();
});
}
}
onMounted(() => {
setOption()
setInterval(() => {
changeIndex()
}, 2000)
})
</script>
<style scoped lang="scss">
.echart-demo {
width: 800px;
height: 600px;
border: 1px solid red;
}
</style>
注意：
要考慮鼠標的移入移出問題：當鼠標移入時清除定時器，當前移入項設(shè)置為高亮。當鼠標移出時重新執(zhí)行定時器。這個就不處理了，有用到的話，自己處理一下。
官方的鼠標事件
給地圖添加背景圖片和圖標
效果圖
效果圖比較簡陋，大體上差不多
代碼
<template>
<div class="echart-demo" id="demo"></div>
</template>
<script setup lang="ts">
// 引入echart和json數(shù)據(jù)
import * as echarts from 'echarts';
import shanDong from './shandong.json';
import { onMounted } from 'vue';
import bg from './bg.png';
import home from './home.png';
// 設(shè)置echart數(shù)據(jù)
const setOption = () => {
// 獲取echart對象
const dom = document.getElementById('demo');
if (dom) {
// 初始化
const myEchart = echarts.init(dom);
// 注冊地圖
echarts.registerMap('山東', shanDong);
const option = {
geo: {
map: '山東',
show: true,
roam: true,
label: {
emphasis: {
show: false
}
}
},
series: [
{
tooltip: {
trigger: 'item'
},
name: '山東省數(shù)據(jù)',
type: 'map',
map: '山東', // 自定義擴展圖表類型
showLegendSymbol: true, // 存在legend時顯示
label: { // 文字
show: true,
color: 'black',
fontSize: 15
},
itemStyle: { // 地圖樣式
// areaColor: '#282C34', // 區(qū)域顏色
areaColor: {
image: bg,
repeat: 'repeat' // 是否平鋪，可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
borderColor: '#ffffff', // 邊框顏色
borderWidth: 1
},
emphasis: { // 鼠標移入時顯示的默認樣式
itemStyle: {
areaColor: '#4adcf0',
borderColor: '#404a59',
borderWidth: 1
},
label: { // 文字
show: true,
color: '#0D5EFF',
fontSize: 12,
fontWeight: 600
}
},
data: []
},
{
type: 'effectScatter',
coordinateSystem: 'geo', // 使用地理坐標系
// 要有對應的經(jīng)緯度才顯示，先經(jīng)度再維度
data: [{ name: '濟南', value: [117, 36.67] }],
showEffectOn: 'render', // 繪制完成后顯示特效
hoverAnimation: true,
label: { // 圖形上的文本標簽
show: true,
formatter: '',
position: 'right',
fontWeight: 500,
fontSize: 10,
width: 50,
height: 50,
backgroundColor: {
image: home
}
},
// 默認樣式
itemStyle: {
color: 'transparent',
shadowBlur: 10,
shadowColor: '#333'
},
zlevel: 1
}
]
};
myEchart.setOption(option);
window.addEventListener('resize', function() {
myEchart.resize();
});
}
};
onMounted(() => {
setOption();
});
</script>
<style scoped lang="scss">
.echart-demo {
width: 800px;
height: 600px;
border: 1px solid red;
}
</style>
注意點：
1、地圖的背景
在地圖中有一個itemStyle屬性，可以指定背景圖片
itemStyle: { // 地圖樣式
// areaColor: '#282C34', // 區(qū)域顏色
areaColor: {
image: bg,
repeat: 'repeat' // 是否平鋪，可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
borderColor: '#ffffff', // 邊框顏色
borderWidth: 1
},
2、圖標需要借助geo才可以實現(xiàn)
圖標圖片通過設(shè)置label的背景顏色實現(xiàn)
label: { // 圖形上的文本標簽
show: true,
formatter: '',
position: 'right',
fontWeight: 500,
fontSize: 10,
width: 50,
height: 50,
backgroundColor: {
image: home
}
},
geo默認會有一個帶顏色的圓圈，這會影響顯示，這里設(shè)置成透明色
// 默認樣式
itemStyle: {
color: 'transparent',
shadowBlur: 10,
shadowColor: '#333'
},
3d地圖
最近又研究了一下3d地圖，還是非常簡單的，與普通的平面地圖區(qū)別不大，具體配置見：GL配置
效果圖
完整代碼
<template>
<div class="echart-demo" id="demo"></div>
</template>
<script setup lang="ts">
// 引入echart和json數(shù)據(jù)
import * as echarts from 'echarts';
import 'echarts-gl';
// 地圖json數(shù)據(jù)
import shanDong from './shandong.json';
import { onMounted } from 'vue';
// 設(shè)置echart數(shù)據(jù)
const setOption = () => {
// 獲取echart對象
const dom = document.getElementById('demo');
if (dom) {
// 初始化
const myEchart = echarts.init(dom);
// 注冊地圖
echarts.registerMap('shandong', shanDong);
const option = {
title: {
text: '山東地圖',
left: 'center'
},
series: [
{
tooltip: {
trigger: 'item'
},
name: '山東省數(shù)據(jù)',
type: 'map3D',
map: 'shandong', // 自定義擴展圖表類型
showLegendSymbol: true, // 存在legend時顯示
label: { // 文字
show: true,
color: '#fff8dc',
fontSize: 10
},
itemStyle: { // 地圖樣式
color: '#47D6FC', // 區(qū)域顏色
borderColor: '#708090', // 邊框顏色
borderWidth: 1
},
emphasis: { // 鼠標移入時顯示的默認樣式
itemStyle: {
areaColor: '#0E1738',
borderColor: '#404a59',
borderWidth: 1
},
label: { // 文字
show: true,
color: '#deb887',
fontSize: 14
}
},
data: []
}]
};
myEchart.setOption(option);
window.addEventListener('resize', function() {
myEchart.resize();
});
}
};
onMounted(() => {
setOption();
});
</script>
<style scoped lang="scss">
.echart-demo {
width: 800px;
height: 600px;
border: 1px solid red;
}
</style>
飛線圖
前兩天有個同學留言問飛線圖怎么實現(xiàn)，剛好今天有空，百度查了一下資料實現(xiàn)了。
飛線圖的核心是必須要設(shè)置geo屬性，否則無法實現(xiàn)。剩下的東西，就是原有知識點的添加。氣泡和坐標部分可以不用，只是用來突出起點和終點的；起點和終點也可以都是氣泡（坐標）
效果圖
文章來源：http://www.zghlxwxcb.cn/news/detail-414332.html
完整代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-414332.html
<template>
<div class="echart-demo" id="demo"></div>
</template>
<script setup lang="ts">
// 引入echart和json數(shù)據(jù)
import * as echarts from 'echarts';
import shanDong from './shandong.js';
import { onMounted } from 'vue';
// 設(shè)置echart數(shù)據(jù)
let setOption = () => {
// 獲取echart對象
let dom = document.getElementById('demo');
if (dom) {
// 初始化
let myEchart = echarts.init(dom);
// 注冊地圖
echarts.registerMap('山東', shanDong);
let option = {
geo: {
map: '山東',
show: true,
roam: true,
label: {
emphasis: {
show: false
}
},
// 地圖的背景色
itemStyle: {
normal: {
areaColor: '#091632',
borderColor: '#9adcfa',
shadowColor: '#09184F',
shadowBlur: 20
}
}
},
series: [
// 地圖信息
{
tooltip: {
trigger: 'item'
},
name: '山東省數(shù)據(jù)',
type: 'map',
map: '山東', // 自定義擴展圖表類型
showLegendSymbol: true, // 存在legend時顯示
label: { // 文字
show: true,
color: '#fff',
fontSize: 10
},
itemStyle: { // 地圖樣式
areaColor: '#282C34', // 區(qū)域顏色
borderColor: '#ffffff', // 邊框顏色
borderWidth: 1
},
emphasis: { // 鼠標移入時顯示的默認樣式
itemStyle: {
areaColor: '#4adcf0',
borderColor: '#404a59',
borderWidth: 1
},
label: { // 文字
show: true,
color: '#0D5EFF',
fontSize: 12,
fontWeight: 600
}
},
data: []
},
// 飛線
{
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 4, // 箭頭指向速度，值越小速度越快
trailLength: 0.1, // 特效尾跡長度[0,1]值越大，尾跡越長重
symbol: 'arrow', // 箭頭圖標
symbolSize: 10 // 圖標大小
},
lineStyle: {
normal: {
width: 1, // 尾跡線條寬度
opacity: 1, // 尾跡線條透明度
curveness: 0.3 // 尾跡線條曲直度
}
},
data: [
{
fromName: '濟南',
toName: '煙臺',
coords: [
[117, 36.67], // 起始
[121.4, 37.54] // 結(jié)束
]
}
]
},
// 氣泡，用于突出目的地
{
type: 'effectScatter',
coordinateSystem: 'geo', // 使用地理坐標系
// 要有對應的經(jīng)緯度才顯示，先經(jīng)度再維度
data: [
{ name: '煙臺市', value: [121.4, 37.54] }
],
showEffectOn: 'render', // 繪制完成后顯示特效
rippleEffect: {
scale: 4, // 波紋的最大縮放比例
brushType: 'stroke'
},
hoverAnimation: true,
label: { // 圖形上的文本標簽
show: true,
formatter: '',
position: 'right',
fontWeight: 500,
fontSize: 10
},
// 默認樣式
itemStyle: {
color: '#32cd32',
shadowBlur: 10,
shadowColor: '#333'
},
// 鼠標移入時樣式
emphasis: {
itemStyle: {
color: '#f4e925' // 高亮顏色
}
},
zlevel: 1
},
// 坐標用于突出起點
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 3,
brushType: 'stroke',
scale: 3
},
symbol: 'pin',
symbolSize: 50,
data: [
{
name: '濟南市',
value: [117, 36.67]
}
]
}
]
};
myEchart.setOption(option);
window.addEventListener('resize', function() {
myEchart.resize();
});
}
};
onMounted(() => {
setOption();
});
</script>
<style scoped lang="scss">
.echart-demo {
width: 800px;
height: 600px;
border: 1px solid red;
}
</style>
到了這里，關(guān)于echarts地圖的常見用法：基本使用、區(qū)域顏色分級、水波動畫、區(qū)域輪播、給地圖添加背景圖片和圖標、3d地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
