|
|
|
export default {
|
|
|
|
name: 'networkTopology',
|
|
|
|
// props:['divIdName','geoCoordMap','domainName','mapJsonUrl','cityUrl'],
|
|
|
|
template: '',
|
|
|
|
components: {
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
divIdName:'#network-echart',
|
|
|
|
domainName:'http://192.168.0.245:8180/api-web',
|
|
|
|
mapJsonUrl:'public/data/zhejiang.json',
|
|
|
|
cityUrl:'/datavis/getEchartsMap',
|
|
|
|
// 标记各地市的坐标
|
|
|
|
geoCoordMap:{
|
|
|
|
"省局": [119.453576,30.005871],
|
|
|
|
"杭州市": [120.153576,30.287459],
|
|
|
|
"宁波": [121.549792,29.868388],
|
|
|
|
"温州市": [120.672111,28.000575],
|
|
|
|
"嘉兴市": [120.750865,30.762653],
|
|
|
|
"湖州市": [120.102398,30.867198],
|
|
|
|
"绍兴市": [120.582112,29.997117],
|
|
|
|
"金华市": [119.649506,29.089524],
|
|
|
|
"衢州市": [118.87263,28.941708],
|
|
|
|
"舟山市": [122.106863,30.016028],
|
|
|
|
"台州市": [121.428599,28.661378],
|
|
|
|
"丽水市": [ 119.921786,28.451993]
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
setup(props, {attrs, slots, emit}) {
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
|
|
|
|
// 输出json对象数组,value里包含坐标值和随机值
|
|
|
|
let convertData = (data) =>{
|
|
|
|
let res = [];
|
|
|
|
$.each(data,function (i,v) {
|
|
|
|
let geoCoord = proxy.geoCoordMap[v.name];
|
|
|
|
res.push({
|
|
|
|
name: v.name,
|
|
|
|
value: geoCoord.concat(v.value)
|
|
|
|
})
|
|
|
|
});
|
|
|
|
return res
|
|
|
|
}
|
|
|
|
// 设置目标点, 配置线条指向
|
|
|
|
let convertToLineData = (data) => {
|
|
|
|
let res = [];
|
|
|
|
$.each(data,function (i,v) {
|
|
|
|
// 起点
|
|
|
|
let fromCoord = proxy.geoCoordMap[v.name];
|
|
|
|
// 终点,这里设置的省局
|
|
|
|
let toCoord = [119.453576,30.005871];
|
|
|
|
res.push([{ coord: fromCoord, value: v.value },{ coord: toCoord }]);
|
|
|
|
});
|
|
|
|
return res
|
|
|
|
}
|
|
|
|
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
|
|
|
|
// 解析地图数据包
|
|
|
|
$.getJSON(proxy.mapJsonUrl, function(geoJson) {
|
|
|
|
// 注册地图,传入数据
|
|
|
|
echarts.registerMap('echarts', geoJson);
|
|
|
|
//获取浙江各地市链路信息
|
|
|
|
$.get(proxy.domainName +proxy.cityUrl,function(res){
|
|
|
|
if(res.data && res.data.length > 0){
|
|
|
|
const mapData = res.data;
|
|
|
|
const obj = res.object;
|
|
|
|
const optionMap = {
|
|
|
|
timeline: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
baseOption: {
|
|
|
|
// 设置地图参数和样式
|
|
|
|
geo: {
|
|
|
|
show: true,
|
|
|
|
map: 'echarts',
|
|
|
|
roam: true,
|
|
|
|
zoom: 1.25,
|
|
|
|
// 地图中心点的坐标, 可调节显示的偏移量
|
|
|
|
center: [120.453576,29.197459],
|
|
|
|
label: {
|
|
|
|
// 高亮文字隐藏
|
|
|
|
emphasis: {
|
|
|
|
show: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
itemStyle: {
|
|
|
|
normal: {
|
|
|
|
borderColor: '#42adff',
|
|
|
|
borderWidth: 2,
|
|
|
|
areaColor: 'rgba(0,0,0,0)',
|
|
|
|
shadowColor: '#294167',
|
|
|
|
shadowOffsetX: -2,
|
|
|
|
shadowOffsetY: 2,
|
|
|
|
shadowBlur: 25
|
|
|
|
},
|
|
|
|
emphasis: {
|
|
|
|
// 鼠标悬浮高亮
|
|
|
|
areaColor: '#0D114B',
|
|
|
|
borderWidth: 1,
|
|
|
|
shadowColor: '#294167',
|
|
|
|
borderColor: '#42adff'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
options: [{
|
|
|
|
xAxis: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
yAxis: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
tooltip: {
|
|
|
|
show:false
|
|
|
|
},
|
|
|
|
series: [{
|
|
|
|
// 坐标点参数和样式
|
|
|
|
type: 'effectScatter',
|
|
|
|
coordinateSystem: 'geo',
|
|
|
|
data: proxy.convertData(mapData),
|
|
|
|
symbolSize: 10,
|
|
|
|
showEffectOn: 'render',
|
|
|
|
rippleEffect: { //涟漪特效
|
|
|
|
period: 4, //动画时间，值越小速度越快
|
|
|
|
brushType: 'stroke', //波纹绘制方式 stroke, fill
|
|
|
|
scale: 4 //波纹圆环最大限制，值越大波纹越大
|
|
|
|
},
|
|
|
|
label: {
|
|
|
|
normal: {
|
|
|
|
formatter: '{b}',
|
|
|
|
position: 'right',
|
|
|
|
show: true,
|
|
|
|
color:'#fff',
|
|
|
|
fontSize:16
|
|
|
|
}
|
|
|
|
},
|
|
|
|
itemStyle: {
|
|
|
|
normal: {
|
|
|
|
//点的颜色
|
|
|
|
color: function (data) {
|
|
|
|
return colors[data.value[2]];
|
|
|
|
},
|
|
|
|
shadowBlur: 2,
|
|
|
|
shadowColor: '#03BED9',
|
|
|
|
symbolSize: 5
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
// 线条参数和样式
|
|
|
|
type: 'lines',
|
|
|
|
// 变化频率
|
|
|
|
zlevel: 2,
|
|
|
|
effect: {
|
|
|
|
show: true,
|
|
|
|
// 箭头指向速度，值越小速度越快
|
|
|
|
period: 4,
|
|
|
|
// 特效尾迹长度,取值0到1,值越大,尾迹越长
|
|
|
|
trailLength: 0.03,
|
|
|
|
symbol: 'arrow',
|
|
|
|
// 图标大小
|
|
|
|
symbolSize: 6
|
|
|
|
},
|
|
|
|
lineStyle: {
|
|
|
|
normal: {
|
|
|
|
//线条颜色
|
|
|
|
color: function (data) {
|
|
|
|
// return colors[0];//线条跟着点的颜色一致
|
|
|
|
if(data.value == 0){
|
|
|
|
return '#00eaff';
|
|
|
|
}else{
|
|
|
|
return '#D81E06';
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
// 尾迹线条宽度
|
|
|
|
width: 1,
|
|
|
|
// 尾迹线条透明度
|
|
|
|
opacity: 1,
|
|
|
|
// 尾迹线条曲直度
|
|
|
|
curveness: 0.3
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data: proxy.convertToLineData(mapData)
|
|
|
|
},
|
|
|
|
{//被攻击点
|
|
|
|
// type: 'scatter',
|
|
|
|
type:'effectScatter',
|
|
|
|
hoverAnimation:true,//鼠标移入是否显示动画
|
|
|
|
coordinateSystem: 'geo',
|
|
|
|
zlevel: 3,
|
|
|
|
rippleEffect: {
|
|
|
|
number:3,
|
|
|
|
period: 4,
|
|
|
|
brushType: 'fill',
|
|
|
|
scale: 2
|
|
|
|
},
|
|
|
|
symbol: 'circle',
|
|
|
|
symbolSize: 30,
|
|
|
|
itemStyle:{
|
|
|
|
color:'#EE4237',
|
|
|
|
},
|
|
|
|
label: {
|
|
|
|
normal: {
|
|
|
|
show: false,
|
|
|
|
position: 'left',
|
|
|
|
formatter: '省局',
|
|
|
|
textStyle: {
|
|
|
|
color: "#0f0"
|
|
|
|
},
|
|
|
|
fontSize:16
|
|
|
|
},
|
|
|
|
emphasis: {
|
|
|
|
show: false,
|
|
|
|
color: "#0f0"//鼠标移入字体颜色
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data: [{
|
|
|
|
name: '省局',
|
|
|
|
value: proxy.geoCoordMap['省局'].concat([10])
|
|
|
|
}]
|
|
|
|
}]
|
|
|
|
}]
|
|
|
|
};
|
|
|
|
|
|
|
|
// let map_chart = echarts.init(document.getElementById('network-echart'));
|
|
|
|
let map_chart=echarts.init($(proxy.divIdName)[0])
|
|
|
|
map_chart.setOption(optionMap);
|
|
|
|
map_chart.on('mouseout', 'geo', function (params) {
|
|
|
|
$('.map_tips').hide();
|
|
|
|
});
|
|
|
|
//当鼠标移入当前区域显示提示信息
|
|
|
|
map_chart.on('mouseover', 'geo',function (params) {
|
|
|
|
let name = params.name;
|
|
|
|
//先删除原来的
|
|
|
|
$(proxy.divIdName).find('.map_tips').remove();
|
|
|
|
//当前城市提示信息
|
|
|
|
let currentCity = obj[name];
|
|
|
|
if(currentCity && currentCity.length > 0){
|
|
|
|
let cityInfos = '';
|
|
|
|
$.each(currentCity,function (i,v) {
|
|
|
|
cityInfos += '<div class="map_tips_group">' +
|
|
|
|
' <div class="map_tips_res" style="margin-left: -8px;">'+v.resName+'</div>' +
|
|
|
|
' <div class="map_tips_sxll">上行流量：'+v.sxll+'</div>' +
|
|
|
|
' <div class="map_tips_xxll">下行流量：'+v.xxll+'</div>' +
|
|
|
|
' </div>';
|
|
|
|
});
|
|
|
|
|
|
|
|
//地图区域悬浮提示
|
|
|
|
let cityTips =
|
|
|
|
'<div class="map_tips">' +
|
|
|
|
' <div class="map_tips_city"><i class="icon-focus"></i><span>'+name+'</span></div>'
|
|
|
|
+ cityInfos +
|
|
|
|
'</div>';
|
|
|
|
//提示框拼接在echar区域
|
|
|
|
$(cityTips).appendTo($(proxy.divIdName));
|
|
|
|
|
|
|
|
if ($('.map_tips').is(':hidden')) {
|
|
|
|
$('.map_tips').show();
|
|
|
|
}
|
|
|
|
//城市名称从左到右滑入效果
|
|
|
|
$('.map_tips_res').addClass("map_tips_city_0");
|
|
|
|
$('.map_tips_sxll').addClass("map_tips_city_1");
|
|
|
|
$('.map_tips_xxll').addClass("map_tips_city_2");
|
|
|
|
|
|
|
|
//根据鼠标位置定位
|
|
|
|
let layerX = params.event.offsetX;
|
|
|
|
let layerY = params.event.offsetY;
|
|
|
|
//随鼠标移动
|
|
|
|
if(name == '湖州市' || name == '嘉兴市'){
|
|
|
|
$('.map_tips').css({
|
|
|
|
'top': layerY + 10,
|
|
|
|
'left': layerX + 15
|
|
|
|
});
|
|
|
|
}else{
|
|
|
|
$('.map_tips').css({
|
|
|
|
'top': layerY -120,
|
|
|
|
'left': layerX + 15
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}else{
|
|
|
|
$('.map_tips').hide();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
//鼠标移动，提示信息随鼠标走
|
|
|
|
map_chart.on('mousemove', 'geo', function (params) {
|
|
|
|
let name = params.name;
|
|
|
|
//随鼠标移动
|
|
|
|
let layerX = params.event.offsetX;
|
|
|
|
let layerY = params.event.offsetY;
|
|
|
|
//随鼠标移动
|
|
|
|
if(name == '湖州市' || name == '嘉兴市'){
|
|
|
|
$('.map_tips').css({
|
|
|
|
'top': layerY + 10,
|
|
|
|
'left': layerX + 15
|
|
|
|
});
|
|
|
|
}else{
|
|
|
|
$('.map_tips').css({
|
|
|
|
'top': layerY -120,
|
|
|
|
'left': layerX + 15
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
return {
|
|
|
|
convertData,
|
|
|
|
convertToLineData
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
...
|
...
|
|
