75 lines
2.0 KiB
Vue
75 lines
2.0 KiB
Vue
<template>
|
|
<div style="width: 100%;height: 100%;">
|
|
<div style="width: 100%;height: 10%"><span style="margin-top: 1%;font-size: 20px;margin-left: 2%;float: left">节点分布</span></div>
|
|
<div ref="worldmap" style="width: 100%;height: 90%"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
|
|
const worldJson = require("../../../api/world_v2.json")
|
|
export default {
|
|
name: "WorldMap",
|
|
props: {
|
|
nodes:{
|
|
type: Array,
|
|
},
|
|
},
|
|
watch: {
|
|
nodes: {
|
|
deep: true,
|
|
handler(val) {
|
|
console.log(val)
|
|
this.drawMap(val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 调整节点信息格式
|
|
getInfo(){
|
|
return this.nodes.map(node => {
|
|
return [node.Lng, node.Lat]
|
|
})
|
|
},
|
|
// 绘制世界地图
|
|
drawMap(){
|
|
// 初始化myChart
|
|
var myChart = echarts.init(this.$refs.worldmap)
|
|
// 注册可用的地图
|
|
echarts.registerMap('world', worldJson)
|
|
var option = {
|
|
tooltip: {
|
|
show: true
|
|
},
|
|
geo: {
|
|
tooltip: {
|
|
show: true
|
|
},
|
|
map: 'world', // 使用registerMap注册的地图名称
|
|
roam: true, // 开启鼠标缩放和平移漫游
|
|
},
|
|
series: {
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
itemStyle: {
|
|
color: '#b02a02'
|
|
},
|
|
encode: {
|
|
tooltip: 2
|
|
},
|
|
data: this.getInfo()
|
|
}
|
|
}
|
|
myChart.setOption(option)
|
|
},
|
|
},
|
|
mounted(){
|
|
this.drawMap()
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped="scoped">
|
|
</style> |