目前的echarts版本中,对于在geo上绘制lines时,主要的代码如下:
geo: {
map: 'world',
silent: true,
roam: true,
show: true,
zoom: 25,
selectedMode: 'single',
nameMap: {
// China:'中国'
},
label: {
show: true,
position: ['50%', '50%'],
color: "#63e5ff"
},
center: [124.5, 29.3],
data: this.makeMapData(rawData),
activeOpacity: 1,
symbolSize: 10,
itemStyle: {
borderWidth: 0.5,
borderColor: '#43c5ff',
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(10,104,204,0)'
}, {
offset: 1,
color: 'rgba(10,104,204,.2)'
}],
globalCoord: false
},
},
如果想要在geo上绘制航路点,我们可以要使用lines或者scatter,
lines是针对每个具体的点,绘制线段,
scatter实际上是锚点,然后绘制两点连线。
但是如果想要在一个线段中,对于关键的拐点、重点的线上点进行响应,目前echarts好像没有提供官方的API。
我的解决思路是,绘制相同name的lines和scatter进行geo坐标系的连接,这样就可以实现了。
代码如下:
{
type: 'lines',
name: item.name,
coordinateSystem: 'geo',
polyline: true,
lineStyle: {
color: this.props.colorList[index],
},
emphasis: {
show: false,
position: 'start',
formatter: '{a}-{b}--{c}'
},
data: [{
name: item.name,
coords: item.data,
}]
}
{
type: 'scatter',
name: item.name,
coordinateSystem: 'geo',
polyline: true,
// symbol:'cricle',
// symbolSize:10,
itemStyle: {
color: this.props.colorList[index],
},
emphasis: {
show: false,
position: 'start',
formatter: '{a}-{b}--{c}'
},
data: item.data.map((item, index) => {
return {
name: index,
value: item
}
}),
}