【datart】图表插件开发大赛


下载地址

链接: https://pan.baidu.com/s/1LcrqVJB1-3btsizhIz7iDg 提取码: 959p
使用方式请查看Datart官方文档

前言

先说下背景,我们公司是一家不到两千人的某游戏公司,急需一款开放、灵活的成熟的BI产品来支撑数分需求。我有逛开源社区的习惯,没事就刷github玩,有一次机缘巧合之下在Gitee的GVIP项目中看到了Datart,当时还是alpha版本,简单了解之后,感觉与团队的需求非常吻合,随即clone下来开始研究。
打动我的,第一是Datart的设计理念:开放、可塑、智能,这意味着我们可以高度自由化的根据需求定制、快速产出数据报表、快速适配新业务。第二是从技术角度来看,Datart的项目工程化、代码质量非常的好,反过来看我们组内的项目代码,让我有些不忍直视。
所以无论是需求还是技术角度,Datart都非常契合我们。

这次图表插件开发大赛,官方的诚意非常的足!
第一,官方确实下了大手笔,奖品很诱人!
第二,各种引导、帮助非常到位,随时提问都有人解答,还有大量的示例和文档可供参考。
第三,自己也为Datart贡献过几次代码,二开了很多功能,比较熟悉代码结构,自定义图表这种需求也很常见。
所以能参加一次这样的比赛还是非常值得的!


一、作品

我认为做图表要秉承数据分析的初衷去做,首先最重要的就是满足业务需求,其次要考虑易用性美观性,所以我选择了雷达图水波图

1.雷达图

雷达图是一个非常普遍的图表类型,在echarts、Antv、HighCharts等各个图表类库均有相应实现,这里选用了echarts。雷达图可以将各个维度的值平铺直观的展示出来。我们是一家游戏公司,经常用到,比如以攻击力、防御力等维度展示某个游戏玩家的战力。
雷达图

2.水波图

水波图是一种可以展示占比或进度的图表,这里选用了Antv G2Plot去实现。与制作雷达图相比,制作水波图有更多需要自定义样式的地方,比如边框、填充、文本等。有一点比较遗憾的是,没有时间做条件样式了,这个后期再补。
在这里插入图片描述


总结

这两个作品开发下来,给我的感受就是Datart确实遵循了他的设计理念,可塑性、扩展性非常的高,这两个图也已经在我们公司开始使用了,完美解决了一些市场那边的人的一些需求。
最近有时间就在做这个,好几个issue都忘了提PR上去了。开源很不容易,希望以后能有更多的人加入进来,不断的有好的作品,为Datart注入活力,添砖加瓦。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库,它提供了丰富的图表类型和高度的可定制性,以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器(包括移动设备上的浏览器)以及部分旧版浏览器(如 IE8/9/10/11)中运行,其底层依赖轻量级矢量图形库 ZRender,确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤: ### 关键特性 1. **开源免费**:ECharts 是开源软件,可以免费用于个人和商业项目,无需支付任何费用。 2. **广泛兼容**:支持多种浏览器环境,包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列,保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**:包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等,以及三维可视化组件(通过 ECharts GL 扩展)。 4. **交互性强**:图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能,提升用户对数据的探索和理解能力。 5. **个性化定制**:提供详细的配置选项,允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等,以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**:能够实时接收新数据并动态更新图表,适用于数据流或实时监控场景。 7. **扩展性**:除了核心库外,有 ECharts GL 用于三维和大规模地理数据可视化,以及周边生态工具(如 ECharts-GL、ZRender)增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求,包括: - **基础图表**:折线图、柱状图、散点图、饼图、K线图 - **统计图表**:盒形图 - **地理图表**:地图、热力图、线图 - **关系图表**:关系图、treemap、旭日图 - **多维数据可视化**:平行坐标 - **BI图表**:漏斗图、仪表盘 此外,ECharts 支持图表间的混搭,即在一个图表容器内同时展现多种图表类型,以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下: #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值