实现效果
思想：主要是三个要素：1 地图样式 2散点图 3飞线 组合配置后就形成以下效果。
第一步：vue中引入Echarts
npm install vue-echarts echarts
第二步：导入代码
代码已经写好，直接引入运行就好了，关键代码有注释，可查询修改。
<template>
<!-- 飞线图组件 -->
<div class="map">
<h2>消费者扫码辐射图</h2>
<!-- 地图容器 -->
<div class="content" ref="echarts">
</div>
</div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
// 引入地图
import 'echarts/lib/chart/map'
// 引入js
import 'echarts/map/js/china.js'
export default {
components: {
},
data () {
// 这里存放数据
return {
}
},
mounted () {
this.init()
},
// 数据部分
methods: {
init () {
const myChart = echarts.init(this.$refs.echarts)
// 这个数据是散点数据，用于在地图上面展示。
const chinaGeoCoordMap = {
黑龙江: [127.9688, 45.368],
内蒙古: [110.3467, 41.4899],
吉林: [125.8154, 44.2584],
宜宾市: [104.630825, 28.760189],
辽宁: [123.1238, 42.1216],
// 河北: [114.4995, 38.1006],
// 天津: [117.4219, 39.4189],
// 山西: [112.3352, 37.9413],
// 陕西: [109.1162, 34.2004],
// 甘肃: [103.5901, 36.3043],
// 宁夏: [106.3586, 38.1775],
// 青海: [101.4038, 36.8207],
// 新疆: [87.9236, 43.5883],
// 西藏: [91.11, 29.97],
// 四川: [103.9526, 30.7617],
// 重庆: [108.384366, 30.439702],
// 山东: [117.1582, 36.8701],
// 河南: [113.4668, 34.6234],
// 江苏: [118.8062, 31.9208],
// 安徽: [117.29, 32.0581],
// 湖北: [114.3896, 30.6628],
// 浙江: [119.5313, 29.8773],
// 福建: [119.4543, 25.9222],
// 江西: [116.0046, 28.6633],
// 湖南: [113.0823, 28.2568],
安阳: [113.625891, 35.20554],
贵州: [106.6992, 26.7682],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
广西: [108.479, 23.1152],
海南: [110.3893, 19.8516],
上海: [121.4648, 31.2891]
}
// 散点
const chinaDatas = []// 临时数组
// const mapObject = {
name: '', value: null }
// 飞线
const lineObject = {
coords: [[113.4668, 34.6234]] }
const linesCoord = []
for (const key in chinaGeoCoordMap) {
const mapObject = {
name: '', value: null }
// console.log('打印一下key：' + key)
mapObject.name = key
mapObject.value = chinaGeoCoordMap[key]
// chinaDatas.push(JSON.parse(JSON.stringify(mapObject)))
chinaDatas.push(mapObject)
if (key !== '广东') {
lineObject.coords[1] = chinaGeoCoordMap[key]
linesCoord.push(JSON.parse(JSON.stringify(lineObject)))
}
}
// 配置部分
const option = {
// geo配置详解： https://echarts.baidu.com/option.html#geo
// 这里是配置最下面的地图部分
geo: {
zlevel: 0, // 数值越大越是在上面
map: 'china',
show: true,
roam: false, // 使地图不能放大拖动
top: '20px',
label: {
emphasis: {
show: false,
focus: 'self'
}
},
// 地图的背景色
itemStyle: {
normal: {
areaColor: 'rgba(0, 0, 0, 0)', // 变成透明
borderColor: '#fff',
shadowColor: '#09184F',
shadowBlur: 20
// borderWidth: 20
}
}
},
series: [
// 配置散点图的数据
{
type: 'effectScatter',
coordinateSystem: 'geo',
// 要有对应的经纬度才显示，先经度再维度
data: chinaDatas,
showEffectOn: 'render',
rippleEffect: {
scale: 4, // 波纹的最大缩放比例
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
show: true,
formatter: '{b}',
position: 'right',
fontWeight: 500,
fontSize: 14
}
},
itemStyle: {
normal: {
// color: '#00e3ff',
color: 'yellow',
shadowBlur: 5,
shadowColor: '#333'
}
},
emphasis: {
itemStyle: {
color: '#f4e925' // 高亮颜色
}
},
zlevel: 1
},
// 飞线的配置
{
type: 'lines',
coordinateSystem: 'geo',
zlevel: 1,
effect: {
// 飞机的特效配置
show: true,
period: 5,
trailLength: 0,
symbol: 'image:src/assets/airplane.svg',
color: 'yellow',
symbolSize: 8
},
lineStyle: {
normal: {
width: 1.2,
opacity: 0.6,
curveness: 0.2,
color: '#FFB800'
}
},
data: linesCoord
}
]
}
myChart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
.map{
width: 900px;
height: 900px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// background-image: url("../assets/bg.jpg");
}
h2{
left: 35%;
top: 15%;
padding-top: 40px;
color: #fff;
font-size:22px;
// top: 200px;
position: absolute;
}
.content {
width: 800px;
height: 800px;
top: 200px;
position: absolute;
// height: 100vh;
}
</style>