Echarts - 地图重要配置
地图数据设置
NOTE
设置visualMap的seriesIndex: [1],series 的第一项是散点，第二项是地图
隐藏省市名称
> `normal`是正常情况下，`emphasis`是鼠标悬浮的时候
js
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},设置地图颜色和悬浮颜色
js
itemStyle: {
normal: {
areaColor: '#023677',
borderColor: '#1180c7'
},
emphasis: {
areaColor: '#4499d0'
}
}关闭平移和缩放
js
roam: false, // 关闭平移和缩放左下角数据筛选视觉映射
js
visualMap: {
show: true,
min: 0,
max: 200,
left: '10%',
top: 'bottom',
calculable: true, // 是否开启拖动
seriesIndex: [1], // 系列索引
inRange: {
color: ['#04387b', '#467bc0'] // 颜色
}
},设置 tooltip 自定义格式化
js
tooltip: {
padding: 0, // 去除原有内边距
enterable: true, // 是否开启鼠标悬浮
transitionDuration: 0.5, // 动画时间
formatter: (params) => {
params.name | params.data.name // 数据名称 (北京)
params.value | params.data.value // 数据值
// 可以给data设置自定义的数据，通过params.data.XXX获取
params.marker // tooltip的点
params.dataIndex //对应series的下标顺序
return // html标签或者文本
}
}
代码
js
formatter: function (params) {
console.log(params, 'params')
var tipHtml = ''
tipHtml =
'<div style="width:280px;height:220px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
'<div style="height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
'</i>' +
'<span style="margin-left:10px;color:#fff;font-size:16px;">' +
params.name +
'</span>' +
'</div>' +
'<div style="padding:20px">' +
'<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' +
'单位总数：' +
'<span style="color:#11ee7d;margin:0 6px;">' +
99 +
'</span>' +
'个' +
'</p>' +
'<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' +
'总人数：' +
'<span style="color:#f48225;margin:0 6px;">' +
99 +
'</span>' +
'个' +
'</p>' +
'<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' +
'总人数：' +
'<span style="color:#f4e925;margin:0 6px;">' +
99 +
'</span>' +
'个' +
'</p>' +
'<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' +
'总人数：' +
'<span style="color:#25f4f2;margin:0 6px;">' +
99 +
'</span>' +
'个' +
'</p>' +
'</div>' +
'</div>'
// 判断data中是否包含params.name
return data.some(item => params.name.includes(item.name)) ? tipHtml : ''
}处理散点图经纬度
js
// 数据
let data = [
{ name: '北京', value: 199 },
{ name: '河北', value: 102 }
]
// 获取地图数据
// properties里的name是省市名称 cp是经纬度
let mapFeatures = echarts.getMap(mapName).geoJson.features
// 地区经纬度映射
let geoCoordMap = {} // {北京: [116.405285, 39.904989]}
mapFeatures.forEach(function (v) {
// 地区名称
let name = v.properties.name
// 地区经纬度
geoCoordMap[name] = v.properties.cp
})IMPORTANT
旧版中国地图名称使用山东,新疆。不带省市，新版地图要使用全称山东省，新疆维吾尔自治区，旧版地图的地区经纬度使用item.properties.cp，新版地图经纬度使用item.properties.center。
geoCoordMap数据格式：{js icon}{ 北京: [116.405285, 39.904989] }
js
// 将数据转换为散点图所需格式 {name:'北京',value:[116.405285, 39.904989, 199]}
let convertData = function (data) {
let res = []
data.forEach(item => {
let geoCoord = geoCoordMap[item.name]
if (geoCoord) {
res.push({
name: item.name + '分公司',
value: geoCoord.concat(item.value)
})
}
})
return res
}执行{js icon}convertData(data)返回的数据格式：{js icon}{name:'北京',value:[116.405285, 39.904989, 199]}
series里散点配置
js
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo', // 坐标系使用地理坐标系
data: convertData(data), //使用convertData处理的数据
// 根据value值大小决定点的大小
// symbolSize: function (val) {
// return val[2] / 10
// },
label: {
normal: {
formatter: '{b}', // 显示名称
position: 'right', // 位置
show: true // 显示
},
// 鼠标悬浮时显示
emphasis: {
show: true
}
},
// 点样式
itemStyle: {
normal: {
color: '#fff'
}
}
},涟漪动画散点图effectScatter
配置项
js
// 涟漪效果
rippleEffect: {
period: 2, // 动画时间
scale: 4, // 缩放
color: '#fff', // 颜色
brushType: 'stroke', // 描边 stroke 和 fill
},
完整代码示例
vue
<template>
<v-chart ref="mapChart" :option="option" class="chart" @mouseover="handleMouseover" />
</template>
<script setup>
import { ref, provide } from 'vue'
import vChart, { THEME_KEY } from 'vue-echarts'
import china from './assets/china.json'
import * as echarts from 'echarts'
provide(THEME_KEY, 'light')
const mapChart = ref(null)
echarts.registerMap('china', china)
var mapName = 'china'
var data = [
{ name: '北京市', value: 199 },
{ name: '河北省', value: 102 },
{ name: '内蒙古自治区', value: 47 },
{ name: '辽宁省', value: 67 },
{ name: '四川省', value: 125 },
{ name: '贵州省', value: 62 },
{ name: '云南省', value: 83 },
{ name: '西藏自治区', value: 9 },
{ name: '青海省', value: 10 },
{ name: '新疆维吾尔自治区', value: 180 },
{ name: '广东省', value: 123 },
{ name: '广西壮族自治区', value: 59 }
]
const handleMouseover = params => {
if (!params.data?.value) {
mapChart.value.dispatchAction({
type: 'downplay'
})
}
}
// 获取地图数据
// properties里的name是省市名称 cp是经纬度
var mapFeatures = echarts.getMap(mapName).geoJson.features
// 地区经纬度映射
var geoCoordMap = {}
mapFeatures.forEach(function (v) {
// 地区名称
var name = v.properties.name
// 地区经纬度
geoCoordMap[name] = v.properties.center
})
// 将数据转换为散点图所需格式
var convertData = function (data) {
var res = []
data.forEach(item => {
var geoCoord = geoCoordMap[item.name]
if (geoCoord) {
res.push({
name: item.name + '分公司',
value: geoCoord.concat(item.value)
})
}
})
return res
}
const option = ref({
tooltip: {
padding: 0, // 去除原有内边距
enterable: true, // 是否开启鼠标悬浮
transitionDuration: 0.5, // 动画时间
formatter: function (params) {
// console.log(params, 'params')
var tipHtml = ''
tipHtml =
'<div style="width:280px;height:220px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +
'<div style="height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +
'</i>' +
'<span style="margin-left:10px;color:#fff;font-size:16px;">' +
params.name +
'</span>' +
'</div>' +
'<div style="padding:20px">' +
'<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' +
'单位总数：' +
'<span style="color:#11ee7d;margin:0 6px;">' +
99 +
'</span>' +
'个' +
'</p>' +
'<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' +
'总人数：' +
'<span style="color:#f48225;margin:0 6px;">' +
99 +
'</span>' +
'个' +
'</p>' +
'<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' +
'总人数：' +
'<span style="color:#f4e925;margin:0 6px;">' +
99 +
'</span>' +
'个' +
'</p>' +
'<p style="color:#fff;font-size:12px;">' +
'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +
'</i>' +
'总人数：' +
'<span style="color:#25f4f2;margin:0 6px;">' +
99 +
'</span>' +
'个' +
'</p>' +
'</div>' +
'</div>'
// 判断data中是否包含params.name
return data.some(item => params.name.includes(item.name)) ? tipHtml : ''
}
},
visualMap: {
show: false,
min: 0,
// max: 200,
// calculable: true,
seriesIndex: [1],
inRange: {
color: ['#04387b', '#467bc0'] // 蓝绿
}
},
geo: {
show: true,
map: 'china',
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
roam: false,
itemStyle: {
areaColor: '#023677',
borderColor: '#1180c7'
},
emphasis: {
itemStyle: {
areaColor: '#4499d0'
}
}
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo', // 坐标系使用地理坐标系
data: convertData(data),
// 根据value值大小决定点的大小
symbolSize: function (val) {
return val[2] / 10
},
label: {
formatter: '{b}', // 显示名称
position: 'right', // 位置
show: true // 显示
// 鼠标悬浮时显示
},
emphasis: {
label: {
show: true
}
},
// 点样式
itemStyle: {
color: '#fff'
},
zlevel: 2
},
{
type: 'map',
map: 'china',
geoIndex: 0,
selectedMode: false, // 是否开启选中模式
data: data
},
{
name: '高亮点',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(
data
.sort(function (a, b) {
return b.value - a.value
})
.slice(0, 10)
),
symbolSize: function (val) {
return val[2] / 10
},
showEffectOn: 'render', // render 和 emphasis emphasis是悬浮时显示
// 涟漪效果
rippleEffect: {
period: 2, // 动画时间
scale: 4, // 缩放
color: '#fff', // 颜色
brushType: 'stroke' // 描边 stroke 和 fill
},
// hoverAnimation: true, // 是否开启悬浮动画
label: {
formatter: '{b}',
position: 'left',
show: false
},
itemStyle: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow'
},
zlevel: 3
}
]
})
</script>
<style lang="scss" scoped>
.chart {
height: 600px;
}
</style>