AICon 上海站|日程100%上线,解锁Al未来! 了解详情
写点什么

使用 Apache ECharts 呈现社区活动的渲染图

  • 2021-08-25
  • 本文字数:2286 字

    阅读完需:约 8 分钟

使用Apache ECharts呈现社区活动的渲染图

整理 | 王强


ApacheCon Asia 2021大会的“数据可视化论坛”上,Apache APISIX Committer 孙毅发表了题为“使用 Echarts 呈现社区活跃度”的演讲。本文是这次演讲的内容总结。

 


大家好,我是孙毅,是 Apache APISIX 的 Committer。今天由我来给大家分享使用Apache ECharts来呈现社区活跃度这个主题。

项目介绍


这个项目主要是由我和后端的吴舒旸同学两个人完成的。上面是仓库地址[1]和我们的 ID,大家有 bug 或者 feature 都可以去提交。

项目初衷


我们为什么要做一个这样的小工具呢?我们在日常开发中会经常遇到选型的问题,怎么来判断开源社区是否活跃稳定,是否能可持续发展?如果单从 Star 数或者是 Fork 数这些维度来判断,对我们来说是不够的。

 

我们的思考是:社区的活跃度也就是社区开发者的活跃度,我们可以收集一些开发者的数据,并做成可视化的图表来判断这个社区是否是健康的、活跃的。于是我们就准备做一个这样的工具[2]来供大家使用。

为何选择 ECharts 来渲染图表


在我们决定要做这个事之后,我们开始做了一些技术选型,最后我们选择了 ECharts 来渲染我们的图表,原因有如下几点:

 

  1. 它是 Apache 软件协议,是一个比较友好流行的开源协议。

  2. ECharts 的上手成本比较低,上手比较快。我们调研的时候发现在它的官网里面有大量图表示例,可以满足我们当前的需求。

  3. 它的文档示例非常丰富。这会让我们后面避开很多坑,在需要支持的时候我们就可以去翻文档来解决我们的问题。

  4. 它同时也有非常丰富的 API。我们目前还没有遇到比较高阶的特性需求,但后期如果我们会有一些比较高阶的玩儿法,那么 ECharts 的丰富 API 相信可以去完成我们的这些需求。

项目功能


下面介绍一下这款图表工具的一些功能。



我们这个工具目前有两个图表,第一个图表就是贡献者增长曲线,是由每个贡献者的首次提交的日期整理而成。图表上可以看到横坐标代表时间,纵坐标代表贡献者数量,从左到右代表这个项目从立项到现在的贡献者总人数的变化过程。



第二个功能是我们的贡献者增长曲线具有合并查看模式。

 

以 apisix 为例,我们会把和 apisix 所有相关的仓库数据聚合在一起来展示。我们可以看到左侧是我们的普通模式,就是仓库的贡献者的变化;右面的是我们的合并模式,会把这些仓库的所有贡献者的数据聚合一起,有更全面的统计。目前我们支持合并模式的仓库有 apisix、skywalking、openwhisk,还有 dubbo。如果大家也想把自己的仓库做成这种合并模式,可以提 feature,或者修改 yaml 文件,就可以支持查看模式了。



另外一个功能是贡献者曲线的多仓库对比模式。多仓库对比模式可以让某一领域的使用者分析某一领域的软件近期的变化。我们可以从这个图表中看到 apisix 用了两年的时间就快达到了 kong 6 年的贡献者人数的总和。

 

另外一个是分享功能。当使用者觉得这些图表对他们来说有用的时候,他们想的第一件事是去分享给其他人。我们也对分享这一块比较重视,做了如下几个分享:

 

  1. 网页分享。你可以把分享的链接复制给你的朋友,直接访问链接就会看到你当前的图表。

  2. 图片分享。这个和网页有点类似,只不过它会直接给你返回一张图片。

  3. 社交媒体分享。我们先做了 Twitter,点击 Twitter 之后就会跳转到 Twitter 平台,然后自动编辑你的 Post。

  4. 值得提的一点是我们同样也支持 Markdown 分享。你可以直接把这段代码复制到你的 Markdown 文件中,就可以把这个图表展示在你的 Markdown 里边。需要注意的是我们的图片是由后端动态生成的,也就是说一旦你的贡献者数量,或者贡献者活跃度有更改的话,那么这个图片是会动态刷新的。你只需要首次给它提交到你的仓库里面,后期的数据更新都是由这个服务自己动态完成的。

 

我们做的另外一个图表是月贡献者增长曲线。这个意思是说每一个仓库在每个月具体有多少个活跃的贡献者。这个图表可以让我们分析这个仓库在短期内的活跃度。



我们可以看到 apisix 的活跃度现在是稳定在 kong 的两倍左右。

项目反响


我们把这个工具做完,并且觉得它是稳定可用的时候,我们秉着开源精神将这个工具提交给了一些开源项目。目前有如下这些仓库在用,并且得到比较好的一些反馈。



我们从项目想法到开发计划,再到落地成品到用户使用,这个过程像是一种快乐的传递。尤其是当看到用户在使用我们的小工具,这个工具真真切切帮助了使用者从更多纬度去分析社区的活跃度,这一点是令我们非常开心的。

项目未来规划


目前这个工具已经是稳定可用了,但后期一定会有其他的一些需求,需要去开发。我们后期会更多倾听社区的声音,将社区里面合理的需求转化为产品。我相信有社区力量的注入,我们的项目将会更加完善、更加好用、好看。

项目总结


在整个项目的开发过程中,我认识到一个人的能力终归是有限的,而社区的能力是无限的,因为社区会有源源不断的有能力的人来注入。

 

像我们在开发合并模式的时候,这个需求是由 skyWalking 社区提出的。我们在向 skywalking 提交我们的贡献者视图的时候,社区里面有人就提出可不可以增加合并模式来完成多个仓库的聚合展示。经过我们的讨论分析后,我们觉得这个功能不仅仅对 skywalking 是有用的,其他小伙伴也会有类似的需求,我们就把这个事情落地了。如果是单靠我和后端同学去想到底需要哪些功能,可能就是比较吃力。从这一方面上来说,社区的能力以及社区的需求是无限的。

 

我们的图表从表观上看去只是一条冷冰冰的数据,但是我们每条可视化数据背后都是一位位优秀的工程师用汗水浇铸而成的。这就让我们的工作变得更加有意义,因为每一个点都是工程师辛辛苦苦参与到这个开源项目当中的成果,这让我们的事情变得更有意义。

 

如上就是我的分享内容,谢谢大家。

 

[1] 仓库地址:https://github.com/api7/contributor-graph

[2] 工具链接:https://www.apiseven.com/en/contributor-graph

2021-08-25 12:404709

评论

发布
暂无评论
发现更多内容

JAVA OOM异常可观测最佳实践

观测云

可观测性 可观测

DTMO直播预告|Taier1.1新功能详解&控制台介绍

袋鼠云数栈

大数据

时间轮算法

领创集团Advance Intelligence Group

算法 时间轮算法

vuejs中的普通方法/计算属性computed与监听属性watch四者的比较

itclanCoder

JavaScript Vue 前端开发

vuejs中的mixin混入-局部混入/全局混入

itclanCoder

Vue 前端开发

【LeetCode】后继者Java题解

Albert

LeetCode 5月月更

国内首个开源物联网边缘工业协议网关软件,Neuron v2.0产品解读

EMQ映云科技

开源 物联网 IoT 5月月更 neuron

邀您填写调研问卷 | 2022中国 AIOps 现状调查全面启动!

博睿数据

AIOPS 博睿数据

一文彻悟容器网络通信

阿里巴巴中间件

阿里云 容器 云原生 中间件

清晰明了!人人都能懂的Python自动发送邮件实战教程

Python全栈库

Python 编程 程序员 面试 全栈开发

FinClip+系列 | VUE前端开发框架核心原理

Speedoooo

Vue 前端框架 移动开发 移动端开发 小程序容器

Dubbo3 落地实践及 Mesh 解决方案

阿里巴巴中间件

阿里云 开源 云原生 dubbo 中间件

直播预告丨Hello HarmonyOS进阶课程第三课——游戏开发实践

HarmonyOS开发者

游戏开发 HarmonyOS

Hoo研究院 | 什么是流动性池?(下)流动性池的运作

区块链前沿News

defi 流动性 Hoo

大咖说*图书分享-Node布道师狼叔|三卷书详解Node.js

大咖说

前端 后端 代码

攻防演练中常见的8种攻击方式及应对指南

青藤云安全

明明已部署EDR,服务器为什么还是被入侵了?

青藤云安全

安全攻防 网络安全 主机安全

小白福利!教你用低代码实现一个简单的HarmonyOS页面跳转功能

HarmonyOS开发者

HarmonyOS 低代码开发

netty系列之:HashedWheelTimer一种定时器的高效实现

程序那些事

Java Netty 程序那些事 5月月更

工业质检如何以“智”取胜?15分钟上手工业零部件检测全流程方案

百度开发者中心

漏洞扫描器并非100%靠谱,那么容器镜像安全又当如何保证?

青藤云安全

网络安全 安全管理 漏洞修复

《安全大讲堂》 第十四期|不破不立:软件供应链的威胁与方案

腾讯安全云鼎实验室

供应链 安全大讲堂

SeaTunnel 加入开源之夏!一起来拿奖金

Apache SeaTunnel

Apache 大数据 开源 workflow Seatunnel

vuejs中的默认插槽-具名插槽-作用域插槽三者的比较

itclanCoder

JavaScript Vue 前端开发

Spark离线开发框架设计与实现

百度开发者中心

三、云原生安全关键要素

穿过生命散发芬芳

云原生安全 5月月更

Cocos 常用功能介绍

空城机

Cocos 5月月更

接口测试工具简介!

Liam

测试 自动化测试 测试工具 测试自动化 测试管理工具

6 月亚马逊云科技培训与认证课程,精彩不容错过!

亚马逊云科技 (Amazon Web Services)

架构师 培训 认证

抢先预约 | 阿里云无影云应用线上发布会预约开启

阿里云弹性计算

无影云电脑 云应用

毕设不会做,怎么办?

图灵教育

机器学习 深度学习 毕设

使用Apache ECharts呈现社区活动的渲染图_文化 & 方法_孙毅_InfoQ精选文章