321 lines
13 KiB
JavaScript
321 lines
13 KiB
JavaScript
/**
|
|
* 顶部header
|
|
*/
|
|
Vue.component("labour-migrate-china-map", {
|
|
template: `
|
|
<div :style="{'height': height+'px'}" ref="map"></div>
|
|
`,
|
|
props: {
|
|
data:{
|
|
type:Object
|
|
},
|
|
height:{
|
|
type:Number
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
option:{},
|
|
|
|
}
|
|
},
|
|
mounted(){
|
|
this.loadMap(this.data)
|
|
},
|
|
methods: {
|
|
loadMap(outdata) {
|
|
console.log(outdata)
|
|
/**
|
|
* Created by User on 2020/2/24.
|
|
*/
|
|
var province = {
|
|
'黑龙江': [127.9688, 45.368],
|
|
'内蒙古': [110.3467, 41.4899],
|
|
"吉林": [125.8154, 44.2584],
|
|
'北京市': [116.4551, 40.2539],
|
|
"辽宁": [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],
|
|
"贵州": [106.6992, 26.7682],
|
|
"云南": [102.9199, 25.4663],
|
|
"广东": [113.12244, 23.009505],
|
|
"广西": [108.479, 23.1152],
|
|
"海南": [110.3893, 19.8516],
|
|
'上海': [121.4648, 31.2891]
|
|
};
|
|
|
|
var points = []
|
|
var jionData=[]
|
|
var valueData = []
|
|
var names = []
|
|
if(outdata.chinaDatas) {
|
|
for (let i = 0; i < outdata.chinaDatas.length; i++) {
|
|
var name = outdata.chinaDatas[i][0].name == "北京"?"北京市":outdata.chinaDatas[i][0].name;
|
|
valueData.push(outdata.chinaDatas[i][0].value)
|
|
names.push(outdata.chinaDatas[i][0].name)
|
|
points.push({
|
|
value:province[name],
|
|
})
|
|
jionData.push(
|
|
{
|
|
name:outdata.chinaDatas[i][0].name,
|
|
data:outdata.chinaDatas[i][0].value,
|
|
attacked:outdata.toCity,
|
|
coords: [
|
|
province[name],
|
|
outdata.toCityJW,
|
|
],
|
|
|
|
},
|
|
)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
points.push({
|
|
name:outdata.toCity,
|
|
value:outdata.toCityJW,
|
|
itemStyle: {
|
|
color: "#db8f08", //被攻击点的颜色
|
|
},
|
|
})
|
|
|
|
var myChart = echarts.init(this.$refs.map);
|
|
echarts.getMap('china').geoJson.features;
|
|
this.option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
borderColor: '#FFFFCC',
|
|
showDelay: 0,
|
|
hideDelay: 0,
|
|
enterable: true,
|
|
transitionDuration: 0,
|
|
extraCssText: 'z-index:100',
|
|
formatter: function(params, ticket, callback) {
|
|
|
|
var res = "";
|
|
if(params.componentSubType=="effectScatter") {
|
|
var name = names[params.dataIndex];
|
|
var value = valueData[params.dataIndex];
|
|
if(points[points.length-1].name != params.name){
|
|
res = "<div style='color:#fff;'>地址：" + name+"<br/>人数："+value+"（人）</div>";
|
|
}else {
|
|
res = "<div style='color:#fff;'>地址：" + points[points.length-1].name+"</div>";
|
|
}
|
|
return res;
|
|
}else if(params.componentSubType=="lines"){
|
|
var name = params.data.name;
|
|
var value = params.data.data;
|
|
var toname =params.data.attacked
|
|
res = "<div style='color:#fff;'>地址：" + name+">"+toname+"<br/>人数："+value+"（人）</div>";
|
|
return res;
|
|
}
|
|
// else{
|
|
// var name = params.name;
|
|
// return name;
|
|
// }
|
|
//根据业务自己拓展要显示的内容
|
|
}
|
|
},
|
|
geo: {
|
|
map: 'china',
|
|
show: true,
|
|
roam: false,
|
|
zoom: 1.17,
|
|
label: {
|
|
emphasis: {
|
|
show: false,
|
|
}
|
|
},
|
|
layoutSize: "100%",
|
|
itemStyle: {
|
|
// normal: {
|
|
// areaColor: '#000', //背景颜色
|
|
// borderColor: '#8ac2fb', //省划分边线
|
|
// borderWidth: 10, //边线的粗细
|
|
// },
|
|
// emphasis: {
|
|
// areaColor: '#002d90' , //指上背景限色
|
|
// },
|
|
areaColor: "#86c2f8",
|
|
borderColor: "#86c2f8",
|
|
shadowColor: "#86c2f8",
|
|
shadowBlur: 25,
|
|
borderWidth: 5,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "lines",
|
|
zlevel: 2,
|
|
effect: {
|
|
show: true,
|
|
period: 4, //箭头指向速度，值越小速度越快
|
|
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
|
|
symbol: "arrow", //箭头图标
|
|
symbolSize: 10, //图标大小
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#db8f08", //攻击线条的颜色
|
|
/* function (value){ //随机颜色
|
|
|
|
['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
|
|
'#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
|
|
'#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
|
|
'#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
|
|
'#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
|
|
'#52b9c7','#4fb6d2','#4ab2e5']
|
|
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
|
|
}*/
|
|
width: 2, //线条宽度
|
|
opacity: 0.1, //尾迹线条透明度
|
|
curveness: 0.3, //尾迹线条曲直度
|
|
},
|
|
},
|
|
data: jionData
|
|
},
|
|
{
|
|
type: 'map',
|
|
roam: false,
|
|
zoom: 1.15,
|
|
map: 'china', //使用
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
fontSize:14, //省会字体大小
|
|
textStyle: {
|
|
color: '#eeeeee',
|
|
}
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
color: '#ffffff', //指上省会字体颜色
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: {
|
|
type: "radial",
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.8,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "#1c2a4c", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#1f335e", // 100% 处的颜色
|
|
},
|
|
],
|
|
globalCoord: true, // 缺省为 false
|
|
},
|
|
shadowColor: "rgb(58,115,192)",
|
|
borderColor: '#8ac2fb'
|
|
},
|
|
// normal: {
|
|
// areaColor: '#141e37', //背景颜色
|
|
// borderColor: '#8ac2fb', //省划分边线
|
|
// borderWidth: 1, //边线的粗细
|
|
// },
|
|
emphasis: {
|
|
areaColor: '#22578b' , //指上背景限色
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
|
|
}
|
|
}
|
|
},
|
|
// points.push({
|
|
// name:outdata.toCity,
|
|
data: jionData.map(function(dataItem) {
|
|
return {
|
|
name: dataItem.name,
|
|
value: dataItem.data,
|
|
seriesName:points[points.length-1].name
|
|
};
|
|
}),
|
|
},
|
|
{
|
|
type: "effectScatter",
|
|
coordinateSystem: "geo",
|
|
showEffectOn: "render",
|
|
zlevel: 1,
|
|
rippleEffect: {
|
|
period: 15,
|
|
scale: 4,
|
|
brushType: "fill",
|
|
},
|
|
hoverAnimation: true,
|
|
label: {
|
|
normal: {
|
|
formatter: "{b}",
|
|
position: "right",
|
|
offset: [15, 0],
|
|
color: "#4575ff",
|
|
show: true,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#4575ff",
|
|
/* function (value){ //随机颜色
|
|
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
|
|
}*/
|
|
shadowBlur: 10,
|
|
shadowColor: "#333",
|
|
},
|
|
},
|
|
symbolSize: 12,
|
|
data: points,
|
|
}, //地图线的动画效果
|
|
|
|
|
|
],
|
|
};
|
|
myChart.setOption(this.option, true);
|
|
|
|
var currentIndex = -1;
|
|
var timeTicket = setInterval(function() {
|
|
var dataLen = jionData.length;
|
|
currentIndex = (currentIndex + 1) % dataLen;
|
|
// 显示 tooltip
|
|
myChart.dispatchAction({
|
|
type: 'showTip',
|
|
seriesIndex: 2,
|
|
dataIndex: currentIndex
|
|
});
|
|
}, 3000);
|
|
|
|
},
|
|
|
|
},
|
|
watch: {
|
|
data:function () {
|
|
this.loadMap(this.data)
|
|
}
|
|
},
|
|
})
|