|
...
|
...
|
@@ -12,6 +12,7 @@ export default { |
|
|
|
mapJsonUrl: 'public/data/zhejiang.json',
|
|
|
|
// cityUrl: '/datavis/getEchartsMap',
|
|
|
|
cityUrl: '/api-web/bigScreen/getEchartsMap',
|
|
|
|
mapData:'',
|
|
|
|
// 标记各地市的坐标
|
|
|
|
geoCoordMap: {
|
|
|
|
"省局": [119.453576, 30.005871],
|
|
...
|
...
|
@@ -61,8 +62,6 @@ export default { |
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
|
|
|
|
console.log("444",proxy.divIdName)
|
|
|
|
|
|
|
|
// 解析地图数据包
|
|
|
|
$.getJSON(proxy.mapJsonUrl, function(geoJson) {
|
|
|
|
// 注册地图,传入数据
|
|
...
|
...
|
@@ -71,6 +70,7 @@ export default { |
|
|
|
$.get(proxy.domainName +proxy.cityUrl,function(res){
|
|
|
|
if(res.data && res.data.length > 0){
|
|
|
|
const mapData = res.data;
|
|
|
|
proxy.mapData=mapData;
|
|
|
|
const obj = res.object;
|
|
|
|
const optionMap = {
|
|
|
|
timeline: {
|
|
...
|
...
|
@@ -122,160 +122,180 @@ export default { |
|
|
|
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,//鼠标移入是否显示动画
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
// 坐标点参数和样式
|
|
|
|
type: 'effectScatter',
|
|
|
|
coordinateSystem: 'geo',
|
|
|
|
zlevel: 3,
|
|
|
|
rippleEffect: {
|
|
|
|
number:3,
|
|
|
|
period: 4,
|
|
|
|
brushType: 'fill',
|
|
|
|
scale: 2
|
|
|
|
},
|
|
|
|
symbol: 'circle',
|
|
|
|
symbolSize: 30,
|
|
|
|
itemStyle:{
|
|
|
|
color:'#EE4237',
|
|
|
|
data: proxy.convertData(mapData),
|
|
|
|
symbolSize: 10,
|
|
|
|
showEffectOn: 'render',
|
|
|
|
rippleEffect: { //涟漪特效
|
|
|
|
period: 4, //动画时间，值越小速度越快
|
|
|
|
brushType: 'stroke', //波纹绘制方式 stroke, fill
|
|
|
|
scale: 4 //波纹圆环最大限制，值越大波纹越大
|
|
|
|
},
|
|
|
|
label: {
|
|
|
|
normal: {
|
|
|
|
show: false,
|
|
|
|
position: 'left',
|
|
|
|
formatter: '省局',
|
|
|
|
textStyle: {
|
|
|
|
color: "#0f0"
|
|
|
|
},
|
|
|
|
formatter: '{b}',
|
|
|
|
position: 'right',
|
|
|
|
show: true,
|
|
|
|
color:'#fff',
|
|
|
|
fontSize:16
|
|
|
|
},
|
|
|
|
emphasis: {
|
|
|
|
show: false,
|
|
|
|
color: "#0f0"//鼠标移入字体颜色
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data: [{
|
|
|
|
name: '省局',
|
|
|
|
value: proxy.geoCoordMap['省局'].concat([10])
|
|
|
|
}]
|
|
|
|
}]
|
|
|
|
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])
|
|
|
|
}]
|
|
|
|
}]
|
|
|
|
}]
|
|
|
|
};
|
|
|
|
setTimeout(function (){
|
|
|
|
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 map_chart = echarts.init(document.getElementById('network-echart'));
|
|
|
|
console.log("555",proxy.divIdName)
|
|
|
|
console.log("666",$(proxy.divIdName))
|
|
|
|
|
|
|
|
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));
|
|
|
|
|
|
|
|
//地图区域悬浮提示
|
|
|
|
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");
|
|
|
|
|
|
|
|
if ($('.map_tips').is(':hidden')) {
|
|
|
|
$('.map_tips').show();
|
|
|
|
//根据鼠标位置定位
|
|
|
|
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_tips_res').addClass("map_tips_city_0");
|
|
|
|
$('.map_tips_sxll').addClass("map_tips_city_1");
|
|
|
|
$('.map_tips_xxll').addClass("map_tips_city_2");
|
|
|
|
|
|
|
|
//根据鼠标位置定位
|
|
|
|
});
|
|
|
|
//鼠标移动，提示信息随鼠标走
|
|
|
|
map_chart.on('mousemove', 'geo', function (params) {
|
|
|
|
let name = params.name;
|
|
|
|
//随鼠标移动
|
|
|
|
let layerX = params.event.offsetX;
|
|
|
|
let layerY = params.event.offsetY;
|
|
|
|
//随鼠标移动
|
|
...
|
...
|
@@ -290,29 +310,8 @@ export default { |
|
|
|
'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
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},500)
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
...
|
...
|
@@ -322,5 +321,10 @@ export default { |
|
|
|
convertData,
|
|
|
|
convertToLineData
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onMounted(){
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
} |
...
|
...
|
|
