vue3用ECharts实现中国地图展示城市坐标并且实现城市之间线条连接动态效果
ECharts实现中国地图展示城市坐标实例图↓↓↓实例完整代码：
<script setup lang="ts">
import * as echarts from 'echarts'
import chinaJson from '@/assets/map/json/china.json'
defineOptions({ name: 'shengCanYunyingDapingShow' })
const chartChina = ref(null)
let chartInstanceChina = null
// 注册地图
echarts.registerMap('china', chinaJson)
const cityConfig = {
北京: {
coord: ,
color: '#4FF3F5'
},
上海: {
coord: ,
color: '#4FF3F5'
},
广州: {
coord: ,
color: '#4FF3F5'
}
}
const generateLines = () => {
const cities = Object.keys(cityConfig)
const lines = [
{
fromName: '北京',
toName: '上海',
coords: [
,
],
lineStyle: {
color: '#4FF3F5',
width: 1.5,
curveness: 0.2
}
},
{
fromName: '广州',
toName: '北京',
coords: [
,
],
lineStyle: {
color: '#4FF3F5',
width: 1.5,
curveness: 0.2
}
},
{
fromName: '广州',
toName: '上海',
coords: [
,
],
lineStyle: {
color: '#4FF3F5',
width: 1.5,
curveness: 0.2
}
}
]
return lines
}
const cities = {
北京: {
coord: ,
color: '#5de0ff',
rippleColor: '#fff'
},
上海: {
coord: ,
color: '#5de0ff',
rippleColor: '#fff'
},
广州: {
coord: ,
color: '#5de0ff',
rippleColor: '#fff'
}
}
const initChartChina = () => {
chartInstanceChina = echarts.init(chartChina.value);
const option = {
geo: {
map: 'china',
roam: true,
label: {
show: false,
fontSize: 16
},
itemStyle: {
areaColor: '#5694e3',
borderColor: '#044476'
}
},
series: [
// 城市散点
{
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 12,
data: Object.entries(cityConfig).map(() => ({
name,
value: config.coord,
itemStyle: {
color: config.color
}
})),
label: {
show: true,
formatter: '{b}',
position: 'top',
fontSize: 15,
color: '#fff',
fontWeight: 'bold'
}
},
// 流动线
{
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
effect: {
show: true,
period: 4,
trailLength: 0.1,
symbol: 'diamond',
symbolSize: 4,
loop: true
},
lineStyle: {
color: '#4FF3F5',
width: 0.5,
opacity: 0.8
},
data: generateLines()
},
// 水波纹效果
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: 13,
rippleEffect: {
number: 3, // 波纹数量
period: 3, // 动画周期（秒）
scale: 6, // 最大放大比例
brushType: 'stroke' // 填充类型
},
itemStyle: {
color: 'source'
},
data: Object.entries(cities).map(() => ({
name,
value: cfg.coord,
itemStyle: {
color: cfg.rippleColor
}
}))
}
]
}
chartInstanceChina.setOption(option);
}
onMounted(async () => {
initChartChina()
window.addEventListener('resize', chartInstanceChina.resize)
window.addEventListener('resize', updateHeight)
})
onUnmounted(() => {
window.removeEventListener('resize', chartInstanceChina.resize)
chartInstanceChina.dispose()
//window.clearInterval(timerPueVavlue.value)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', updateHeight)
})
</script>
<template>
<div ref="chartChina" style="width: 100%; height: 400px;"></div>
</template>
<style scoped lang="scss"></style>
页:
[1]