Apache ECharts 5.1 发布,新增支持地理坐标系和地图系列的 SVG 底图
在最近发布的 Apache ECharts 5.1 版本中,新增支持了地理坐标系和地图系列的 SVG 底图,可以用来灵活地创造出非常酷的可视化作品;图例组件全面更新,默认更接近数据的样式,让数据与图例之间产生更符合直观的关联。
除此之外,我们还在这个版本中改进了非常多的功能,让我们一起来了解一下吧!
地理坐标系和地图系列的 SVG 底图
在此之前,Apache ECharts 的只支持 geoJSON 格式的地图。在本次发布的 v5.1 版本中,地理坐标系组件(geo)和地图系列(map series)的底图支持了 SVG 格式,并且在 Canvas 和 SVG 两种渲染模式中得到渲染表现一致的效果。
除此之外,SVG 底图也和 geoJSON 一样,默认支持了平移、缩放等操作,提供相似的用户体验。
SVG 地图支持了对指定区域“高亮(emphasis)”、“聚焦(focus)”、“淡出(blur)”、“显示标签(label)”、“提示框(tooltip)”等能力,通过 ECharts 配置项就可以方便地启用。他们能够让用户清晰地看到数据、信息和图像的关联。
有了 SVG 底图后,开发者可以在地图系列(map series)上做出更丰富的数据可视化表达。
结合 Apache ECharts v5 开始支持的“选中(select)”能力,能做出一些像飞机、影院选座功能性的应用。
同 geoJSON 底图一样,SVG 底图上也可以绘制其他图表系列,如散点图(scatter series)、路径图(lines series)、关系图(graph series)等等。下面是绘制路径图系列(lines series)的例子。
SVG 底图大大加强了 ECharts 能创造出的图表的表现力,欢迎在官网下载最新版尝试使用!
全面升级的图例
图例通常位于图表的一个角落,用以表示数据样式以及其所代表的含义。Apache ECharts 也在很早的版本就支持了图例。
在这个版本中,我们对图例进行了全面的升级,让图例的默认样式与数据的样式更加接近,包括图形颜色、形状、描边等信息。这样,用户在直观上就更能对数据产生关联。
许多 legend
中的样式支持设置为 'inherit'
,这意味着其值将会从系列的对应值中继承,从而方便地在图例中使用与系列中相同的值。
此外,我们还扩展了 legend
配置项的接口,使得开发者可以将图例的样式自定义成不同于系列的样式,以满足特殊场景下的需求。
完整的版本记录
v5.1.0
[Feature] [geo] [map] 地理坐标系和地图系列支持使用 SVG 数据作为地图源。#14571 (100pah)
[Feature] [legend] 默认使用了更直观的图例设计,图例的样式更符合系列样式。#14497 (Ovilia)
[Feature] [i18n] 新增捷克语翻译。#14468 (JiriBalcar)
[Feature] [animation] 为resize方法添加animation的动画过渡配置。#14553 (pissang)
[Feature] [effectScatter] effectScatter系列添加clip配置。#14574 (susiwen8)
[Fix] [debug] 优化组件缺失时候的错误提示。#14568 (pissang)
[Fix] [tooltip] 优化tooltip的性能。#14246 (plainheart)
[Fix] [label] 修复标签可能会显示在图形下面的错误。#14542 (plainheart) #14417 (susiwen8)
[Fix] [pattern] 修复CanvasPatttern#setTransform方法可能会不存在报错的问题 #738 (pissang)
[Fix] [tooltip] 修复tooltip中对时间轴的格式化错误 #14471 (Ovilia)
[Fix] [symbol] 所有使用symbol的组件都添加了symbolOffset的支持。#14375 (plainheart)
[Fix] [markArea] 修复markArea背景色可能不显示的问题。Close #13647 #14343 (Nick22nd)
[Fix] [markLine] 修复markLine中字符串格式的数据可能无法使用的问题。Close #14300 #14314 (Ovilia)
[Fix] [select] 修复可能存在null值访问的问题。Close #14293 #14413 (leosxie)
[Fix] [dataZoom] 修复dataZoom中的标签高宽设置不生效的问题。#14388 (wf123537200)
[Fix] [animation] 修复存在NaN值的动画可能会错误的问题。#730 (Nick22nd)
[Fix] [visualMap] 修复itemSymbol配置不生效的问题。Close #5719 #14243 (Ovilia)
[Fix] [loading] 修复标签被其它图形覆盖的问题。#14191 (yufeng04)
[Fix] [custom] 修复自定义系列标签颜色可能不对的问题。Close #14092 #14254 (Nick22nd)
[Fix] [map] 修复使用labelLayout的时候地图标签可能不会随着拖动更新。#14578 (pissang)
[Fix] [calendar] 修复日标签位置偏移的问题。Close #11508 #13902 (Nick22nd)
[Fix] [lines] 修复折线图动画可能错乱的问题。#13638 (vially)
[Fix] [type] 暴露更多的类型方便插件生成类型文件 #14289 (pissang)
[Fix] [type] 添加LegendComponentOption.icon类型 #14263 (thesiti92)
[Fix] 去除一些遗留代码的使用 #14357 (pissang)
v5.1.1
[Fix] [geo] 修复 5.1.0 引入的geo组件上tooltip无法显示的问题。#14767 (pissang)
[Fix] [tooltip] 修复 5.1.0 引入的 tooltip 在开启 appendToBody 后位置不对的问题。#14713 (plainheart)
[Fix] [map] 修复 5.1.0 引入的地图上的tooltip可能会报错的问题。#14704 (plainheart)
[Fix] [pie] 修复饼图上标签引导线labelLine从outside修改为inside之后高亮依然可能显示的问题。#14702 (villebro)
[Fix] [type] 修复 5.1.0 引入的老版本 TypeScript 可能出现类型错误的问题。Close #14716 #14739
[Fix] [type] 修复 symbolOffset 非可选的类型错误。#14693 (villebro)

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
聊聊各端手势体系以及对 Web 标准手势的思考
「北海 Kraken」是一款基于 Flutter 的 Web 渲染引擎,通过基于 W3C 标准来开发实现前端开发者常用的能力。 Kraken 团队也积极探索定义新的问题以及能力,期望通过参推动标准定制的方式让 Web 技术变得更好。 欢迎大家关注 「北海 Kraken」: http://openkraken.com/ 在过去,早期的 Web 更多用做内容展示的页面,最早从后端框架中直出,再配上各种 CSS 以及 JS 的交互内容,以完成最终对页面内容的展示,那时候的 Web 更多属于 【内容开发】,做内容的直出与展示。而如今现代 Web 开发体系已经有了翻天覆地的变化,早已超出了【内容开发】的范畴,在各个领域都有 JavaScript 的身影。同样,Web 也已经脱离了客户端以及浏览器的限制,各式各样基于 Web 标准或者私有标准的 Web runtime 层出不穷。【Web 应用开发】区别于传统的【内容开发】,它对开发者提出了更高的要求,也对 Web 的能力提出了更高的要求,无论是基于标准化方面的考量,还是基于对易用性的考虑,我们都期望 Web 开发者可以获得通过更高级的封装的标准的...
-
下一篇
NewtonsoftJson的使用整理
关于我 我的博客 | 欢迎关注 引言 json是我们在工作中经常用到的一种数据传输格式,开始过程中解析json是我们经常面对的问题。NewtonsoftJson是c#的一套json处理封装类,它可以高效,方便地帮助我们处理json。 NetonSoftJson提供了完整的使用文档,文档地址如下:Json.NET Documentation NetonSoftJson的不同使用场景 常用方法 序列化和反序列化 这应该是我们最常用的俩个方法了 JsonConvert.DeserializeObject<T>(string json)//反序列化 JsonConvert.SerializeObject(object obj) //序列化 高级特性 参考文章 Newtonsoft.Json高级用法 某些字段不想被反序列化 使用JsonIgnore特性标签 public class Person { public int Age { get; set; } public string Name { get; set; } [JsonIgnore] public string Sex ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- MySQL8.0.19开启GTID主从同步CentOS8
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装