菜单 搜索
首页 前端知识 Javascript 之 Echart 实现沈阳地铁图

Javascript 之 Echart 实现沈阳地铁图

2024-06-01 10:06:29 前端知识 前端哥 448 52 我要收藏

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>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/10374.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！