公司项目需要在map上画视觉引导线标注对应区域信息。在echarts官网没有看到相关示例（也许。。没看到），但是后来看api有看到 series里type = lines，具体看到是可以在map里画线的。用他们模拟飞机航线的例子做基础写了一个例子供大家参考。
不多BB，按惯例贴出关键代码；
var convertLineData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var coordS = dataItem.lineS; //线起点
var coordM = dataItem.lineM; //线中间点
var coordE = dataItem.lineE; //线尾点
if (coordS && coordM && coordE) {
res.push({
coords: [coordS, coordM, coordE]
});
}
}
return res;
};
var convertValData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
res.push({
name: dataItem.areaName,
value: dataItem.lineE.concat(dataItem.value)
});
}
return res;
};
var json = {
data: [{
areaName: '北京',
value: 94,
lineS: [116.4551, 40.2539],
lineM: [125.541, 40.4242],
lineE: [135.4648, 43.2891]
},{
areaName: '上海',
value: 90,
lineS: [121.4648,31.2891],
lineM: [125.4648,31.2891],
lineE: [127.4648,36.2891]
}]
};
var data = json.data;
var series = [];
series.push(
{
name: '',
type: 'lines',
zlevel: 2,
symbol: 'none',
silent: true, //不响应鼠标点击或事件
effect: {
show: false //关闭特效
},
tooltip: {
show: false
},
polyline: true, //支持多点连线
lineStyle: {
normal: {
color: 'white',
width: 1.5,
opacity: 0.9,
curveness: 0
}
},
data: convertLineData(data)
},
{
name: '',
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
hoverAnimation: false, //hover时不高亮点
cursor: 'default', //鼠标设置为箭头
itemStyle: {
normal: {
color: 'orange'
}
},
tooltip: {
show: false
},
label: {
normal: {
show: true,
position: 'right',
fontSize: 25,
fontWeight: 'bold',
color: '#f5a623',
formatter: function (param) {
return param.value[2];
}
}
},
data: convertValData(data)/*[{
name: '94', value: [135.4648, 43.2891, 95],
}]*/
}
);
老样子给出效果图：
map-line.png
完整源码见： https://github.com/hzhqk/echarts/tree/master/map-line
