ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

时间:2021-02-15 22:41:26

ECharts

http://ecomfe.github.com/echarts

基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

———— 大数据时代,重新定义数据图表的时候到了

Architecture

ECharts (Enterprise Charts 商业产品图表库)

提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、地图、力导向布局图,同时支持任意维度的堆积和多图表混合展现。

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表(IE8- supported by excanvas )

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

特色

我们诚挚邀请你翻阅这份在线文档 《 Why ECharts ? 》 你可以从中更直观的体验到ECharts的特性以及快速浏览到所有图表类型。

*文档中展现的个别特性在IE8-中并没有得到支持,所以建议使用IE9+、chrome、safari、firefox或opear等高级浏览器阅读这份文档。


混搭

混搭的图表会更具表现力也更有有趣味,ECharts提供的图表(共7类11种)支持任意混搭:

折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、 饼图(环形图)、地图、力导布局图。

混搭情况下一个标准图表:包含唯一图例、工具箱、数据区域缩放、值域漫游模块,一个直角坐标系(可包含一条或多条类目轴线,一条或多条值轴线,最多上下左右四条)

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

拖拽重计算

拖拽重计算特性(专利)带来了数据统计图表从未有过的用户体验,允许用户对统计数据进行有效的提取、整合,甚至在多个图表间交换数据,赋予了用户对数据进行挖掘、整合的能力。

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

数据视图

如果你所呈现的数据足够让用户所关心,那么他们将不满足于查看可视化的图表,要去逐一迎合他们下载保存,数据分享,加工整合已有数据等等需求?

或许你只要给予一个“,”分隔的数据文本他们就懂了,这就是ECharts的数据视图!当然,你可以重载数据视图的输出方法,用你独特的方式去呈现数据。

如果你的用户足够的高端,你甚至可以打开数据视图的编辑功能,跟拖拽重计算相比,这可是批量的数据修改!

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

动态类型切换

很多图表类型本身所表现的能力是相似的,但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样,比如折线图和柱状图的选择总是让人头疼。

ECharts提供了动态类型切换,让用户随心所欲的切换到他所需要的图表类型。

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

图例开关

多系列数据的同时展现呈现出丰富内容,但如何让用户切换到他所关心的个别系列上?

ECharts提供了方便快捷的图例开关,可以随时切换到你所关心的数据系列。

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

数据区域选择

数据可以是无限的,但显示空间总是有限的,数据区域选择组件提供了大数据量中漫游的能力,让用户选择并呈现他所关心的数据区域。

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

值域漫游

基于坐标的图表(如地图、散点图)通过色彩变化表现数值的大小能直观形象的展示数据分布。

但如何聚焦到我所关心的数值上?我们创造了称为值域漫游的功能,让你可以轻松进行数值筛选。

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

大规模散点图

如何展现成千上百万的离散数据从而找出他们的分布和聚类?貌似除了用专业的统计工具(如MATLAB)外别无选择?

不,ECharts发明了基于像素的大规模散点图(专利),一个900 x 400的散点区域就能够毫不重复的呈现35万组数据,这对于常规的应用,用现代浏览器就足以轻松展现百万级的散点数据!

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

标线辅助

趋势线?平均线?未来走势?修正值?有需求用户自然知道用意~

提供标线辅助在K线图中可是必要的功能!是的,K线图我们正在开发中~

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

多维度堆积

支持多系列,多维度的数据堆积,配合自动伸缩的图形实体和直角坐标系,能呈现出更有内涵的统计图表~

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

个性化定制

近300个可配置选项结合多级控制设计满足高度定制的个性化需求。

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

事件交互

可以捕获的用户交互和数据变化事件实现图表与外界的联动。

ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表的更多相关文章

  1. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  2. 数据可视化图表ECharts

    介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...

  3. Python调用matplotlib实现交互式数据可视化图表案例

    交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...

  4. 基于Canvas的Char.js库使用

    Chart.js是基于Html5 Canvas的图表库. 官网:http://www.chartjs.org/ 參考文档:http://www.chartjs.org/docs/ 支持六种图表,相应源 ...

  5. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  6. 数据分析 | 数据可视化图表,BI工具构建逻辑

    本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...

  7. 📈📈📈📈📈iOS 图表框架 AAChartKit ---强大的高颜值数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图

    English Document

  8. 基于html5 Canvas图表库 : ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

  9. ECharts JavaScript图表库 ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

随机推荐

  1. ACM/ICPC 之 网络流入门-EK算法(参考模板)(POJ1273)

    基于残留网络与FF算法的改进-EK算法,核心是将一条边的单向残留容量的减少看做反向残留流量的增加. //网络流 //EK算法 //Time:16Ms Memory:348K #include<i ...

  2. Scalaz(45)- concurrency :Task-函数式多线程编程核心配件

    我们在上一节讨论了scalaz Future,我们说它是一个不完善的类型,最起码没有完整的异常处理机制,只能用在构建类库之类的内部环境.如果scalaz在Future类定义中增加异常处理工具的话,用户 ...

  3. JS对于数据常见操作

    var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; $.each(_mozi,function(key,val){//先key 后值 循环 console.log(ke ...

  4. Angular1&period;x组件通讯方式总结

    Angular1开发模式 这里需要将Angular1分为Angular1.5之前和Angular1.5两个不同的阶段来讲,两者虽然同属Angular1,但是在开发模式上还是有较大区别的.在Angula ...

  5. 书籍推荐 《移动Web手册》 奇舞团

    书籍推荐  <移动Web手册> 奇舞团

  6. hdu 4508 湫湫系列故事——减肥记I(完全背包)

    题意:完全背包 思路:完全背包 可以直接转化为 多重背包,num[i]=_v/c[i];//转为多重背包然后运用 多重背包 3种解法如下码1: #include<iostream> #in ...

  7. php基础知识【函数】(3)字符串string

    一.大小写转换 1.strtolower()--转换为小写. echo strtolower("Hello WORLD!"); //hello world! 2.strtouppe ...

  8. Mybatis一对多查询得不到多方结果

    一对多查询:一个年级对应多个学生,现在要查询年级(带学生)信息. 查询结果: [main] INFO com.java1234.service.GradeTest - 查询年级(带学生)[main] ...

  9. python websocket学习使用

    前言 今天看了一些资料,记录一下心得. websocket是html5引入的一个新特性,传统的web应用是通过http协议来提供支持,如果要实时同步传输数据,需要轮询,效率低下 websocket是类 ...

  10. CF div2 D BFS

    http://codeforces.com/contest/676/problem/D 题目大意: 勇者去迷宫杀恶龙.迷宫是有n*m的方格子组成的.迷宫上有各种记号,这些记号表达着能走的方向.当且仅当 ...