/**
* 顶部header
*/
Vue.component("labour-migrate-china-map", {
template: `
`,
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 = "地址：" + name+"
人数："+value+"（人）
";
}else {
res = "地址：" + points[points.length-1].name+"
";
}
return res;
}else if(params.componentSubType=="lines"){
var name = params.data.name;
var value = params.data.data;
var toname =params.data.attacked
res = "地址：" + name+">"+toname+"
人数："+value+"（人）
";
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)
}
},
})