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

引言

大家好！

我们非常高兴地跟大家宣布，今天正式发布我们的新产品——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.rhkb.cn/news/395910.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AI 手机的技术展望

AI 手机的技术展望

某某领导问到我&#xff0c;AI手机这个产业发展如何&#xff1f;对于&#xff0c;地方科技园区&#xff0c;应该如何发展相关产业&#xff1f;我一时还真说不上来&#xff0c;于是&#xff0c;查了一下资料&#xff0c;大概应对了一下。 一&#xff1a;AI手机的定义 首先&…
阅读更多...
python管理mysql

python管理mysql

[rootserver1 ~]# pip3 config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple //这是设置清华镜像站&#xff0c;提高下载安装速度&#xff0c;如果报错提示找不到config&#xff0c;这是因为版本低&#xff0c;临时使用清华镜像站来升级 pip&…
阅读更多...
Python PDF文本处理技巧 - 查找和高亮文字

Python PDF文本处理技巧 - 查找和高亮文字

目录 使用工具 Python在PDF中查找和高亮文字并统计出现次数和页码 Python在PDF的特定页面区域中查找和高亮文字 Python使用正则表达式在PDF中查找和高亮文字 Python在PDF中查找文字并获取它的坐标位置 其他查找条件设置 在日常工作和学习中&#xff0c;我们常常需要处理各…
阅读更多...
SAP MM学习笔记 - 豆知识05 - Customer Exit 实例，MM01上定义Customer Exit 来Check评估Class

SAP MM学习笔记 - 豆知识05 - Customer Exit 实例，MM01上定义Customer Exit 来Check评估Class

上一章讲了一些MM模块的豆知识。 - MM01中设定的安全在库和最小安全在库 - MM01/MMSC/Customize自动 扩张物料的保管场所 - MM01中定义生产订单的默认入库保管场所 - VA01受注票中设定禁止贩卖某个物料 SAP MM学习笔记 - 豆知识03 - 安全在库和最小安全在库&#xff0c;扩…
阅读更多...
linux文件——深度学习文件fd、文件系统调用

linux文件——深度学习文件fd、文件系统调用

前言&#xff1a;从本片开始正式进入linux文件的学习&#xff0c;本片内容主要是文件的fd。 本篇内容博主将要先带友友回忆C语言中的文件操作接口&#xff0c;然后再过渡到操作系统中的系统调用的学习&#xff0c;最后理解操作系统中的文件操作。 ps&#xff1a;本节内容设计一…
阅读更多...
AI 深度学习让金融 β 系数估算更精确

AI 深度学习让金融 β 系数估算更精确

作者：老余捞鱼 原创不易，转载请标明出处及原作者。 写在前面的话： 传统的金融贝塔系数估计方法往往依赖于严格的假设，难以准确捕捉 Beta 的动态变化，这限制了它们在实际应用中的有效性。为了解决这些问题，本文开发了一种新方法：NeuralBeta，利用神经网络进行Bet…
阅读更多...
Centos7安装高版本内核

Centos7安装高版本内核

背景 买到的设备安装Centos7系统&#xff0c;但是新的处理器已经不支持低版本的Linux内核了。而且在 CentOS 使用过程中&#xff0c;高版本的应用环境可能需要更高版本的内核才能支持&#xff0c;所以难免需要升级内核。 内核种类 关于内核种类: kernel-ml&#xff1a;kerne…
阅读更多...
趋动科技陈飞：从小模型到大模型，AI时代下的数据中心建设

趋动科技陈飞：从小模型到大模型，AI时代下的数据中心建设

自AI大模型横空出世&#xff0c;不断推动着AI从学术界到产业界向大众破圈&#xff0c;新的时代正在来临。11月15-16日&#xff0c;由CDCC主办的“2023第11届数据中心标准大会”在北京国家会议中心盛大开幕。 本届大会的主题围绕“AI时代 重塑未来”&#xff0c;聚焦数据中心领…
阅读更多...
Spring：springboot集成jetcache循环依赖问题

Spring：springboot集成jetcache循环依赖问题

springboot版本&#xff1a;2.6.14 jetcache版本&#xff1a;2.6.2 启动项目报错如下&#xff1a; 解决方案&#xff1a; jetcache版本升级到2.6.4 https://github.com/alibaba/jetcache/issues/624
阅读更多...
phpstudy搭建sqlilabs本地靶场

phpstudy搭建sqlilabs本地靶场

请先在网上解决好前置条件的下载和安装&#xff1a;phpstudy、vscode、navicat premium(非必要)、sqlilab的压缩包/文件夹 phpstudy--安装sqlilabs 1.打开phpstudy后&#xff0c;我们会用到MySQL5.7.26和Nginx1.15.11 #mysql5.7.26是因为sqlilabs靶场不支持高版本MySQL 2.在软…
阅读更多...
Spring配置

Spring配置

1.Spring的两大核心思想IOC和AOP思想 1.1类注解 1.Controller, Service, Configuration, Component, Repository 1.2方法注解 bean&#xff08;这个方法搭配上面的五大注解进行使用&#xff09; 2.Bean的名称 2.1.类注解名称 &#xff08;1&#xff09;默认首字母小写驼…
阅读更多...
【C语言篇】字符和字符串以及内存函数的详细介绍与模拟实现（上篇）

【C语言篇】字符和字符串以及内存函数的详细介绍与模拟实现（上篇）

文章目录 字符函数字符输入输出函数字符输入函数字符输出函数 字符分类函数字符转换函数 字符串函数字符串输入输出函数字符串输入函数字符串输出函数 strlen函数的使用和模拟实现strcpy函数的使用和模拟实现strcat函数的使用和模拟实现strcmp函数的使用和模拟实现strncpy函数的…
阅读更多...
三十三、【人工智能】【机器学习】【监督学习】- LightGBM算法模型

三十三、【人工智能】【机器学习】【监督学习】- LightGBM算法模型

系列文章目录 第一章 【机器学习】初识机器学习 第二章 【机器学习】【监督学习】- 逻辑回归算法 (Logistic Regression) 第三章 【机器学习】【监督学习】- 支持向量机 (SVM) 第四章【机器学习】【监督学习】- K-近邻算法 (K-NN) 第五章【机器学习】【监督学习】- 决策树…
阅读更多...
【计算机操作系统】死锁的概念

【计算机操作系统】死锁的概念

文章目录 死锁的定义死锁、饥饿、死循环的区别死锁产生的必要条件死锁的处理策略小结&#xff08;思维导图&#xff09; 死锁的定义 死锁是指多个进程因竞争资源而造成的一种僵局&#xff08;互相等待&#xff09;&#xff0c;若无外力作用&#xff0c;这些进程都将无法向前推…
阅读更多...
二维差分日常练习

二维差分日常练习

前言&#xff1a;一开始写题的时候以为自己还记得&#xff0c;但是写的时候忘记了一个易错点 定义长度为 len , 那么 左上角的坐标为 &#xff08; i , j ) , 那么右下角的坐标为 为 ( i len -1 ,j len -1 ) #define _CRT_SECURE_NO_WARNINGS #include<bits/stdc.h> us…
阅读更多...
【阿旭机器学习实战】【39】脑肿瘤数据分析与预测案例：数据分析、预处理、模型训练预测、评估

【阿旭机器学习实战】【39】脑肿瘤数据分析与预测案例：数据分析、预处理、模型训练预测、评估

《------往期经典推荐------》 一、【100个深度学习实战项目】【链接】&#xff0c;持续更新~~ 二、机器学习实战专栏【链接】&#xff0c;已更新31期&#xff0c;欢迎关注&#xff0c;持续更新中~~ 三、深度学习【Pytorch】专栏【链接】 四、【Stable Diffusion绘画系列】专…
阅读更多...
苹果电脑维护工具：CleanMyMac X让你的Mac焕发新生！

苹果电脑维护工具：CleanMyMac X让你的Mac焕发新生！

在我们的数字生活中&#xff0c;苹果电脑&#xff08;Mac&#xff09;已成为不可或缺的一部分&#xff0c;无论是为工作披星戴月&#xff0c;还是为娱乐畅游云端。但是&#xff0c;就像任何长时间运行的机器一样&#xff0c;Mac也可能会因为积累的文件和不必要的数据而开始变慢…
阅读更多...
Linux云计算 |【第二阶段】NETWORK-DAY4

Linux云计算 |【第二阶段】NETWORK-DAY4

主要内容&#xff1a; NAT 原理与配置&#xff08;私有IP地址、静态NAT转换、Easy IP&#xff09;、VRRP解析&#xff08;主路由器、备份路由器、虚拟路由器、优先级&#xff09; 一、NAT概述 NAT 网络地址转换&#xff08;Network Address Translation&#xff09;是一种网络…
阅读更多...
NLP从零开始------9文本进阶处理之文本相似度计算

NLP从零开始------9文本进阶处理之文本相似度计算

1.文本相似度计算简介 在自然语言处理中&#xff0c;经常会涉及度量两个文本相似度的问题。在诸如对话系统和信息减速等中&#xff0c;度量句子或短语之间的相似度尤为重要。在新闻学传媒中应用文本相似度可以帮助读者快速检索到想要了解的报道。 文本相似度的定义式如下所示&a…
阅读更多...
YOLO系列：从yolov1至yolov8的进阶之路 持续更新中

YOLO系列：从yolov1至yolov8的进阶之路 持续更新中

一、基本概念 1.YOLO简介 YOLO&#xff08;You Only Look Once&#xff09;&#xff1a;是一种基于深度神经网络的对象识别和定位算法&#xff0c;其最大的特点是运行速度很快&#xff0c;可以用于实时系统。 2.目标检测算法 RCNN&#xff1a;该系列算法实现主要为两个步骤&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023