echarts 时间曲线图_echarts.js 曲线图

前言 前两天在 echarts 上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo，地铁线路上的点是在网上随便下载了一个，这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现，希望能够帮到一些朋友。当然，如果有什么意见的可以直接跟我说，大家一起交流才会进步。

效果图

地图稍微内容有点多，要全部展示，字显得有点小了，但是没关系，可以按照需求放大缩小，字体和绘制的内容并不会失真，毕竟都是用矢量绘制的~

界面生成 底层的 div 是通过 ht.graph.GraphView 组件生成的，然后就可以利用 HT for Web 提供好的方法，调用 canvas 画笔随便绘制就好，先来看看怎么生成底层 div：

var dm = new ht.DataModel();//数据容器

var gv = new ht.graph.GraphView(dm);//拓扑组件

gv.addToDOM();//将拓扑图组件添加进body中

addToDOM 函数声明如下：

addToDOM = function(){

var self = this,

view = self.getView(),

style = view.style;

document.body.appendChild(view); //将组件底层div添加到body中

style.left = '0';//默认组件是绝对定位，所以要设置位置

style.right = '0';

style.top = '0';

style.bottom = '0';

window.addEventListener('resize', function () { self.iv(); }, false); //窗口变化事件

}

现在我就可以在这个 div 上乱涂乱画了~首先我获取下载好的地铁线路图上的点，我将它们放在 subway.js 中，这个 js 文件全部都是下载的内容，我没有做其他的改