趣码乐园 Apache ECharts 6.0 功能介绍

简介: 作为一种布局,它还允许开发者将各种图表类型和组件结合,创造出灵活复杂的可视化作品:

1. 全新默认主题

在 ECharts 6.0 的开发过程中,我们深入分析了用户的真实使用场景,发现超过七成的开发者直接采用默认主题。这让我们意识到:一个优秀的默认主题不仅要具备美学价值,更要符合各个业务场景的通用需求。

新版主题系统内部使用了设计令牌(design token)对颜色、距离等设计元素进行重构,使得不同图表类型和组件之间更和谐一致。

虽然 6.0 的主题在 5.x 版本上有非常大的调整,但是我们提供了一个 v5.js 主题文件,对于希望使用新版本功能但保留原有样式的开发者,可以实现快速迁移。

2. 动态主题切换

在之前的版本中,如果想要改变一个图表的主题,就必须注销图表实例后重新初始化,二次的初始动画可能对用户体验带来负面影响。在新版本中,我们实现了主题的动态切换能力,显著地提升用户体验。

3. 深色模式响应

在实现主题的动态注册和切换之后,一个典型场景是监听系统是否使用深色模式,并动态调整图表的深色与浅色主题。

这对于支持深色模式的业务场景至关重要,可以确保应用界面与系统主题风格一致,显著提升用户体验的流畅性和专业性。

4. 新增和弦图

和弦图直观展现复杂关系网络中的流量与权重,特别适合金融交易、社交网络等场景的多维度关系分析。ECharts 创新性地支持使用出节点和入节点的渐变色作为边的颜色,呈现独特的视觉美感。

5. 新增蜂群图

传统的散点图在类目轴下如果数据过于密集,蜂群图(Beeswarm)通过将数据在非数值维度上的偏移,在保持数值轴准确性的前提下,实现散点图的无重叠分布。

6. 新增抖动散点图

抖动散点图(Scatter Jittering)采用随机扰动策略,在非数据维度上添加固定范围的随机偏移,解决数据过于密集的问题。

从下图我们可以看到,在未使用抖动的情况下,如果数据过于密集,很难看清数据的分布情况。

而在开启了数据抖动之后,可以更清楚地看到数据分布最密集的范围是 6-8 之间。并且,相比蜂群图,抖动散点图具有更高的处理性能。

7. 新增断轴

断轴(Broken Axis)是一种通过坐标轴断层展现悬殊量级数据的可视化手段。在 ECharts 6.0 中,我们创新性地实现了模拟撕纸效果的断轴,使得断轴的含义能被更直观地传递,并且支持点击展开的效果,还原到真实数据比例。

8. 升级股市交易类图表

ECharts 6.0 针对金融交易场景深度优化,增强了标签针对坐标系的相对定位能力,助力开发者快速构建专业级行情分析工具。

下图展示了一个使用 ECharts 实现的股市交易图的综合应用场景,结合了分时图、MACD、成交量、买卖盘口、深度图:

这些实例可以帮助开发者快速实现金融交易场景的需求。

9. 新增矩阵坐标系

<h1><p id="14i.0086th.com">0</p></h1> <h1><p id="nq5.zgyjcjy.org.cn">6</p></h1> <h1><p id="1sw.easypao.com">1</p></h1> <h1><p id="d2i.dsacxz57.org.cn">0</p></h1> <h1><p id="nq5.kdk8n3.org.cn">5</p></h1> <h1><p id="hg7.baidvb.org.cn">8</p></h1> <h1><p id="5i9.jingkai.org.cn">6</p></h1> <h1><p id="6i5.zhaoyu.mobi">9</p></h1> <h1><p id="sdr.dreamyu.org.cn">5</p></h1> <h1><p id="pjy.artai.org.cn">6</p></h1>  

上述例子也用到了 ECharts 6.0 新增的矩阵坐标系,它的功能十分强大。不仅可以用来做协方差矩阵图:

元素周期表:

作为一种布局,它还允许开发者将各种图表类型和组件结合,创造出灵活复杂的可视化作品:


相关文章
|
10月前
|
网络协议 Linux Shell
阿里云安装freeswitch的步骤总结
本文介绍在阿里云上安装freeswitch系统三种安装方式:脚本、镜像及Docker。支持多种Linux系统,推荐最小化安装,提供下载地址、一键安装命令及卸载方法。安装后访问IP即可登录,默认账号密码为admin/admin,初始化需等待5-10分钟。
1313 5
|
6月前
|
移动开发 JavaScript 前端开发
前端组件库——Vant 4知识点大全(一)
教程来源 http://yvyus.cn/ Vant 4 是面向 Vue 3 的轻量级移动端组件库,2022年12月发布,支持深色模式、5个新组件(如TimePicker、DatePicker)、体积更小(组件平均<1KB),零依赖、TypeScript 全面支持,GitHub 星标超2.2万,国内H5开发事实标准。
|
9月前
|
运维 JavaScript 前端开发
Teek Design Vue3 Element Plus 中后台系统开发模板
Teek Design Vue3 是基于 Vue3 + TypeScript + Vite + Element Plus 的中后台系统开发模板,支持多布局、RBAC权限、主题切换与丰富组件,集成 ECharts、富文本等常用能力,开箱即用,适合企业后台、数据看板等场景。MIT 开源协议,配备完整工程化规范与多环境部署方案。
1122 2
Teek Design Vue3 Element Plus 中后台系统开发模板
|
存储 安全 Java
Spring Security中Token存储与会话管理:解析与实践
Spring Security中Token存储与会话管理:解析与实践
1413 103
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
1211 2
|
存储 自然语言处理 算法
RAG系统文本分块优化指南:9种实用策略让检索精度翻倍
本文深入探讨了RAG系统中的九种文本分块策略。固定大小分块简单高效,但可能破坏语义完整性;基于句子和语义的分块保留上下文,适合语义任务;递归与滑动窗口分块灵活控制大小;层次化和主题分块适用于结构化内容;特定模态分块处理多媒体文档;智能代理分块则通过大语言模型实现动态优化。开发者需根据文档类型、需求及资源选择合适策略,以提升RAG系统的性能和用户体验。作者Cornellius Yudha Wijaya详细分析了各策略的技术特点与应用场景。
2760 1
RAG系统文本分块优化指南:9种实用策略让检索精度翻倍
|
Java 数据库连接 数据库
微服务——SpringBoot使用归纳——Spring Boot集成MyBatis——MyBatis 介绍和配置
本文介绍了Spring Boot集成MyBatis的方法,重点讲解基于注解的方式。首先简述MyBatis作为持久层框架的特点,接着说明集成时的依赖导入,包括`mybatis-spring-boot-starter`和MySQL连接器。随后详细展示了`properties.yml`配置文件的内容,涵盖数据库连接、驼峰命名规范及Mapper文件路径等关键设置,帮助开发者快速上手Spring Boot与MyBatis的整合开发。
2099 0