echarts地图绘制连线
时间: 2023-11-01 22:21:58 浏览: 100
要在 echarts 中绘制地图连线,你可以使用 echarts 的 geo 组件和 lines 这个系列类型。下面是一个简单的示例代码,展示了如何绘制两个城市之间的连线:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 地图数据
var geoData = [
{ name: '城市A', coord: [lon1, lat1] },
{ name: '城市B', coord: [lon2, lat2] }
];
// 连线数据
var lineData = [
{ from: '城市A', to: '城市B' }
];
// 绘制地图
myChart.setOption({
geo: {
map: 'china',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
type: 'lines',
zlevel: 2,
symbolSize: 10,
effect: {
show: true,
period: 4,
trailLength: 0.5,
symbolSize: 5
},
lineStyle: {
color: '#fff',
width: 1,
opacity: 0.6,
curveness: 0.2
},
data: lineData.map(function (dataItem) {
var fromCoord = geoData.find(function (geoItem) {
return geoItem.name === dataItem.from;
}).coord;
var toCoord = geoData.find(function (geoItem) {
return geoItem.name === dataItem.to;
}).coord;
return { fromCoord, toCoord };
})
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
emphasis: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 10,
itemStyle: {
normal: {
color: '#fff'
}
},
data: geoData.map(function (geoItem) {
return {
name: geoItem.name,
value: geoItem.coord.concat(10)
};
})
}]
});
```
你需要将 `chart` 替换为你的 HTML 元素 ID,`lon1`、`lat1`、`lon2`、`lat2` 替换为城市 A 和城市 B 的经纬度。这样就可以在地图上绘制出两个城市之间的连线了。你可以根据自己的需求修改样式和数据。
阅读全文