243 lines
6.0 KiB
Plaintext
243 lines
6.0 KiB
Plaintext
<template>
|
|
<div ref="mapbox" class="map-wrapper" />
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import 'modules/echarts/map/js/world.js'
|
|
import { fontSize } from 'utils/fontsize'
|
|
export default {
|
|
props: {
|
|
area: { type: String, default: '' },
|
|
width: { type: String, default: '' },
|
|
heigt: { type: String, default: '' }
|
|
},
|
|
watch: {
|
|
area() {
|
|
const that = this
|
|
this.$nextTick(function() {
|
|
that.myChart.resize()
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initMap()
|
|
},
|
|
methods: {
|
|
data() {
|
|
return {
|
|
myChart: ''
|
|
}
|
|
},
|
|
initMap() {
|
|
var geoCoordMap = {
|
|
Shanghai: [121.4648, 31.2891],
|
|
// Wuhan: [114.31, 30.52],
|
|
Boston: [-71.050423, 42.382983]
|
|
}
|
|
var BJData = [
|
|
[
|
|
{
|
|
name: 'Shanghai',
|
|
selected: true,
|
|
color: '#fce630'
|
|
},
|
|
{
|
|
name: 'Boston'
|
|
}
|
|
],
|
|
[
|
|
{
|
|
name: 'Boston',
|
|
selected: true,
|
|
color: '#fce630'
|
|
},
|
|
{
|
|
name: 'Shanghai'
|
|
}
|
|
]
|
|
]
|
|
var convertData = function(data) {
|
|
var res = []
|
|
for (var i = 0; i < data.length; i++) {
|
|
var dataItem = data[i]
|
|
var fromCoord = geoCoordMap[dataItem[0].name]
|
|
var toCoord = geoCoordMap[dataItem[1].name]
|
|
if (fromCoord && toCoord) {
|
|
res.push([
|
|
{
|
|
coord: fromCoord,
|
|
value: dataItem[0].value
|
|
},
|
|
{
|
|
coord: toCoord
|
|
}
|
|
])
|
|
}
|
|
}
|
|
return res
|
|
}
|
|
var series = []
|
|
;[['Shanghai', BJData]].forEach(function(item, i) {
|
|
series.push(
|
|
{
|
|
type: 'lines',
|
|
zlevel: 1,
|
|
effect: {
|
|
show: true,
|
|
color: '#fff',
|
|
period: 6,
|
|
trailLength: 0.7,
|
|
symbolSize: fontSize(0.05)
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
width: fontSize(0.03),
|
|
color: '#9ae5fc',
|
|
opacity: 0.02,
|
|
curveness: -0.2
|
|
}
|
|
},
|
|
|
|
data: convertData(item[1])
|
|
},
|
|
|
|
{
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
zlevel: 3,
|
|
rippleEffect: {
|
|
// 涟漪特效
|
|
period: 5, // 动画时间，值越小速度越快
|
|
brushType: 'fill', // 波纹绘制方式 stroke, fill
|
|
scale: 5 // 波纹圆环最大限制，值越大波纹越大
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
color: '#fce630',
|
|
position: 'right', // 显示位置
|
|
offset: [10, 0], // 偏移设置
|
|
fontSize: fontSize(0.16),
|
|
formatter: '{b}' // 圆环显示文字
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
symbol: 'circle',
|
|
symbolSize: function(val) {
|
|
return fontSize(0.08) // 圆环大小
|
|
},
|
|
|
|
data: item[1].map(function(dataItem) {
|
|
return {
|
|
name: dataItem[0].name,
|
|
value: geoCoordMap[dataItem[0].name]
|
|
}
|
|
})
|
|
}
|
|
)
|
|
})
|
|
var option = {
|
|
// backgroundColor: '#fff',
|
|
title: {
|
|
// text: '合作伙伴分布图',
|
|
// x: '4%',
|
|
// top: 4,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fontSize(0.16)
|
|
}
|
|
},
|
|
|
|
visualMap: {
|
|
// 图例值控制
|
|
min: 0,
|
|
max: 10000,
|
|
show: false,
|
|
color: ['#fff'],
|
|
fontSize: fontSize(0.16)
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
fontSize: fontSize(0.16),
|
|
formatter: function(params) {
|
|
if (typeof params.value === 'undefined') {
|
|
return ''
|
|
} else {
|
|
return params.name
|
|
}
|
|
}
|
|
},
|
|
geo: {
|
|
map: 'world',
|
|
label: {
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
roam: true, // 是否允许缩放
|
|
layoutCenter: ['50%', '50%'], // 地图位置
|
|
layoutSize: '180%',
|
|
regions: [
|
|
{
|
|
// 选中的区域
|
|
name: ['China'],
|
|
selected: true,
|
|
itemStyle: {
|
|
// 高亮时候的样式
|
|
emphasis: {
|
|
areaColor: '#e8b05c'
|
|
}
|
|
},
|
|
label: {
|
|
// 高亮的时候不显示标签
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
{
|
|
// 选中的区域
|
|
name: ['United States'],
|
|
selected: true,
|
|
itemStyle: {
|
|
// 高亮时候的样式
|
|
emphasis: {
|
|
areaColor: '#e8b05c'
|
|
}
|
|
},
|
|
label: {
|
|
// 高亮的时候不显示标签
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#11d2d6',
|
|
borderColor: '#002097'
|
|
},
|
|
emphasis: {
|
|
areaColor: '#339966'
|
|
}
|
|
}
|
|
},
|
|
|
|
series: series
|
|
}
|
|
this.myChart = echarts.init(this.$refs.mapbox)
|
|
this.myChart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.map-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|