ECharts 特性介绍

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

丰富的图表类型

ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。

多个坐标系的支持

ECharts 3 开始独立出了“坐标系”的概念,支持了直角坐标系(catesian,同 grid)、极坐标系(polar)、地理坐标系(geo)。图表可以跨坐标系存在,例如折、柱、散点等图可以放在直角坐标系上,也可以放在极坐标系上, 甚至可以放在地理坐标系中。

下面是一个折线图在极坐标系上的例子:

下面是一个散点图在地理坐标系上的例子:

移动端的优化

流量珍贵的移动端需要图表库的体积尽量小。ECharts 和 ZRender 代码的重构,带来了核心部分体积的减小。ECharts 组件众多,并且后面会持续增加,我们提供了更细粒度的按需打包能力。最小体积缩小为 ECharts 2 的 40%。

移动端交互也做了优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移,如下图:

深度的交互式数据探索

交互是从数据中发掘信息的重要手段。总览为先 缩放过滤 按需查看细节是数据可视化交互的基本需求。

ECharts 一直在“交互”的路上前进,legend visualMap dataZoom tooltip等组件以及图表附带的漫游,选取等操作提供了数据筛取、视图缩放、展示细节等能力。

ECharts 3 中,对这些组件进行了广泛增强,例如支持在数据的各种坐标轴、维度进行数据过滤、缩放,以及在更多的图中采用这些组件。比如下面这个例子

大数据量的展现

借助 Canvas 的能力,ECharts 在散点图中能够轻松展现上万甚至上十万的数据。

下面的微博签到图中就展现了 100k+ 的签到数据。

多维数据的支持以及丰富的视觉编码手段

ECharts 3 开始加强了对多维数据的支持,除了加入了平行坐标等常见的多维数据可视化工具外,对于传统的散点图等,传入的数据也可以是多个维度的,配合视觉映射组件 visualMap 提供的丰富的视觉编码,能够将不同维度的数据映射到颜色,大小,透明度,明暗度等不同的视觉通道。

动态数据

ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单,只需要获取数据,填入数据,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 timeline 组件能够在更高的时间维度上去表现数据的信息。

绚丽的特效

ECharts 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。

报表工具-ECharts 特性介绍的更多相关文章

  1. 使用FastReport报表工具生成报表PDF文档

    在我们开发某个系统的时候,客户总会提出一些特定的报表需求,固定的报表格式符合他们的业务处理需要,也贴合他们的工作场景,因此我们尽可能做出符合他们实际需要的报表,这样我们的系统会得到更好的认同感.本篇随 ...

  2. highreport报表工具功能介绍

    目前国产报表工具大部分都是Java版本,例如润乾和帆软,而C#写的报表工具国内还没有,介绍一款VS2010(C#)写的国产报表工具(highreport),采用类Excel设计,零代码实现复杂报表展示 ...

  3. 设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)

    EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

  4. 7 款顶级开源 BI(商务智能)软件和报表工具

    在这个信息化时代,每分每秒都产生海量数据.在海量数据中,挖掘出有用的数据,并且能以较人性化.直观的方式展示这些数据,变得尤为重要.本文将介绍 7款顶级开源 BI(商务智能)软件和报表工具,用于商业数据 ...

  5. 使用FastReport报表工具生成图片格式文档

    之前我在随笔<使用FastReport报表工具生成报表PDF文档>介绍过使用FastReport.Net来根据报表模板进行生成PDF,以及随笔<使用FastReport报表工具生成标 ...

  6. GrapeCity Documents for Excel 文档API组件 V2.2 新特性介绍

    GrapeCity Documents for Excel 文档API组件 V2.2 正式发布,本次新版本包含诸多重量级产品功能,如:将带有形状的电子表格导出为 PDF.控制分页和电子表格内容.将Ex ...

  7. 2021顶级的开源 BI(商业智能)软件和报表工具

    在这个信息化时代,每分每秒都产生海量数据.在海量数据中,挖掘出有用的数据,并且能以较人性化.直观的方式展示这些数据,变得尤为重要.本文将介绍5款顶级开源 BI(商务智能)软件和报表工具,用于商业数据的 ...

  8. 作为报表工具,Excel移动报表的优势和劣势

    Excel是应用最广泛的报表工具,它集数据存储.数据处理.数据分析于一身,广泛应用于各行各业的日常工作中(无论这个企业的信息化程度有多高.多低).而且随着Office365的普及,软件License的 ...

  9. Xamarin Anroid开发教程之Anroid开发工具及应用介绍

    Xamarin Anroid开发教程之Anroid开发工具及应用介绍 Xamarin开发Anroid应用介绍 如今智能手机已经盛行了好几年,而针对这些智能手机的软件开发也变得异常火热.但是在Andro ...

随机推荐

  1. Proxmox VE中出现TASK ERROR: command 'apt-get update' failed: exit code 100的解决方法

    问题描述: 出现这个错误一般在WEB或者在Proxmox VE的服务器上面能看到日志: PVE中出现TASK ERROR: command 'apt-get update' failed: exit ...

  2. 文件比较命令(comp)

    comp命令: // 描述: 逐字节比较两个文件或文件集的内容. 如果在没有参数的情况下使用,comp会提示你输入要比较的文件. // 语法: comp [<Data1>] [<Da ...

  3. SQLServer之触发器简介

    触发器定义 触发器是数据库服务器中发生事件时自动执行的一种特殊存储过程.SQLServer允许为任何特定语句创建多个触发器.它的执行不是由程序调用,也不是手工启动,而是由事件来触发,当对数据库进行操作 ...

  4. Too many open files问题解决

    项目运行过程出现如下问题 经查询,找出原因,并进行解决 具体原因如下: too many open files(打开的文件过多)是Linux系统中常见的错误,从字面意思上看就是说程序打开的文件数过多, ...

  5. 第一本Docker书读书笔记

    日常使用命令 1.停止所有的container,这样才能够删除其中的images: docker stop $(docker ps -a -q) 如果想要删除所有container的话再加一个指令: ...

  6. Linux内核入门到放弃-模块-《深入Linux内核架构》笔记

    使用模块 依赖关系 modutils标准工具集中的depmod工具可用于计算系统的各个模块之间的依赖关系.每次系统启动时或新模块安装后,通常都会运行该程序.找到的依赖关系保存在一个列表中.默认情况下, ...

  7. multiset的erase()操作中出现跳过元素的问题

    昨天,我写了一个multiset去重,让tt指向it的后面第一个元素,若重复则删除这2个元素,并令it=tt,it++:来使it指向tt的下一个元素(我想指向原it的后面第2个元素,并认为tt的下一个 ...

  8. DependencyInjection源码解读之ServiceProvider

    var services = new ServiceCollection(); var _serviceProvider = services.BuildServiceProvider(); serv ...

  9. OSGI插件(plugin)web工程建设步骤

     所有资源下载(汇总) 底包的下载地址:https://pan.baidu.com/s/15JxHOHf0AyZaLKPJUkpeXA 提取码: bujz web-target.war下载地址: ht ...

  10. 常见的页面中两个div自适应等高CSS控制

    第一种利用dispaly:table,父级div设置dispaly:table子级div设置display: table-cell; 第一种利用dispaly:flex,父级div设置dispaly: ...