废话不多说直接上代码
一、index.vue
<template>
<div class="main">
<div class="home-box">
<mapEchart />
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import mapEchart from '@/components/mapEchart/index.vue'
</script>
<style lang="scss" scoped>
.main {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
.home-box {
width: 45%;
height: 60%;
background-color: red;
}
}
</style>
二、mapEchart.vue
注意: json数据可以在这获取DataV.GeoAtlas地理小工具系列 (aliyun.com)
<template>
<div id="myChart" ref="chartRef" style="width: 100%; height: 100%"></div>
<div class="btns">
<button @click="selectArea('南康区')">南康区</button>
<button @click="selectArea('兴国县')">兴国县</button>
<button @click="selectArea('瑞金市')">瑞金市</button>
</div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'
// import nbData from './nb'
import gzData from './gz'
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
const chartRef = ref()
let internalInstance: any = getCurrentInstance()
let echarts = internalInstance.appContext.config.globalProperties.$echarts
let selectedArea = ref<any>(null)
let myChart = ref<any>(null)
const setEcharts = () => {
const dom = document.getElementById('myChart')
myChart.value = echarts.init(dom) // 初始化echarts实例
// debugger
echarts.registerMap('赣州', getData())
let data = getData().features.map((item) => {
return {
name: item.properties.name
}
})
// const points = [
// [121.26, 30.2],
// [121.86, 29.83],
// [121.53, 29.87],
// [121.68, 29.45]
// ]
const points = [
[114.78, 25.67],
[114.28, 25.67],
[114.36, 25.39],
[115.31, 26.36]
]
let option = {
backgroundColor: '#030528',
geo: [
{
map: '赣州',
aspectScale: 1,
zoom: 0.55,
layoutCenter: ['50%', '50%'],
layoutSize: '180%',
show: true,
roam: false,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: '#c0f3fb',
borderWidth: 1,
shadowColor: '#8cd3ef',
shadowOffsetY: 10,
shadowBlur: 120,
areaColor: 'transparent'
}
}
},
// 重影
{
type: 'map',
map: '赣州',
zlevel: -1,
aspectScale: 1,
zoom: 0.55,
layoutCenter: ['50%', '51%'],
layoutSize: '180%',
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor:"rgba(17, 149, 216,0.6)",
borderColor: 'rgba(58,149,253,0.8)',
shadowColor: 'rgba(172, 122, 255,0.5)',
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: 'rgba(5,21,35,0.1)'
}
}
},
{
type: 'map',
map: '赣州',
zlevel: -2,
aspectScale: 1,
zoom: 0.55,
layoutCenter: ['50%', '52%'],
layoutSize: '180%',
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(57, 132, 188,0.4)",
borderColor: 'rgba(58,149,253,0.6)',
shadowColor: 'rgba(65, 214, 255,1)',
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: 'transpercent'
}
}
},
{
type: 'map',
map: '赣州',
zlevel: -3,
aspectScale: 1,
zoom: 0.55,
layoutCenter: ['50%', '53%'],
layoutSize: '180%',
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: 'rgba(58,149,253,0.4)',
shadowColor: 'rgba(58,149,253,1)',
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: 'transpercent'
}
}
},
{
type: 'map',
map: '赣州',
zlevel: -4,
aspectScale: 1,
zoom: 0.55,
layoutCenter: ['50%', '54%'],
layoutSize: '180%',
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 5,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: 'rgba(5,9,57,0.8)',
shadowColor: 'rgba(29, 111, 165,0.8)',
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: 'rgba(5,21,35,0.1)'
}
}
}
],
series: [
{
name: '丹东市数据',
type: 'map',
map: '赣州', // 自定义扩展图表类型
aspectScale: 1,
zoom: 0.55, // 缩放
showLegendSymbol: true,
label: {
normal: {
show: true,
textStyle: { color: '#fff', fontSize: '120%' }
},
emphasis: {
// show: false,
}
},
itemStyle: {
normal: {
areaColor: {
type: 'linear',
x: 1200,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
}
],
global: true // 缺省为 false
},
borderColor: '#fff',
borderWidth: 0.2
},
emphasis: {
show: false,
color: '#fff',
areaColor: 'rgba(0,254,233,0.6)'
}
},
layoutCenter: ['50%', '50%'],
layoutSize: '180%',
markPoint: {
symbol: 'none'
},
data: data
},
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度,值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 6 //图标大小
},
lineStyle: {
normal: {
color: 'rgba(255, 200, 113, 1)',
width: 2, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
shadowColor: 'rgba(255, 200, 113, 0.2)',
shadowBlur: 10
}
},
data: [
[points[0], points[1]],
[points[0], points[2]],
[points[0], points[3]]
]
},
{
// 动效散点公共配置项
silent: true, // 暂不支持鼠标交互
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
//涟漪特效
period: 4, //动画时间,值越小速度越快
// brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 5 //波纹圆环最大限制,值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function (params) {
//圆环显示文字
return params.data.name
},
fontSize: 13,
color: 'white'
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: 10,
itemStyle: {
normal: {
show: false,
borderWidth: 1,
color: 'rgba(255, 86, 11, 1)'
}
},
data: [
{
name: 'A',
value: [...points[0], 323]
},
{
name: 'B',
value: [...points[1], 323]
},
{
name: 'C',
value: [...points[2], 323]
},
{
name: 'C',
value: [...points[3], 323]
}
]
}
]
}
myChart.value.setOption(option)
myChart.value.on('click', (params) => {
console.log(params)
// debugger
})
}
function getData() {
let res = gzData
return res
}
//点击切换
const selectArea = (areaName: any) => {
// 取消之前选中区域的高亮
if (selectedArea.value) {
myChart.value.dispatchAction({
type: 'downplay',
seriesIndex: 0,
name: selectedArea.value
})
// debugger
}
// 执行地图高亮操作
myChart.value.dispatchAction({
type: 'highlight',
seriesIndex: 0, // 如果有多个系列,需要指定系列的索引
name: areaName
})
selectedArea.value = areaName
}
onMounted(() => {
setEcharts()
})
</script>
<style lang="scss" scoped></style>