var geoCoordMap = {
'黑龙江': [127.9688, 45.368],
'北京': [116.4551, 40.2539],
"陕西": [109.1162, 34.2004],
"新疆": [87.9236, 43.5883],
"西藏": [91.11, 29.97],
"重庆": [108.384366, 30.439702],
"贵州": [106.6992, 26.7682],
"云南": [102.9199, 25.4663],
"广东": [113.12244, 23.009505],
'上海': [121.4648, 31.2891],
'温江区': [103.9526, 30.7617],
};
var dataT = [
{
name: '上海',
value: 321
},
{
name: '广东',
value: 123,
},
{
name: '重庆',
value: 433,
},
{
name: '北京',
value: 111,
},
{
name: '云南',
value: 261,
},
{
name: '陕西',
value: 123,
},
{
name: '新疆',
value: 771,
},
{
name: '西藏',
value: 91,
},
{
name: '贵州',
value: 230,
},
{
name: '黑龙江',
value: 165,
}
];
geoCoordMap['四川'] = [103.9526, 30.7617];
var GZData = [];
var tempData = ['四川', GZData];
dataT.map((item, index) => {
var arr = [];
arr.push(item)
arr.push({
name: '四川'
})
GZData.push(arr)
})
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[0].value
});
}
}
return res;
};
var color = ['#00ff78', '#ff971b', '#acff43', '#ff73b7', '#ffff46', '#27bbfe'];
var series = [{
type: 'map',
map: 'china',
// width: '100%',
zoom: 1.1 //可以显示map最外围的边框轮廓
geoIndex: 1,
zlevel: 1,
// aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: false,
itemStyle: {
normal: {
areaColor: 'rgba(128, 128, 128, 0)',
borderColor: '#49a7d5', //省市边界线00fcff 516a89
},
emphasis: {
areaColor: 'rgba(128, 128, 128, 0)',
}
},
data: [{
name: '南海诸岛',
value: 0,
itemStyle: {
normal: {
opacity: 0,
label: {
show: false
}
}
}
}]
}, ];
series.push({
name: tempData[0],
type: 'lines',
zlevel: 3,
symbol: ['none', 'circle'],
effect: {
show: true,
period: 3, //箭头指向速度,值越小速度越快
trailLength: 0.01, //特效尾迹长度[0,1]值越大,尾迹越长重
symbolSize: 4, //图标大小
},
lineStyle: {
normal: {
opacity: 1,
curveness: 0.4, //曲线的弯曲程度
color: '#609fd4'
}
},
data: convertData(tempData[1])
}, {
name: tempData[0],
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
}
},
symbolSize: function (val) {
console.log(val)
return val[2]/20+5;
},
itemStyle: {
normal: {
// fontSize: 80,
}
},
data: tempData[1].map(function(dataItem) {
return {
name: dataItem[0].name,
value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
})
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 4,
symbolSize: 30,
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: 'white'
}
},
itemStyle: {
normal: {
color: 'white'
}
},
rippleEffect: {
scale: 4,
brushType: 'stroke'
},
data: [{
name: tempData[0],
value: geoCoordMap[tempData[0]],
visualMap: false
}],
});
option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
if (params.seriesType == "scatter" && params.name != tempData[0]) {
return "<br>" + params.data.name + " ---> " + params.seriesName + "<br />数量1:" + params.data.value[2];
} else if (params.seriesType == "lines") {
return "<br>" + params.data.fromName + " ---> " + params.data.toName + "<br />数量2:" + params.data.value;
} else {
return params.name;
}
}
},
visualMap: {
min: 70,
max: 1000,
// textStyle: {
// color: '#fff',
// },
show: true,
pieces: [{
max: 200,
label: '未请假',
color: '#c23c33'
},
{
min: 200,
label: '无异常',
color: '#2c9a42'
}
],
color: '#fff',
textStyle: {
color: '#fff',
},
},
geo: {
map: 'china',
zoom: 0.98,
zlevel: 2,
label: {
emphasis: {
show: false
},
},
roam: false, //是否允许缩放
itemStyle: {
normal: {
areaColor: '#214278',
borderColor: '#195BB9', //省市边界线00fcff 516a89
},
emphasis: {
color: '#112246' //悬浮背景
}
},
},
series: series
};
生成图片如下