OpenTiny HUICharts 正式开源发布，一个简单、易上手的图表组件库

news2024/11/13 9:01:32

引言

大家好！

我们非常高兴地跟大家宣布，今天正式发布我们的新产品——OpenTiny HUICharts。这是一款前端 Web 可视化图表库，其基础图表功能构建于 ECharts 之上，而高阶图表则采用了新的底层技术，以满足更广泛的数据可视化需求。

OpenTiny HUICharts 集成了自适应、性能提升、数据状态管理、无障碍能力、刻度优化、刻度均分等特性。这些特性帮助我们解决了许多内部业务场景中的问题。我们追求的目标是让图表的使用变得更加简单、直观且易于上手。

为什么要做 OpenTiny HUICharts

OpenTiny HUICharts 的诞生源于我们的内部业务需求。在处理数据可视化时，我们常常遇到两个主要问题：工具过于复杂和定制性不足。许多现有的图表工具虽然功能强大，但使用起来相对繁琐，需要频繁查询 API 文档。在处理大量复杂数据时，我们发现市场上现有的解决方案无法完全满足我们对数据可视化工具的要求。此外，我们还意识到公司内许多部门使用的图表工具缺乏统一的规范和主题样式，这造成了视觉上的不一致。

综合上面的问题，我们自主研发了 OpenTiny HUICharts。目前支持原生使用，也支持 Vue 框架封装组件，参考 OpenTiny Vue 组件库。 我们支持基础图表如线形图、柱状图、圆盘图、雷达图等，这些图基于 Echarts 图表库，但我们简化了相关 API 的使用，使其更加统一和规范。而针对复杂场景，我们开发了一系列的高阶图表，使用时可按需引用，不依赖其他库。

对我们来说，OpenTiny HUICharts 不仅仅是一个产品，更是我们对数据可视化的一种全新探索。目前 OpenTiny HUICharts 已经成功落地在公司内部100多个产品中，持续提升了用户的可视化体验。

在这里插入图片描述

组件总览

  • 基础图表：线形图、面积图、柱状图、圆盘图、雷达图、地图、桑基图等等。
  • 复杂图表：甘特图、流程图、河流图、蜂窝图、波纹图、梯田图、时间轴、组织关系图、雪花图、里程碑图。使用时要按需引用，不依赖其他库。

在这里插入图片描述

特性

1、一键换肤 & 主题定制

2、可定制化响应式图表

3、生命周期

4、低代码开发

5、内置数据状态提示

6、复杂可视化图表

一键换肤 & 主题定制

基于 Design Token 样式变量，可依据产品和品牌多样化的视觉需求实现灵活的样式定义与主题切换。用户可通过当前页面右侧的操作面板调整相应样式变量（如：字体、间距、各类颜色等）实时预览定制效果。

在这里插入图片描述

可定制化响应式图表

传统的图表库自适应通常是简单的图元缩小，OpenTiny HUICharts 提供了可定制化图表响应式能力，并提供语法糖。

如用户可根据容器宽度，自行抉择隐藏非必要的图元属性，如图例、坐标轴等。

在这里插入图片描述

生命周期

为了让开发者能够更灵活、更高效地管理图表的创建、更新和销毁过程，OpenTiny HUICharts 图表库提供了生命周期功能，能够在组件的初始化，更新，销毁这几个阶段进行调用回调。

例如，当您要刷新已经渲染完毕的图表时，如果您想刷新配置项和数据，可以使用：

// 新的配置项，为对象格式
let newChartOption = {...};
chartIns.refresh(newChartOption);

如果想对图表渲染完毕进行回调，可以这样：

chartIns.onRenderReady(callback);

内置数据状态提示

提供数据状态界面和调用接口，也支持用户传入自定义的图标和文本。

在这里插入图片描述

复杂可视化图表

OpenTiny HUICharts 提供了传统图表库不包含的复杂可视化图表组件，图表包含自研算法布局和图形绘制。

在这里插入图片描述

如何使用

  1. 环境准备，首先确认安装了 node，并确保 node 版本是 10.13 或以上。使用node -v命令查看 node 版本
  2. 查看组件库当前的版本 npm show @opentiny/huicharts
  3. 安装，使用 npm 安装组件库最新版本:npm install @opentiny/huicharts@latest --save
使用用例
// 引用图表库
import HuiCharts from '@opentiny/huicharts';

// 创建图表容器
<div id="main" style="width: 600px;height:400px;"></div>

// 创建图表实例
let chartIns = new HuiCharts();

// 初始化图表容器
let chartContainerDom = document.getElementById('main');
chartIns.init(chartContainerDom);

// 填入图表配置项
let chartOption = {
    theme: 'hdesign-light',
    padding: [50, 30, 50, 20],
    legend: {
        show: true,
        icon: 'line'
    },
    data: [
        { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
        { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
        { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
        { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
        { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
        { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
        { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
        { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
        { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
        { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
        { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
        { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
    ],
    xAxis: {
        data: 'Month',
    },
    yAxis: {
        name: 'Percentage(%)'
    }
};
// 指定使用图表类型：LineChart、AreaChart、BarChart、PieChart、GaugeChart、RadarChart、ProcessChart、BubbleChart等
// 图表类型的英文名称可以在文档左侧菜单栏看到
let chartType = 'LineChart';
chartIns.setSimpleOption(chartType, chartOption);

// 开始渲染
chartIns.render();
图表数据刷新

当您要刷新已经渲染完毕的图表时，如果您想刷新配置项和数据，可以使用：

// 新的配置项，对象格式
let newChartOption = {...};
chartIns.refresh(newChartOption);

如果您想仅仅刷新数据，可以使用：

// 新的数据，为数组格式
let newData = [...];
chartIns.refreshData(newData);

特别鸣谢

在这个项目的每一个阶段，我们都深受许多人的帮助和支持。在此，我们特别要感谢所有参与 OpenTiny HUICharts 开发和测试的团队成员，你们的努力和创意让这个产品成为可能。

感谢我们的合作伙伴，你们的专业知识和无私的建议让我们能够不断优化和改进 OpenTiny HUICharts。

还要特别感谢所有参与早期测试的用户，你们宝贵的反馈帮助我们发现了许多改进的机会，让 OpenTiny HUICharts 更加完善。

最后，我们衷心感谢每一位支持我们的朋友。我们期待与大家继续携手前行，将 OpenTiny HUICharts 带到更多人的日常工作中，助力更多人高效地通过数据表达信息。

关于OpenTiny

在这里插入图片描述

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design/
OpenTiny 代码仓库：https://github.com/opentiny/
TinyVue 源码：https://github.com/opentiny/tiny-vue
TinyEngine 源码： https://github.com/opentiny/tiny-engine
OpenTiny HUICharts 源码：https://github.com/opentiny/tiny-charts
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~
（温馨提示：OpenTiny CCF开源创新大赛也在持续报名中，欢迎大家一起报名参赛，赢取10W奖金）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1983287.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JAVA基础：String字符串

JAVA基础：String字符串

目录 前言 String的内部机制 String的两种创建方式 前言 关于String字符串我们并不陌生&#xff0c;在我们的程序中经常使用String这个类&#xff0c;甚至有的同学会把string当成基本数据类型&#xff0c;今天我们就来了解一下String这个类 String的内部机制 我们把string称为…
阅读更多...
nature immunology | BACH2调控“调节性”和“促炎性”TH17细胞的染色质多样化状态

nature immunology | BACH2调控“调节性”和“促炎性”TH17细胞的染色质多样化状态

–https://doi.org/10.1038/s41590-024-01901-1 BACH2 regulates diversification of regulatory and proinflammatory chromatin states in TH17 cells 留意更多内容&#xff0c;欢迎关注微信公众号&#xff1a;组学之心 研究团队和研究单位 Aviv Regev–Genentech Vijay …
阅读更多...
深度学习入门——深度学习

深度学习入门——深度学习

加深网络 前情回顾 构成神经网络的各种层学习时的有效技巧对图像特别有效的CNN参数的最优化方法 向更深的网络出发 网络特点 基于33 的小型滤波器的卷积层。激活函数是ReLU。全连接层的后面使用Dropout层。基于Adam的最优化。使用He初始值作为权重初始值。 进一步提高识别精…
阅读更多...
【Linux】yum（工具篇）

【Linux】yum（工具篇）

文章目录 前言&#xff1a;什么是软件包yum 的介绍yum源yum源的配置第三方源的配置官方源的配置镜像站点安装wget包备份本地yum源配置网易yum源重新生成yum缓存 前言&#xff1a;什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程…
阅读更多...
【学术会议征稿】第三届环境遥感与地理信息技术国际学术会议(ERSGIT 2024)

【学术会议征稿】第三届环境遥感与地理信息技术国际学术会议(ERSGIT 2024)

第三届环境遥感与地理信息技术国际学术会议(ERSGIT 2024) 2024 3rd International Conference on Environmental Remote Sensing and Geographic Information Technology&#xff08;ERSGIT 2024&#xff09; 第三届环境遥感与地理信息技术国际学术会议&#xff08;ERSGIT 20…
阅读更多...
LVS-DR集群的部署

LVS-DR集群的部署

LVS-DR集群 LVS-DR(Linux Virtual Server Director Server)工作模式&#xff0c;是生产环境中最常用的一种工作模式。 LVS-DR工作原理 LVS-DR 模式&#xff0c;Director Server 作为群集的访问入口&#xff0c;不作为网关使用&#xff0c;节点 DirectorServer 与 Real Serve…
阅读更多...
zabbix7.0TLS-01-部署服务端

zabbix7.0TLS-01-部署服务端

文章目录 1 介绍1.1 架构1.2 主要概念和名词1.3 最新 7.0 TLS 版本的部分新特性更灵活的资源发现和管理 2 官方部署指导地址3 在 Rocky Linux 9 上安装 zabbix3.1 安装软件包3.2 创建初始化数据库3.3 配置zabbix-server3.4 启动Zabbix server和agent进程3.5 默认监听端口3.6 访…
阅读更多...
Linux中Samba服务配置和管理

Linux中Samba服务配置和管理

文章目录 一、Samba介绍1.1、Samba是什么1.2、Samba的核心功能1.3、Samba的主要组件1.4、Samba的工作流程1.5、Samba主要配置文件smb.conf 二、Samba安装2.1、更新yum源2.2、安装Samba客户端和服务器软件包2.3、启动Samba 三、Samba的使用3.1、设置Samba服务的全局选项3.2、tes…
阅读更多...
Simulink模型开发中的一些自动化方法

Simulink模型开发中的一些自动化方法

随着Simulink模型的产品化开发进程&#xff0c;许多模型开发人员会关心模型的建模自动化问题。比如如何对模型中的元素进行批量查找和修改&#xff1b;如何构建自己的建模规则对模型进行检查&#xff1b;如何实现测试自动化等。在这些使用场景中我们都需要了解一些Simulink函数…
阅读更多...
Puppeteer-py：Python 中的无头浏览器自动化

Puppeteer-py：Python 中的无头浏览器自动化

1. 引言 在当今快速发展的互联网时代&#xff0c;自动化测试和数据抓取变得越来越重要。Puppeteer-py 作为一个 Python 库&#xff0c;提供了一种简单而强大的方法来控制无头浏览器&#xff0c;实现网页的自动化操作。无论是进行端到端的测试&#xff0c;还是抓取动态生成的数…
阅读更多...
公司新来的两个Java后端，因题背太熟轻松过面试？

公司新来的两个Java后端，因题背太熟轻松过面试？

以前面试是背八股文&#xff0c;而2024年的后端面试都是流行问场景题&#xff01;建议大家把面试想简单一点&#xff0c;顺的场景题直接给有需要的人&#xff0c;希望能对大家有所帮助&#xff01; 由于平台篇幅原因&#xff0c;很多java面试资料内容展示不了&#xff0c;需要…
阅读更多...
【HarmonyOS NEXT星河版开发学习】小型测试案例03-QQ音乐登录

【HarmonyOS NEXT星河版开发学习】小型测试案例03-QQ音乐登录

个人主页→VON 收录专栏→鸿蒙开发小型案例总结​​​​​ 基础语法部分会发布于github 和 gitee上面&#xff08;暂未发布&#xff09; 前言 本案例使用的还是一些基础的语法&#xff0c;主要是知道如何去布局以及分析&#xff0c;Harmony的布局方式也是特别多&#xff0c;没必…
阅读更多...
java基础 之 重写equals时为什么要重写hashCode

java基础 之 重写equals时为什么要重写hashCode

文章目录 前言回答了解哈希hashCode()总结 前言 了解equals戳这里→java基础 之 equals和的区别 请记住这句话&#xff1a;两个对象相同&#xff0c;哈希码一定相同。哈希码相同&#xff0c;两个对象不一定相同。 回答 只重写equals()方法&#xff0c;不重写hashCode()方法&…
阅读更多...
【漏洞复现】致远互联FE协作办公平台 apprvaddNew.jsp SQL注入

【漏洞复现】致远互联FE协作办公平台 apprvaddNew.jsp SQL注入

文章目录 0x00 漏洞描述影响范围 0x01 测绘工具0x02 漏洞复现0x03 Nuclei检测脚本0x04 修复建议0x05 免责声明 0x00 漏洞描述 致远互联FE协作办公平台是一款为企业提供全方位协同办公解决方案的产品。 在受影响的版本中&#xff0c;攻击者可以未授权访问/witapprovemanage/app…
阅读更多...
Animate软件动画类型简介

Animate软件动画类型简介

在Animate软件中&#xff0c;有三种基本的补间动画和一种逐帧动画&#xff0c;这里就简单讲一下这几种动画的概念。 FlashASer&#xff1a;AdobeAnimate2021软件零基础入门教程https://zhuanlan.zhihu.com/p/633230084 FlashASer&#xff1a;实用的各种Adobe Animate软件教程…
阅读更多...
Java第一个程序的开发

Java第一个程序的开发

开发三步骤 编写: a.创建一个文本文档,将后缀名改成.java,变成一个java文件 b.注意:我们需要将文件的后缀名显示出来 编译: a.命令:javac java文件名.java b.注意:javac会将java文件编译,生成一个.class文件(字节码文件),jvm运行只认class文件 运行: a.命令:java class文件名…
阅读更多...
开发一个自己的VSCode插件

开发一个自己的VSCode插件

1、前言 对于一个前端开发者来说&#xff0c;开发工具&#xff0c;最常用的应该就是VSCode了&#xff0c;因为它免费&#xff0c;速度快&#xff0c;提供了丰富了插件等优点&#xff0c;使得越来越多的前端开发者都来使用它了&#xff0c;在开发的时候如果有丰富的插件提供支持…
阅读更多...
Spring Cloud微服务项目集成MyBatis

Spring Cloud微服务项目集成MyBatis

在现代软件开发中&#xff0c;微服务架构已经成为一种流行的解决方案&#xff0c;它能够将应用程序拆分成多个小的、独立的服务。每个服务负责一个特定的业务功能&#xff0c;并可以独立部署和扩展。Spring Cloud是一个提供各种工具和框架以支持微服务开发的开源框架&#xff0…
阅读更多...
【工具】Sublime配置Anaconda的Python环境的简单方法

【工具】Sublime配置Anaconda的Python环境的简单方法

1 背景 Sublime Text对Python特别友好&#xff0c;自带Python编译器。只需CtrlB就能编译并控制台输出&#xff0c;特别适合小脚本的调试。 在安装了Anaconda后&#xff0c;如何使用Sublime Text调用Anaconda的Python以及Anaconda附带的众多实用的库呢&#xff1f; 也很简单。…
阅读更多...
一个全新低代码快速开发平台，基于Activiti7和Vue3全开放式流程，简洁且强大（附源码）

一个全新低代码快速开发平台，基于Activiti7和Vue3全开放式流程，简洁且强大（附源码）

前言 在当今数字化时代&#xff0c;企业面临着快速变化的市场环境和日益复杂的业务需求。现有的软件开发模式往往存在开发周期长、成-本高、迭代速度慢等问题&#xff0c;难以满足企业对快速响应市场变化的需求。此外&#xff0c;传统的开发平台往往缺乏灵活性和扩展性&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023