一、开源项目简介

OpenTiny HUICharts 是一套功能强大的前端可视化图表库，为Web开发者提供了40多个图表组件，支持主题定制、响应式和无障碍等丰富的能力，且完全兼容 ECharts 的 API。

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

特性：

• 包含40多个简洁、易用的图表组件

• 一套代码同时支持Vue、Angular、React框架

• 集成多套主题规范，支持主题定制

• 集成自适应、性能提升、无障碍能力、刻度优化等特性

五、技术选型

OpenTiny HUICharts

Web 前端框架技术栈

• 基础图表：依赖于 ECharts：5.4.3

• 高阶图表：河流图、蜂窝图、梯田图、时间轴、组织关系图、雪花图、里程碑图。使用时要按需引用，不依赖其他库。

️ 如何使用

1. 安装

• 环境准备，首先确认安装了 Node.js，并确保 Node.js 版本是 10.13 或以上。使用 node -v 命令查看 node 版本

• 查看组件库当前的版本 npm show @opentiny/huicharts

• 使用 npm 安装组件库最新版本: npm install @opentiny/huicharts@latest --save

2. 引入和使用

// 引用图表库
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 = {...};
// 指定使用图表类型：LineChart、AreaChart、BarChart、PieChart、GaugeChart、RadarChart、ProcessChart、BubbleChart等
// 图表类型的英文名称可以在文档左侧菜单栏看到
let chartType = 'LineChart';
chartIns.setSimpleOption(chartType, chartOption);

// 开始渲染
chartIns.render();

️ 本地开发

访问一飞开源：https://code.exmay.com/ 一下载

cd tiny-charts
npm i

# 启动项目
npm run dev

打开浏览器访问：http://localhost:8080/

浏览器

html

无

       积分下载        0毛下载

未经允许不得转载： ICode联盟 » 项目源码 » [开源]一套功能强大的前端可视化图表库，完全兼容 ECharts 的 API