echarts简单地铁线路图
时间: 2023-10-06 08:05:30 浏览: 52
以下是一个简单的 echarts 地铁线路图示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地铁线路图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="subway" style="width: 800px; height: 600px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('subway'));
// 配置地铁线路图数据
var option = {
title: {
text: '地铁线路图'
},
tooltip: {},
legend: {
data:['地铁线路']
},
series: [{
name: '地铁线路',
type: 'lines',
coordinateSystem: 'geo',
polyline: true,
data: [{
coords: [[116.407394, 39.904211], [116.365868, 39.907761]]
}, {
coords: [[116.365868, 39.907761], [116.359153, 39.913807]]
}, {
coords: [[116.359153, 39.913807], [116.341395, 39.91196]]
}, {
coords: [[116.341395, 39.91196], [116.325797, 39.913052]]
}, {
coords: [[116.325797, 39.913052], [116.316176, 39.899296]]
}, {
coords: [[116.316176, 39.899296], [116.308558, 39.889223]]
}, {
coords: [[116.308558, 39.889223], [116.315357, 39.882791]]
}, {
coords: [[116.315357, 39.882791], [116.332734, 39.875231]]
}, {
coords: [[116.332734, 39.875231], [116.34322, 39.872462]]
}, {
coords: [[116.34322, 39.872462], [116.354134, 39.865412]]
}],
// 配置线条样式
itemStyle: {
color: '#ff0000',
borderWidth: 1,
borderColor: '#ffffff',
opacity: 0.6
},
// 配置线条上的文字
label: {
show: true,
position: 'middle',
formatter: '{b}',
fontSize: 16
}
}]
};
// 使用配置项显示地铁线路图
myChart.setOption(option);
</script>
</body>
</html>
```
通过以上代码,你可以创建一个简单的地铁线路图。你可以根据需要修改数据和样式,以创建适合你的地铁线路图。