Apache ECharts 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Apache ECharts 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Apache ECharts 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Apache ECharts 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Apache ECharts 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

Apache ECharts 是一款基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5,我们着力加强了图表的叙事能力,让开发者可以以更简单的方式,讲述数据背后的故事。

“表·达”是 Apache ECharts 5 的核心,通过五大模块、十五项特性的全面升级,围绕可视化作品的叙事表达能力,让图“表”更能传“达”数据背后的故事,帮助开发者更轻松地创造满足各种场景需求的可视化作品。

动态叙事

动画对于人类认知的重要性不言而喻。在之前的作品中,我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系,让图表的出现和变换显得不那么生硬。这次,我们更是大幅度增强了我们的动画叙事能力,。希望能够进一步发挥动画对于用户认知的帮助作用,借助图表的动态叙事功能,帮助用户更容易理解图表背后表达的故事。

动态排序图

Apache ECharts 5 新增支持动态排序柱状图(bar-racing)以及动态排序折线图(line-racing),帮助开发者方便地创建带有时序性的图表,展现数据随在时间维度上的变化,讲述数据的演变过程。

动态排序图展现了不同的类目随着时间衍变在排名上的改变。而开发者只需要通过几行简单的配置项在 ECharts 中开启这样的效果。

自定义系列动画

除了动态排序图,Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果,支持标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画。

想象一下,用这些动态效果,你可以创造出多么令人称奇的可视化作品!

视觉设计

视觉设计的作用并不仅仅是为了让图表更好看,更重要的是,符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容,并且尽可能消除不良设计带来的误解。

默认设计

我们发现,有很大一部分开发者使用了 ECharts 默认的主题样式,因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts 5 中,我们重新设计了默认的主题样式,针对不同的系列和组件分别做了优化调整。以主题色为例,我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素,并且确保色觉辨识障碍人士也能清楚地区分数据。

我们以最常用的柱状图为例,来看看新版本浅色主题和深色主题的样式:

对于有进一步需要高对比度的场景,我们额外提供了高对比度主题样式,开发者可以方便地为需要特殊帮助的人群提供特殊的样式。

对于 dataZoom,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:

标签

标签是图表中的核心元素之一,清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能,让密集的标签能清晰显示、准确表意。

Apache ECharts 5 可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签,可以选择自动截断或者换行。密集的饼图标签,现在有了更美观的自动排布。

这些功能可以帮助避免文字过于密集影响可读性。并且,无需开发者编写额外的代码就能默认生效,大大简化了开发者的开发成本。

我们也提供了多个配置项来让开发者主动控制标签的布局策略,例如标签拖动、整体显示在画布边缘,用引导线和图形元素连接,并且仍可联动高亮表达关联关系。

新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示:

 

时间轴

Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息,并且提供了更灵活的定制化能力,让开发者根据不同的需求定制时间轴的标签内容。

首先,时间轴不再如之前般绝对平均分割,而是选取年、月、日、整点这类更有意义的点来展示,并且能同时显示不同层级的刻度。标签的 formatter 支持了时间模版(例如 {yyyy}-{MM}-{dd}),并且可以为不同时间粒度的标签指定不同的 formatter,结合已有的富文本标签,可以定制出醒目而多样的时间效果。

不同的 dataZoom 粒度下时间刻度的显示:

提示框

提示框(Tooltip)是一种最常用的可视化组件,可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中,我们对提示框的样式进行了优化,通过对字体样式,颜色的调整,新增加箭头,跟随图形颜色的边框色等功能,让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑,确保显示效果与 HTML 方式一致,让用户在不同场景下可以选择不同的技术方案实现同样的效果。

 

除此之外,我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。

仪表盘

我们看到社区用户创建了很多酷炫的仪表盘图表,但是他们的配置方式往往比较复杂而取巧。因此,我们对仪表盘的功能作了全面升级,支持了图片或者矢量路径绘制指针、也支持了锚点(anchor)配置项、进度条(progress)、圆角效果等等配置项。

不同样式的仪表盘指针:

这些升级,不仅可以让开发者用更简单的配置项实现酷炫的效果,而且带来了更丰富的定制能力。

扇形圆角

圆角可以带来更美观而柔和的视觉,也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项,合理地搭配其他的效果,就可以形成更具个性的的可视化作品。

交互能力

可视化作品的交互能力帮助用户探索了解作品,加深对于图表主旨的理解。

状态管理

在 ECharts 4 中有高亮(emphasis)和普通(normal)两个交互的状态,在鼠标移到图形上的时候会进入高亮状态以区分该数据,开发者可以分别设置这两个状态的颜色,阴影等样式。

这次在 Apache ECharts 5 中,我们在原先的鼠标 hover 高亮的基础上,新增加了淡出其它非相关元素的效果,从而可以达到聚焦目标数据的目的。

比如在这个柱状图的例子中,鼠标移到一个系列上的时候,其它非相关的系列就会淡出,从而可以更清晰的突出聚焦系列中数据的对比。在关系图,树图,旭日图,桑基等更复杂数据结构的图上,也可以通过淡出非相关元素来观察数据之间的联系。而且颜色,阴影等在高亮(emphasis)中可以设置的样式,现在也可以在淡出(blur)状态中设置了。

除此之外,我们为所有系列还添加了点击选中这个之前只有在饼图、地图等少数系列中才能开启的交互,开发者可以设置为单选或多选模式,并且通过监听 selectchanged 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样,选中的样式也可以在 select 中配置。

性能提升

脏矩形渲染

Apache ECharts 5 新支持了脏矩形渲染,解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时,脏矩形渲染技术探测并只更新视图变化的部分,而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率,例如在图形很多时候,鼠标频繁触发一些图形高亮的场景。以往这类场景,会使用额外的 Canvas 层以优化性能,但是这种方式不是所有场景都通用,而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。

脏矩形的可视化演示,红色框选部分为该帧重绘区域:

大家在新的示例页面选择开启脏矩形优化就可以看到该效果。

实时时序数据的折线图性能优化

除此之外,海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求,这些数据可能需要几百或者几十毫秒更新一次。

Apache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化,使得百万量级的数据也能做到实时的更新(每次更新耗时少于 30ms),甚至对于千万级的数据,也可以在 1s 内渲染完,并且保持很小的内存占用以及流畅的提示框(tooltip)等交互。

开发体验

我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用,因而开发者的开发体验也是我们非常关注的方面。

数据集

ECharts 5 加强了数据集的数据转换能力,让开发者可以使用简单的方式实现常用的数据处理,如:数据过滤(filter)、排序(sort)、聚合(aggregate)、直方图(histogram)、简单聚类(clustering)、回归线计算(regression)等。开发者可以用统一的声明式方式来使用这些功能,可以方便地实现常用的数据操作。

国际化

ECharts 原有的国际化方案,采用的是根据不同的语言参数打包出不同的部署文件的形式。​这种方式,使动态的语言和静态的代码包绑定在一起,使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。

因此,从 Apache ECharts 5 开始,动态的语言包和静态的代码包分离开。切换语言的时候,只需要加载相应语言包​,通过类似挂载主题的方式,使用 registerLocale 函数挂载语言包对象​,重新初始化后就完成了语言的切换​。

// import the lang object and set when init​
echarts.registerLocale('DE', lang);​
echarts.init(DomElement, null, {​
   locale: 'DE'​
});

TypeScript 重构

在近 8 年的时间里,Apache ECharts 已经发展成一个非常复杂的可视化库了,为了后续可以更安全高效的进行重构和新功能的开发,我们在 Apache ECharts 5 的开发之初,使用 TypeScript 对代码进行了重写,TypeScript 所带来的强类型让我们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。

对于开发者,我们也可以从 TypeScript 代码直接生成更好更符合代码的DTS类型描述文件。在此之前,ECharts 的类型描述文件一直是由社区开发者帮我们维护并发布到DefinityTyped,这个有着不小的工作量,非常感谢大家的贡献。

除此之外,如果开发者的组件是按需引入的,我们还提供了一个 ComposeOption 类型方法,可以组合出一个只包含了引入组件的配置项类型,可以带来更严格的类型检查,帮助你提前检测到未引入的组件类型。

可访问性

Apache ECharts 一直非常重视无障碍设计,我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点,因而有利于让开发者更愿意为视觉障碍人士提供支持。

在上一个大版本中,我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能,帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5 中,我们也做了更多提高可访问性的设计,帮助视觉障碍人士更好地理解图表内容。

主题配色

我们在设计新版默认主题样式的时候,将无障碍设计作为一个重要的考量依据,对颜色的明度和色值都进行反复测试,帮助视觉辨识障碍用户清楚地识别图表数据。​

并且,针对有更进一步无障碍需求的开发者,我们还提供了特殊的高对比度主题,以更高对比度颜色的主题将数据作进一步区分。

贴花图案

ECharts 5 还新增提供了贴花的功能,用图案辅助颜色表达,进一步帮助用户区分数据。

此外,贴花图案还能在一些其他的场景下提供帮助,比如:在报纸、书籍之类只有单色或者非常少的颜色的印刷品中,帮助更好地区分数据;用图形元素方便用户对数据产生更直观的理解等。

小结

除了以上介绍的功能,Apache ECharts 还在非常多的细节中做了改进,帮助开发者更轻松地创建默认好用、配置灵活的图表,用图表讲述数据背后的故事。

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (161)

加载中
打分: 力荐
从2就用到现在了,感谢开源。
02/05 13:39
回复
举报
两年前还是在echart3的,现在已经升级到echart5了。
02/03 15:24
回复
举报
突然感觉百度牛掰了很多
2020/10/29 00:41
回复
举报
LMlm
2020/05/09 00:14
回复
举报
这个开源颠覆了我对JavaScript的认知!太强大了!!
2020/03/18 09:51
回复
举报
最早使用的 图表,很不错
2019/12/03 17:37
回复
举报
最后一票,虽然只是偶尔用到过,不过挺好用的,给人顺滑的感觉
2019/11/29 16:43
回复
举报
已投,感谢, 目前使用在 开源字符云监控系统上: https://gitee.com/xrkmonitorcom/open
2019/11/27 20:42
回复
举报
因为你一个后端居然爱上了前端
2019/11/26 17:41
回复
举报
2019/11/21 15:39
回复
举报
更多评论
发表于开源治理专区
01/26 23:00

Apache ECharts 顺利毕业,成为 ASF 顶级项目

1 月 26 日晚,Apache 基金会官方宣布 ECharts 项目正式毕业,成为 Apache 顶级项目。 ECharts 是一款基于 JavaScript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts 最初由百度团队开源,并于 2018 年初捐赠给 Apache 基金会,成为 ASF 孵化级项目。 据 ECharts 团队透露,经过两年多的孵化,ECharts 的开发者用户数量增长了 10 倍,在 GitHub 上的 star 数量翻了一倍,目前为 44.5k,并...

30
22
发表于大前端专区
01/19 07:13

ECharts 5.0.1 发布,JavaScript 实现的交互式图表可视化库

Apache ECharts (incubating) 5.0.1 已发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 此次更新的主要内容包括: [Feature] 可使用更好的 API 获得最小的导入 #13890 (pissang) [Fix] [tooltip] 修复 markPoint 的工具提...

6
5
发表于大前端专区
2020/08/31 07:57

ECharts 4.9.0 发布,JavaScript 实现的交互式图表可视化库

Apache ECharts (incubating) 4.9.0 已发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 此版本主要更新内容: [Feature] [graph] 支持使用多边来连接图形中的节点 #12590 (wf123537200) [Feature] [funnel] 在 funnel 中...

6
5
发表于大前端专区
2020/05/26 14:51

ECharts 4.8.0 发布

Apache ECharts (incubating) 于 2020.05.25 正式发布 4.8.0 版本。 https://github.com/apache/incubator-echarts/releases/tag/4.8.0s/releases/tag/4.8.0 我们修复了半个像素的 bug! 由于实际绘制的位置不是整数,导致两个绘制的图形直接存在小于 1 像素的间隙,会错误地得到这样的热力图效果—— 在 4.8.0 版本中,这一 bug 在 #12342 得到了修复。类似地,#12393 修复了一个同样是像素小数点引起的 clipPath 的问题。 小伙...

13
11
发表于大前端专区
2020/05/26 07:34

ECharts 4.8.0 发布,JavaScript 数据可视化图表库

ECharts 4.8.0 已发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 此版本主要更新内容包括: [Feature] [toolbox] 使用 SVG 渲染模式时,支持在工具箱中下载 SVG 文件 [Feature] 在加载效果中添加更多参数 [Feature] symbolRotate 支持回调 [Feature] [geo...

3
3
发表于大前端专区
2020/03/24 10:17

ECharts 发布第 100 个版本 4.7.0

最新,ECharts 发布了在 GitHub 上的第 100 个版本! 柱状图柱条的背景色 曾经,很多有「为柱状图的柱条添加背景色」需求的小伙伴,都是通过添加一个额外的系列挪到底下来解决的。 这样的方法写起来很麻烦,而且如果不是精通 ECharts 的用户,一般很难想到这样的解决方案。由于这样的需求提得比较多,所以在 v4.7.0 版本中,我们支持了背景色的配置项,通过 showBackground 一键开启。如果需要配置样式,可以通过 backgroundSt...

13
12
发表于大前端专区
2019/02/26 07:22

ECharts 4.2.1-rc2 发布, 基于 JS 的开源可视化库

ECharts 4.2.1-rc2 已发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 主要更新内容如下: 修正了许可生命。 修复了富文本 boundingRect 的 Bug。 更新说明 下载地址: Source code(zip) Source code(tar.gz)...

6
9
发表于大前端专区
2019/01/25 07:11

ECharts 4.2.1-rc1 正式发布, 基于 JS 的开源可视化库

ECharts 4.2.1-rc1 已发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 主要更新内容如下: 修复文本缓存问题. See #9190, #9597, #9762. 修复在某些情况下,-resetOption在事件处理程序中抛出错误 #9649. 修复地...

4
4
发表于大前端专区
2018/09/19 14:07

ECharts 4.2.0-rc.1 发布,基于 JS 的开源可视化库

ECharts 4.2.0.rc1 已发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 更新内容: [Feature] 支持了 non-html tooltip,在一些不支持 HTML 的环境中,会有用。如微信小程序中。使用 tooltip.renderMode 开启这个...

0
7
发表于大前端专区
2018/08/06 08:08

ECharts 4.1.0 正式发布, 基于 JS 的开源可视化库

ECharts 4.1.0 已发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 主要更新内容如下: 功能 为树系列添加从右到左,从下到上的树方向。 #7351 #7154 支持节点拖动 sankey 图表。 增强 以渐进模式增强采样性能。 ...

6
10
发表于大前端专区
2018/05/03 07:26

ECharts 4.1.0.rc2 发布, 基于 JS 的开源可视化库

ECharts 4.1.0.rc2 发布,ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 更新信息如下: 启用烛台和条形图渲染并缩放大量数据(200K)。添加选项 series-candlestick.progressiveChunkMode 可在渐进渲染时增强效果。...

0
10
发表于大前端专区
2018/04/29 06:44

ECharts 4.1.0.rc1 发布,基于 JS 的开源可视化库

ECharts 4.1.0.rc1 发布,带来一些性能提升和 bug 修复。 更新内容包括: 在大量数据(200K)的情况下启用烛状和条形图渲染并缩放 为树形图添加缩放和拖动交互 在折线图中,使用类别轴时增强符号显示策略 修复在微信 App 中输入数组的错误用法 …… 详情见发布公告。 ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),...

1
7
发表于大前端专区
2018/03/08 11:22

全票通过!百度开源项目 ECharts 首进 Apache 孵化器

近日,全球著名开源社区 Apache 基金会宣布“百度开源的 ECharts 项目全票通过进入 Apache 孵化器”。这是百度第一个进入国际顶级开源社区的项目,也标志着百度开源正式进入开源发展的快车道。 ECharts 成为 Apache 孵化器项目之前,已经是国内可视化生态领域的领军者,近年内连续被开源中国评选为“年度最受欢迎的中国开源软件”,并广泛被各行业企业以及事业单位、科研院所应用。涉及行业包含金融、教育、医疗、物流、气候监测...

60
14
发表于大前端专区
2018/03/01 08:10

ECharts 4.0.4 发布,修正柱状图布局的问题

ECharts 4.0.4 已发布,这是一个小的 bug 修复版本: 修正柱状图布局的问题。参见 #7831。 ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 ECharts 4.0 带来了许多“黑科技”: 千万级数据可视化渲染能力 SVG + Canv...

3
4
发表于大前端专区
2018/02/27 15:18

ECharts 4.0.3 发布,可以在微信小程序中使用了

ECharts 4.0.3 已发布,更新如下: [+] ECharts 可以在微信小程序中使用了。我们接到了很多微信小程序开发者的反馈,表示他们强烈需要像 ECharts 这样的可视化工具。但是微信小程序是不支持 DOM 操作的,Canvas 接口也和浏览器不尽相同。因此,我们和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式,快速开发图表,满足各种可视化需求。参见 教程。 [+] 优化折线图平滑算法....

25
35
发表于大前端专区
2018/01/18 07:51

ECharts v4.0.2 发布:修复了用户反馈的三个问题

ECharts 4.0 大版本今日发布了一个小的更新,主要是修复了一些用户反馈的问题。具体如下: 修复了可滚动图例(legend.type: 'scroll')导致重影的问题。参见 #7502。 修复了 饼图(pie) 中数据项设置 selected 无效的问题。参见 #7515。 修复了 时间线播放组件的播放按钮 不能隐去的问题。参见 #7506。 2018 年 1 月 16 日,百度EFE团队正式发布了旗下知名开源产品 ECharts 的最新大版本 4.0,新版本在产品的性能、功能、易用性...

5
4
发表于大前端专区
2018/01/16 12:59

ECharts 大版本 4.0 正式发布:带来 8 项全新“黑科技”特性

2018 年 1 月 16 日,百度EFE团队正式发布了旗下知名开源产品 ECharts 的最新大版本 4.0,新版本在产品的性能、功能、易用性等各个方面进行了全面提升。 ECharts 4.0 最大的亮点是带来了 8 项堪称“黑科技”的全新特性: 千万级数据可视化的无阻塞体验 图表界第一个双引擎发动机,首创同时使用 Canvas 与 SVG,支持 SVG 渲染,可自由切换,内存占用更少 新增旭日图,为多层数据带来更酷的展现方式 数据与样式分离让数据传入变得...

55
66
发表了资讯
2017/11/09 15:07

ECharts v3.8:树图、SVG 渲染(beta)、ES Module

ECharts v3.8 发布了,ECharts 是一款由百度前端技术部开发的,基于 Javascript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。 提供大量常用的数据可视化图表,底层基于 ZRender(一个全新的轻量级 canvas 类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图,同...

4
33
发表了资讯
2017/09/02 03:53

ECharts v3.7.1 发布:改善了 K 线图边界模糊的问题

ECharts v3.7.1 已发布,更新如下: [+] axis.min, axis.max 支持了设置函数。参见 #6465。 [^] 修复了 textStyle 相关兼容性和 emphasis style 问题,参见 #6491、#6529、#6516、#6532、#6237。 [^] 改善了 K线图 边界模糊的问题。 [^] 修复了关系图在 focusNodeAdjacency 状态下不能采用 emphasis style 的问题。 更多的升级信息,参见 changelog。 下载地址 Source code (zip) Source code (tar.gz) http://echarts.baidu.co...

1
14
发表了资讯
2017/08/22 15:59

ECharts v3.7 发布:增加富文本标签、可滚动图例

在 ECharts 新发布的 3.7 版本 中,广泛地增加了标签的表现力。可以支持定制文本块的样式,也支持对文本片段应用特定的样式,如设置颜色、大小、背景、图片、对齐方式等,从而可以做出丰富的效果。另外增加了可滚动的图例,从而对图例过多显示不下的问题,提供了一种解决方案。 富文本标签 原先 echarts 中的文本标签,只能对整块统一进行样式设置,并且仅仅支持颜色和字体的设置,从而导致不易于制作表达能力更强的文字描述信息...

6
32
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2013/11/19 15:37

[ECharts] ECharts

加入ECharts文件: 引入模块加载器 <script src="../ECharts/js/esl.js"></script> 为模块加载器配置echarts的路径:             require.config({      paths:{      echarts:'./../ECharts/js/echarts',      'echarts/chart/bar' : './../ECharts/js/echarts',      'echarts/chart/line': './../ECharts/js/echarts'      }      }); 创建chart,将统计表格数据加入Chart...

0
2
发表了博客
2018/04/19 21:23

Echarts

如果Echarts是通过单标签引入,那么就没必要用require(),直接用名称即可 <script src="js/echarts.min.js"></script> //单标签引入 <script> var echart = require('echarts'); //非单标签引用时使用 var echart = echarts; //单标签引用时直接使用名字 </script> Echarts需要放在一个有宽高的容器中,然后在容器中初始化Echarts js代码要放在加载事件中或者要初始化的容器之后,否则找不到容器 <div id="zhuxi...

0
0
发表于大前端专区
2017/10/27 22:47

ECharts

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

0
0
发表于大前端专区
2015/08/20 16:39

echarts

echarts百度扩展 http://developer.baidu.com/map/jsdemo.htm#c1_13

0
0
发表了博客
2018/05/11 14:26

echarts

一、准备   1. echarts-3.3.2.min.js   2. jquery.1.11.1.min.js 二、圆角加多渐变条形(ie8+)统计图 function barChart(id,data1,data2) { var colorShow = [ [ {offset: 0, color: '#FDD841'}, {offset: 0.5, color: '#FAB84B'}, {offset: 1, color: '#F79E55'} ], [ ...

0
0
发表了博客
2019/03/13 21:05

echarts

echarts $ npm i -S echarts https://echarts.baidu.com/tutorial.html https://www.echartsjs.com/api.html#echarts 工具栏 Toolbox https://echarts.baidu.com/builder.html https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/example/bar1.html https://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts3 pie https://www.echartsjs.com/examples/editor...

0
0
发表了博客
2019/02/26 21:26

ECharts (mark)

首页 文档 下载 实例 社区 工具 关于 2.0 EN ECharts 特性 特性 丰富的可视化类型 多种数据格式无需转换直接使用 千万数据的前端展现 移动端优化 多渲染方案,跨平台使用! 深度的交互式数据探索 多维数据的支持以及丰富的视觉编码手段 动态数据 绚丽的特效 通过 GL 实现更多更强大绚丽的三维可视化 无障碍访问(4.0+) ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2016/06/10 19:40

Echart中折线图怎样获得鼠标所在横坐标的位置啊?

放图吧...

5
0
发表了问答
2015/02/05 18:15

echarts 手机端的闪退

@Kener-林峰 你好,想跟你请教个问题:您好。。我想问一下 我使用echarts时在手机端会出现一只闪退的现象 这是为什么?该怎么解决呢?

3
0
发表了问答
2014/10/28 14:18

echarts力导向图 单击和双击同时使用问题

@Kener-林峰 你好,想跟你请教个问题:我现在使用的是Echarts2.03版本,在做力导向图的时候,有没有办法在同一个图上同时使用click和dblclick的方法呢?我现在同时使用的时候,click直接把dblclick方法给屏蔽了!谢谢

2
0
发表于大前端专区
2020/06/11 16:35

echarts使用pictorialBar做3d柱状图,当第一个值为0时出现问题,有没有能解决的?

示例地址:https://gallery.echartsjs.com/editor.html?c=xYKFsmdRIF&comment=0

3
0
发表于大前端专区
02/02 19:00

专访 Apache ECharts 团队:从 ASF 毕业经历了什么?

1 月 26 日晚,Apache 基金会正式官宣 Apache ECharts 顺利通过孵化阶段,毕业晋升为 Apache 顶级项目。 2018 年 3 月,百度将 ECharts 项目捐赠给 Apache 基金会,ECharts 成为了 Apache 基金会孵化级项目,同时也是首个由百度贡献给国际顶级基金会的开源项目。 如今,Apache ECharts 顺利毕业晋升为 ASF 顶级项目,那么在这两年多的孵化过程中,Apache 基金会的管理模式给 ECharts 项目带来了哪些改变?ECharts 又是在一个什么...

9
7
发表了问答
2017/05/31 15:12

echarts force 节点外面如何添加类似图片的的阴影部分

@Kener-林峰 您好,请问一下echarts force 节点外面如何添加类似图片的的阴影部分的效果

1
0
发表了问答
2014/12/18 17:26

echarts报错 TypeError: t.getAttribute is not a function

TypeError: t.getAttribute is not a function,var o=t这里报错,包都引入了,看了页面js都引入了。 ...+"+"),t=t instanceof Array?t[0]:t;var o=t.getAttribute(m);return o||(o=h++,t.set... 代码: require(       [         'echarts',         'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表         'echarts/chart/bar'       ],       function (ec) {         var myChart = ec.init($('#mainc...

6
0
发表了问答
2017/12/07 10:31

echarts坐标轴的axisLabel可以加padding吗?柱状图的柱间距怎么调整呢?

想通过改造柱状图实现如下效果 目前做到下面这个样子,y轴axisLabel设置inside:false就可以把文字翻转过去了,但是呢,文字跟柱状图重叠在一起的,于是我不知道怎么拉大柱状的距离,然后把文字拉到柱间的缝隙中去。研究了一下文档配置项,barGap 、barCategoryGap 要表达的都不是这个意思,山穷水尽的我只能来劳烦一下各位大佬了。

3
0
发表于大前端专区
01/22 11:18

Echarts鼠标移入图例如何改变图例颜色

Echarts鼠标移入图例如何改变图例颜色

3
0
发表了问答
2014/09/12 10:38

点击事件获取timeline的值

@Kener-林峰 你好,想跟你请教个问题: 如何在点击事件里面获取到当前timeline的值

7
0
发表了问答
2014/10/29 14:44

highcharts和echarts那个更好呢

赶脚highcharts看起来更舒服一些,但是现有工程用的是echarts,看看大家的看法

13
1
发表了问答
2017/02/06 13:25

echarts是否可以点击标签label

echarts关系图和饼图点击事件 是否可以给label添加 怎么添加 新手求问

3
0
发表于大前端专区
2019/05/26 17:19

echarts,极坐标系下的堆叠柱状图.我怎么把极坐标系的角度轴的类别刻度线和标签对齐啊,求大佬知道下

app.title = '极坐标系下的堆叠柱状图'; option = { angleAxis: { type: 'category', data: [ {value: '北', textStyle: {color:'red'}}, {value: '东', textStyle: {color:'red'}}, {value: '南', textStyle: {color:'red'}}, {value: '西', textStyle: {color:'red'}} ], z: 10, axisTick...

2
0
发表于大前端专区
01/06 10:36

为什么我这大屏柱状折线图只显示折线

5
0
发表于大前端专区
01/05 14:39

echarts一个画图区域内可以实现下面的效果吗?

2
0
2019/02/19 13:34

echarts中的地图怎么能做到省份显示渐变色跟图片

@Kener-林峰 你好,想跟你请教个问题: 在echarts3 和4中,地图只显示一个省份,想要这一整个省份填充一种渐变色,而不是每个区域里面都是一个渐变色,这种效果怎么做, 希望的效果图(这个图是网站找的,自己的效果也是要这样的效果): 官网上的案例(不是我要的效果):官网上的渐变填充是针对每个区域里的填充 问题 1、效果图中省份上还有小黑点的图案,小黑点图案+渐变色这个要怎么做,尝试过,放两个地图,一个map先填充一...

3
0
2020/12/13 21:32

散点图按区域打点出现边界,但无序打点是正常的

散点都设置成不透明的了,但还是出现这种边界,怎么能让它像无序打点一样正常显示?

1
0
发表了问答
2015/03/02 15:28

echarts如何判断图表已经加载完成?

@Kener-林峰 林峰,你好。如何判断echarts的图表是否渲染完成?我现在有一个js函数(比如functionA),用于计算某个图表所在div的高度,在调用myEchart.setOption方法之后,执行functionA函数,得到的是图表渲染之前的高度。如果我使用setTimeout让functionA延迟一会儿,就能得到。我猜想应该是由于图表渲染是异步的,所以我直接执行functionA时,得不到渲染完成后的高度。我在echarts的官网文档上好像没有找到相关的、渲染完成...

4
0
发表了问答
2014/09/15 09:28

echarts地图取消选中

@Kener-林峰,你好,请问地图可以通过代码来控制取消选中吗? 比如上面的地图,我点击全区,需要把桂林取消选中,能做到吗?

3
0
发表了问答
2017/02/20 11:46

echarts dataRange 在图表数据更新后,鼠标hover还是显示以前的未更新时的数据。

echarts dataRange 在图表数据更新后,鼠标hover还是显示以前的未更新时的数据。如下图所示: 如

1
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
161 评论
3.2K 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部