echarts 3d地图_上新了 ECharts (v4.7.0):哇,第 100 个版本!

1aeb28c45b1724fe91933f196dc29a6a.png

最新发布的 ECharts v4.7.0 是 ECharts 在 GitHub 上的第 100 个版本。

https://github.com/apache/incubator-echarts​github.com

此外,最近 Apache ECharts (incubating) 也迎来了第一位加入 Apache 后新增的孵化项目管理委员会(PPMC)成员苏思文。

苏思文的日常工作和 ECharts 项目并不相关。出于对知名可视化项目的好奇心,想阅读源码,提升自己的技术。年初的时候,工作上的项目需要有很多图形展现学生的成绩分布。项目结束后想了解一下前端绘图方面的知识,他认为,在国内做的最好的就是 ECharts,就决定先看一下它的源码。刚开始实在是看不懂,不过弄清一个软件的机制,最好的方法是一步步调试代码,就硬着头皮看 issue,尝试去解决,慢慢摸清门路。他发现有些 issue 其实修起来还挺简单的,就在业余时间通过修复 issue 来加深对源码的理解。

后来,他成为了 ECharts 社区中活跃的维护者和贡献者,比如在这次 v4.7.0 的版本中,他就帮忙修复了雷达图数据点可能会超出轴的问题(#11841)。因为他在社区中的持续贡献,他先后成为了 Apache ECharts (incubating) 的 Committer 和 PPMC。

ECharts 社区也欢迎更多感兴趣的同学加入,具体方法参见上一篇文章:

羡辙:如何成为 Apache ECharts (incubating) 的 Committer?​zhuanlan.zhihu.com
ad4e34c073c8b07a1ad67aab69fb01a5.png

那么,在本次发布的 v4.7.0 中,有哪些功能呢?下面让我们逐一介绍~

柱状图柱条的背景色

曾经,很多有「为柱状图的柱条添加背景色」需求的小伙伴,都是通过添加一个额外的系列挪到底下来解决的。

3ade312fc8e221416f682bededf55d66.png

这样的方法写起来很麻烦,而且如果不是精通 ECharts 的用户,一般很难想到这样的解决方案。由于这样的需求提得比较多,所以在 v4.7.0 版本中,我们支持了背景色的配置项,通过 showBackground 一键开启。如果需要配置样式,可以通过 backgroundStyle 修改默认背景色,甚至还可以设置阴影、边框、透明度等。

有了这一方法,就可以很方便地实现柱状图的背景色效果了。

此外,背景色的配置对于极坐标系下的柱状图(也就是环形图)也是适用的,所以可以用来实现本文宣传图片中的环形图效果:

6759a047ea4214a04acf176a918bd8f1.png
option = {
    angleAxis: {
        show: false
    },
    radiusAxis: {
        data: ['周一', '周二', '周三', '周四'],
        show: false
    },
    polar: {},
    visualMap: {
        show: false,
        min: 4,
        max: 10,
        inRange: {
            color: ['rgba(255, 87, 51, 0.8)', 'rgba(199, 0, 57, 0.8)', 'rgba(144, 12, 62, 0.8)', 'rgba(87, 24, 69, 0.8)']
        }  
    },
    series: [{
        type: 'bar',
        data: [4, 6, 8, 10],
        showBackground: true,
        roundCap: true,
        coordinateSystem: 'polar'
    }]
};

新增多种 markLine 标签位置

ECharts 的 markLine 能为数据做标示。

b08b50eecc92ea29c857cdb55bb5d76e.png

此前,标签位置只支持 start(显示在标记线的左边)、middle(线的上方)、end(线的右边)。为了满足更多场景的标签位置,在 v4.7.0 中,新增了 9 种新的标签位置(下图的蓝色部分):

ad524fa6eaaa114c2f8d08c470d9e060.png

更多信息,请参阅文档:https://www.echartsjs.com/zh/option.html#series-line.markLine.label.position

新增树图的折线布局

54fc24a20aae1dbedc2c2614d181fa9e.png

现在,你可以通过 edgeShape 配置使用曲线或折线布局,创造更多树图的可视化效果。

完整的 Changelog

  • [Feature] markLine 新增更多标签位置配置. #11843 (Zhang Wenli)
  • [Feature] 柱状图系列新增 background 配置绘制背景. #11951 (Zhang Wenli)
  • [Feature] tooltip 新增 appendToBody 配置项. #8049 #12024 (xinpureZhu, Su Shuang)
  • [Feature] graphic 组件支持在 group 元素上设置 draggable. #11959 (Shen Yi)
  • [Feature] tree 系列新增 polyline 配置项绘制拐角折线. #11808 (Li Deqing)
  • [Enhance] effectLine 尾迹效果优化. #11893 (alex2wong)
  • [Fix] 优化堆叠柱状图,折线图上的 markPoint 定位. #11965 (yikuangli)
  • [Fix] 修复雷达图数据点可能会超出轴的问题. #11841 (Su Siwen)
  • [Fix] 修复 treemap highlight 高亮无法触发的问题. #12050 (Su Shuang)
  • [Fix] 修复 geo 组件的缩放平移无法被 restore 的问题. #12035 (Su Shuang)
  • [Fix] 修复地图在 ie10, 11 中报错的问题 #11956 (Shen Yi)
  • [Fix] 修复 k 线图可能报错的 bug. #12027 (Su Shuang)
  • [Fix] 优化 brush 组件,能够跟随 dataZoom 等组件的交互. #11998 (Su Shuang)
  • [Fix] 修复雷达图上 'showTip' dispatched in radar chart. #11985 (Yu Feng)
  • [Fix] 修复 singleAxis 中 splitArea 不能绘制的问题. #11890 (newraina)
  • [Fix] 修复 legend 图例翻页按钮可能会消失的 bug. #11952 (Yu Feng)
  • [Fix] 修复 sankey 桑基图中 emphasis.lineStyle 无法生效的 bug. #11729 (Li Deqing)
  • [Fix] 修复 sankey 桑基图的 tooltip formatter 中没有 value 属性的 bug. #11752 (Li Deqing)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值