echarts 地区地图 广东地区地区迁徙
<script language="javascript" type="text/javascript" src="echarts.min.js"></script>
<div id="container" style="width:100%;height:700px;"></div>
<script type="text/javascript">showProvince();
function showProvince() {
var geoCoordMap = {
'广州': [113.280637,23.125178],
'清远': [113.051227,23.685022],
'韶关': [113.591544,24.801322],
'湛江': [110.364977,21.274898],
'梅州': [116.117582,24.299112],
'河源': [114.697802,23.746266],
'肇庆': [112.472529,23.051546],
'惠州': [114.412599,23.079404],
'茂名': [110.919229,21.659751],
'江门': [113.094942,22.590431],
'阳江': [111.975107,21.859222],
'云浮': [112.044439,22.929801],
'汕尾': [115.364238,22.774485],
'揭阳': [116.355733,23.543778],
'珠海': [113.553986,22.224979],
'佛山': [113.122717,23.028762],
'潮州': [116.632301,23.661701],
'汕头': [116.708463,23.37102],
'深圳': [114.085947,22.547],
'东莞': [113.746262,23.046237],
'中山': [113.382391,22.521113]
};
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([{
coord: fromCoord // 起点坐标
}, {
coord: toCoord // 终点坐标
}])
}
}
return res;
}
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var GZData = [
[{name:'广州'},{name:'清远',value:5,symbol: 'pin',x: 380,y: 140}],
[{name:'广州'},{name:'韶关',value:15}],
[{name:'广州'},{name:'湛江',value:10}],
[{name:'广州'},{name:'梅州',value:8}],
[{name:'广州'},{name:'河源',value:5}],
[{name:'广州'},{name:'肇庆',value:15}],
[{name:'广州'},{name:'惠州',value:10}],
[{name:'广州'},{name:'茂名',value:8}],
[{name:'广州'},{name:'江门',value:5}],
[{name:'广州'},{name:'阳江',value:15}],
[{name:'广州'},{name:'云浮',value:10}],
[{name:'广州'},{name:'汕尾',value:8}],
[{name:'广州'},{name:'揭阳',value:5}],
[{name:'广州'},{name:'珠海',value:15}],
[{name:'广州'},{name:'佛山',value:10}],
[{name:'广州'},{name:'潮州',value:8}],
[{name:'广州'},{name:'汕头',value:5}],
[{name:'广州'},{name:'深圳',value:15}],
[{name:'广州'},{name:'东莞',value:10}],
[{name:'广州'},{name:'中山',value:8}]
];
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[ ['广州', GZData]].forEach(function (item, i) {
series.push({
// 白色航线特效图
type: 'lines',
zlevel: 1, // 用于分层，z-index的效果
effect: {
show: true, // 动效是否显示
period: 6, // 特效动画时间
trailLength: 0.7, // 特效尾迹的长度
color: '#fff', // 特效颜色
symbolSize: 3 // 特效大小
},
lineStyle: {
normal: { // 正常情况下的线条样式
color: color[0],
width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
curveness: 0.2 // 线条曲度
}
},
data: convertData(item[1]) // 特效的起始、终点位置
}, { // 小飞机航线效果
type: 'lines',
zlevel: 2,
// symbol: ['none', 'arrow'], // 用于设置箭头
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath, // 特效形状，可以用其他svg pathdata路径代替
symbolSize: 15
},
lineStyle: {
normal: {
color: color[0],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1]) // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
}, { // 散点效果
type: 'effectScatter',
coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
zlevel: 3,
rippleEffect: {
brushType: 'stroke' // 波纹绘制效果
},
label: {
normal: { // 默认的文本标签显示样式
show: true,
position: 'left', // 标签显示的位置
formatter: '{b}' // 标签内容格式器
}
},
itemStyle: {
normal: {
color: color[0]
}
},
data: item[1].map(function(dataItem) {
return {
// name: dataItem[1].name,
// value: geoCoordMap[dataItem[1].name], // 起点的位置
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
symbolSize: dataItem[1].value / 8, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
};
})
});
});
var dom = document.getElementById("container");
var myChart2 = echarts.init(dom);
var app = {};
option = null;
var name = 'guangdong';
myChart2.showLoading();
$.get('/style/map/guangdong.asp', function (geoJson) {
myChart2.hideLoading();
echarts.registerMap('guangdong', geoJson);
myChart2.setOption(option = {
backgroundColor: '#404a59',
title: {
text: "活动区域分布图",
left: 'center',
textStyle : {color: '#fff'}
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['接诊数据'],
textStyle: {
color: '#fff'
},
selectedMode: 'single'
},
geo: {
map: 'guangdong',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: series
});
});
}
</script>