ECharts.js 制作 时间轴 图表

ECharts

百度 (中文) : http://echarts.baidu.com
在线视频教程：http://study.163.com/course/courseMain.htm?courseId=1016007
Why ECharts (中文) : http://echarts.baidu.com/doc/slide/whyEcharts.html
Github pages (English) : http://ecomfe.github.io/echarts/index-en.html
Why ECharts (English) : http://ecomfe.github.io/echarts/doc/slide/whyEcharts-en.html
基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
ECharts (Enterprise Charts 商业产品图表库)
提供商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、和弦图以及力导向布局图，同时支持任意维度的堆积和多图表混合展现。
(IE8- supported by excanvas )

 
正文:
制作一个时间轴的图标,基于echarts.js的不等距折线图:参照demo:http://echarts.baidu.com/doc/example/line8.html
核心代码:
 
图中所用的是测试数据,采用的new Date生成的随机数,用来模拟图表.然而一般从台传输过来的数据一般都是时间戳或者是其他时间类型的字符串.可以采用如下方式
 

通过后台传入过来的json字符串,然后前台进行数据的处理,处理成一个时间对象的元素.
这样就能保证数据能够识别time类型的了.

Posted in JavaScript Tagged with: echarts.js, 图表, 时间轴