注释
1、 地图类型http://echarts.baidu.com/demo.html#geo-lines
- option = {
backgroundColor: ‘#404a59‘,//背景颜色
title : {//标题
text: ‘模拟迁徙‘, //主标题
subtext: ‘数据纯属虚构‘, //副标题
left: ‘center‘, //位置
x:‘center‘,//可以直接设置位置
textStyle : {//文本样式
color: ‘#fff‘
fontSize: 20//字体大小
}
},
tooltip : {//提示信息
trigger: ‘item‘//触发类型
},
legend: {//图例
orient: ‘vertical‘, //水平还是垂直
top: ‘bottom‘, //位置
left: ‘right‘, //位置
data:[‘北京 Top10‘, ‘上海 Top10‘, ‘广州 Top10‘], //图例显示数组
textStyle: {//图例样式
color: ‘#fff‘
},
selectedMode: ‘single‘//单选还是多选（Multiple）
},
geo: {//地图
map: ‘china‘, //具体地图，一个文件
label: {//地图标签
emphasis: {//强调，鼠标移动到上面
show: false//是否显示
}
},
roam: true,
itemStyle: {//地图每项样式设置
normal: {//正常状态，鼠标未移入
areaColor: ‘#323c48‘,
borderColor: ‘#404a59‘
},
emphasis: {//鼠标移入
areaColor: ‘#2a333d‘
}
}
},
series: series//地图展示数组，最重要的一部分
};
2、 series详细设置
series.push({
name: item[0] + ‘ Top10‘, //数组展示名称
type: ‘lines‘, //展示类型
zlevel: 1, //层叠级别
effect: {//效果设置
show: true,
period: 6,
trailLength: 0.7,
color: ‘#fff‘,
symbolSize: 3//展示图标的大小
},
lineStyle: {//线样式
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + ‘ Top10‘,
type: ‘lines‘,
zlevel: 2,
symbol: [‘none‘, ‘arrow‘], //标志符号设置
symbolSize: 10, //标志符号大小
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + ‘ Top10‘,
type: ‘effectScatter‘,//散点图
coordinateSystem: ‘geo‘, //坐标系
zlevel: 2,
rippleEffect: {
brushType: ‘stroke‘
},
label: {
normal: {
show: true,
position: ‘right‘,
formatter: ‘{b}‘//数组的标签展示，也可以是js函数返回值
}
},
symbolSize: function (val) {//标志大小，可以是函数返回值
return val[2] / 8;
},
tooltip:{
formatter: function (val){ //参数表示该项数组内的只
return val.name+‘:<br/>‘+val.value[2]+"MB"; //换行符
}
},
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});