Echart是目前前端图表展示比较流行的框架之一，官方提供了很多样示例，可以实现大多数的图表需求，但在日前的项目中，往往会有一些自定义的图表，如地铁交通图，显示站点人流等信息这种自定义的图表，就需要我们对echart进行自定义的开发，下面展示了如何利用线图实现地铁效果，上图：
要实现这种效果除了掌握echart 线图的配置，数据准备也是关键的一步，如何利用Js通过一张图取出每个点的坐标，就需要我们写一个取点的方法，通过鼠标事件自动取点，这个不是本文讨论的内容。
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1200px;height:700px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var line1 =
[
{point:[0,552] ,name:" 一号线 ",icon:"name",line:1,labelPosition:"right"},
{point:[104,552] ,name:" 十三号街 ",icon:"circle",line:1,labelPosition:"bottom"},
{point:[178,552] ,name:" 中央大街 ",icon:"circle",line:1,labelPosition:"top"},
{point:[246,552] ,name:" 七号街 ",icon:"circle",line:1,labelPosition:"bottom"},
{point:[307,552] ,name:" 四号街 ",icon:"circle",line:1,labelPosition:"bottom"},
{point:[337,580] ,name:" 张士 ",icon:"circle",line:1,labelPosition:"left"},
{point:[367,611] ,name:" 开发大道 ",icon:"circle",line:1,labelPosition:"right"},
{point:[367,645] ,name:" 于洪广场 ",icon:"circle",line:1,labelPosition:"left"},
{point:[369,679] ,name:" 迎宾路 ",icon:"circle",line:1,labelPosition:"top"},
{point:[436,679] ,name:" 重工街 ",icon:"circle",line:1,labelPosition:"bottom"},
{point:[504,679] ,name:" 启工街 ",icon:"circle",line:1,labelPosition:"top"},
{point:[572,679] ,name:" 保工街 ",icon:"circle",line:1,labelPosition:"bottom"},
{point:[635,679] ,name:" 铁西广场 ",icon:"jx",line:1,labelPosition:"top"},
{point:[711,679] ,name:" 云峰北街 ",icon:"circle",line:1,labelPosition:"top"},
{point:[779,679] ,name:" 沈阳站 ",icon:"circle",line:1,labelPosition:"bottom"},
{point:[847,679] ,name:" 太原街 ",icon:"circle",line:1,labelPosition:"top"},
{point:[916,679] ,name:" 南市场 ",icon:"circle",line:1,labelPosition:"bottom"},
{point:[984,679] ,name:" 青年大街 ",icon:"jx",line:1,labelPosition:"top"},
{point:[1066,679] ,name:" 怀远门 ",icon:"circle",line:1,labelPosition:"top"},
{point:[1143,679] ,name:" 中街 ",icon:"circle",line:1,labelPosition:"bottom"},
{point:[1221,679] ,name:" 东中街 ",icon:"circle",line:1,labelPosition:"bottom"},
{point:[1295,679] ,name:" 滂江街 ",icon:"jx",line:1,labelPosition:"top"},
{point:[1374,679] ,name:" 黎明广场 ",icon:"circle",line:1,labelPosition:"right"},
]
var line2 =
[
{point:[947,1632] ,name:" 二号线 ",icon:"name",line:2,labelPosition:"right"},
{point:[947,1532], name:"蒲田路 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1477], name:"蒲河路 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1424], name:"人杰湖公园 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1371], name:"辽宁大学 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1318], name:"航空航天大 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1263], name:"师范大学 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1210], name:"医学院 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1162], name:"三台子 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1110], name:"陵西 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1057], name:"新乐遗址 ",icon:"circle",line:2,labelPosition:"right"},
{point:[947,1006], name:"北陵公园 ",icon:"circle",line:2,labelPosition:"right"},
{point:[969,951] , name:"中医药大学 ",icon:"jx",line:2,labelPosition:"right"},
{point:[985,906] , name:"岐山路 ",icon:"circle",line:2,labelPosition:"right"},
{point:[985,847] , name:"沈阳北站 ",icon:"circle",line:2,labelPosition:"right"},
{point:[985,795] , name:"金融中心 ",icon:"circle",line:2,labelPosition:"right"},
{point:[985,735] , name:"市府广场 ",icon:"circle",line:2,labelPosition:"top"},
{point:[985,680] , name:"青年大街 ",icon:"jx",line:2,labelPosition:"right"},
{point:[985,631] , name:"青年公园 ",icon:"circle",line:2,labelPosition:"right"},
{point:[985,575] , name:"工业展览馆 ",icon:"circle",line:2,labelPosition:"right"},
{point:[985,501] , name:"市图书馆 ",icon:"circle",line:2,labelPosition:"right"},
{point:[1031,455], name:"五里河 ",icon:"circle",line:2,labelPosition:"right"},
{point:[1089,398], name:"奥体中心 ",icon:"jx",line:2,labelPosition:"right"},
{point:[1131,355], name:"营盘街 ",icon:"circle",line:2,labelPosition:"right"},
{point:[1171,315], name:"世纪大厦 ",icon:"circle",line:2,labelPosition:"left"},
{point:[1171,263], name:"白塔河路 ",icon:"circle",line:2,labelPosition:"right"},
{point:[1171,211], name:"全运路 ",icon:"circle",line:2,labelPosition:"bottom"},
]
var line10 =
[
{point:[399,1175] ,name:"十号线 ",icon:"name",line:10,labelPosition:"right"},
{point:[399,1075] ,name:"丁香湖 ",icon:"circle",line:10,labelPosition:"top"},
{point:[399,1003] ,name:"元江街 ",icon:"circle",line:10,labelPosition:"left"},
{point:[450,951] ,name:"向工街 ",icon:"circle",line:10,labelPosition:"bottom"},
{point:[503,951] ,name:"塔湾街 ",icon:"circle",line:10,labelPosition:"top"},
{point:[643,950] ,name:"淮河街沈医二院 ",icon:"jx",line:10,labelPosition:"bottom"},
{point:[763,951] ,name:"百鸟公园 ",icon:"circle",line:10,labelPosition:"bottom"},
{point:[866,951] ,name:"长江街 ",icon:"circle",line:10,labelPosition:"bottom"},
{point:[968,951] ,name:"中医药大学 ",icon:"jx",line:10,labelPosition:"bottom"},
{point:[1107,951] ,name:"陵东街 ",icon:"circle",line:10,labelPosition:"top"},
{point:[1214,951] ,name:"北塔 ",icon:"circle",line:10,labelPosition:"right"},
{point:[1297,868] ,name:"合作街 ",icon:"circle",line:10,labelPosition:"right"},
{point:[1297,782] ,name:"东北大马路 ",icon:"circle",line:10,labelPosition:"right"},
{point:[1297,680] ,name:"滂江街 ",icon:"jx",line:10,labelPosition:"right"},
{point:[1297,631] ,name:"长安路 ",icon:"circle",line:10,labelPosition:"right"},
{point:[1297,587] ,name:"万莲 ",icon:"circle",line:10,labelPosition:"right"},
{point:[1297,535] ,name:"泉园 ",icon:"circle",line:10,labelPosition:"right"},
{point:[1297,490] ,name:"江东街 ",icon:"circle",line:10,labelPosition:"right"},
{point:[1297,446] ,name:"长青桥 ",icon:"circle",line:10,labelPosition:"right"},
{point:[1344,400] ,name:"长青南街 ",icon:"jx",line:10,labelPosition:"right"},
{point:[1397,346] ,name:"理工大学 ",icon:"circle",line:10,labelPosition:"right"},
{point:[1397,267] ,name:"张沙布 ",icon:"circle",line:10,labelPosition:"bottom"},
]
var line9 =
[
{point:[642,1165] ,name:"九号线 ",icon:"name",line:9,labelPosition:"right"},
{point:[642,1065] ,name:"怒江公园 ",icon:"circle",line:9,labelPosition:"top"},
{point:[642,951] ,name:"淮河街沈医二院 ",icon:"jx",line:9,labelPosition:"top"},
{point:[642,880] ,name:"皇姑屯 ",icon:"circle",line:9,labelPosition:"right"},
{point:[642,813] ,name:"重型文化广场 ",icon:"circle",line:9,labelPosition:"right"},
{point:[642,746] ,name:"北二路 ",icon:"circle",line:9,labelPosition:"right"},
{point:[642,679] ,name:"铁西广场 ",icon:"jx",line:9,labelPosition:"right"},
{point:[642,629] ,name:"兴华公园 ",icon:"circle",line:9,labelPosition:"right"},
{point:[642,584] ,name:"沈辽路 ",icon:"circle",line:9,labelPosition:"right"},
{point:[611,551] ,name:"滑翔 ",icon:"circle",line:9,labelPosition:"right"},
{point:[576,519] ,name:"吉利湖街 ",icon:"circle",line:9,labelPosition:"left"},
{point:[576,459] ,name:"大通湖街 ",icon:"circle",line:9,labelPosition:"right"},
{point:[576,399] ,name:"曹仲 ",icon:"circle",line:9,labelPosition:"bottom"},
{point:[704,399] ,name:"浑河站 ",icon:"circle",line:9,labelPosition:"bottom"},
{point:[767,399] ,name:"胜利南街 ",icon:"circle",line:9,labelPosition:"top"},
{point:[830,399] ,name:"长白南 ",icon:"circle",line:9,labelPosition:"bottom"},
{point:[893,399] ,name:"榆树台 ",icon:"circle",line:9,labelPosition:"top"},
{point:[955,399] ,name:"金阳大街 ",icon:"circle",line:9,labelPosition:"bottom"},
{point:[1020,399] ,name:"彩霞街 ",icon:"circle",line:9,labelPosition:"top"},
{point:[1087,399] ,name:"奥体中心 ",icon:"jx",line:9,labelPosition:"bottom"},
{point:[1186,395] ,name:"天成街 ",icon:"circle",line:9,labelPosition:"top"},
{point:[1255,396] ,name:"朗日街 ",icon:"circle",line:9,labelPosition:"bottom"},
{point:[1347,398] ,name:"长青南街 ",icon:"jx",line:9,labelPosition:"bottom"},
{point:[1447,397] ,name:"建筑大学 ",icon:"circle",line:9,labelPosition:"right"},
]
var data = [];
var allPoint = line1.concat(line2).concat(line9).concat(line10)
var dataMap = {}
for(var i=0;i<allPoint.length;i++){
var item = allPoint[i]
if(dataMap[item.name.trim()])continue;
dataMap[item.name.trim()] = "1"
var c = item.line==1?"#FFFF00":(item.line==2?"#0066FF":(item.line==10?"#66009D":"#FFB7DD"))
data.push(
{
name: item.name.trim(),
tooltip: { formatter: "{b}" },
symbol: item.icon,
symbolSize: item.icon=="name"?[1,1]:[5+10*(item.icon=="jx"?1:0), 5+10*(item.icon=="jx"?1:0)],
value: [item.point[0]*0.6,item.point[1]*0.7],
fixed: true,
category: 1,
label: { color: "#000", position: item.labelPosition,textStyle:{fontSize:item.icon=="name"?12:8}},
itemStyle: {
normal: {
borderColor: '#f58f23',
borderWidth: 2,
color: item.icon?"#fff":new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: c }, { offset: 1, color: c } ])
}
}
}
);
}
var links = [];
for(var i=2;i<line1.length;i++){
var itemName = line1[i].name.trim()
var itempreName = line1[i-1].name.trim()
links.push({
source: itempreName,
target: itemName,
lineStyle: {
normal: {
color: "#7FFFD4",
}
}
})
}
for(var i=2;i<line2.length;i++){
var itemName = line2[i].name.trim()
var itempreName = line2[i-1].name.trim()
links.push({
source: itempreName,
target: itemName,
lineStyle: {
normal: {
color: "#7FFF00",
}
}
})
}
for(var i=2;i<line9.length;i++){
var itemName = line9[i].name.trim()
var itempreName = line9[i-1].name.trim()
links.push({
source: itempreName,
target: itemName,
lineStyle: {
normal: {
color: "#008B8B",
}
}
})
}
for(var i=2;i<line10.length;i++){
var itemName = line10[i].name.trim()
var itempreName = line10[i-1].name.trim()
links.push({
source: itempreName,
target: itemName,
lineStyle: {
normal: {
color: "#00BFFF",
}
}
})
}
var option = {
title: {
text: '沈阳地铁线路图',
textStyle: {
color: 'black',
fontSize: 20
},
x: 'center',
top: 10
},
//不设置背景颜色就是透明色
//backgroundColor: '#000',
xAxis: {
show: false,
min: 0,
max: 1200,
// type: "value",
//开启x轴坐标
axisPointer: {
show: false
},
},
yAxis: {
show: false,
min: 0,
max: 1200,
// type: "value",
//开启y轴坐标
axisPointer: {
show: false
},
},
tooltip: {},
// legend: {
// show: false
// },
series: [{
type: "graph",
zlevel: 5,
draggable: false,
coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
symbol: "rect",
symbolOffset: ["15%", 0],
label: {
normal: {
show: true
}
},
data: data,
links: links,
lineStyle: {
normal: {
opacity: 0.6, //线条透明度
color: "#53B5EA",
curveness: 0, //站点间连线曲度，0表示直线
width: 8 //线条宽度
}
}
}
]
};
if(option){
myChart.setOption(option);
}
</script>
</body>
</html>
