公司項目需要在map上畫視覺引導(dǎo)線標(biāo)注對應(yīng)區(qū)域信息。在echarts官網(wǎng)沒有看到相關(guān)示例（也許。。沒看到），但是后來看api有看到 series里type = lines，具體看到是可以在map里畫線的。用他們模擬飛機(jī)航線的例子做基礎(chǔ)寫了一個例子供大家參考。
不多BB，按慣例貼出關(guān)鍵代碼；
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, //不響應(yīng)鼠標(biāo)點擊或事件
effect: {
show: false //關(guān)閉特效
},
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', //鼠標(biāo)設(shè)置為箭頭
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
