OpenTiny HUICharts開源釋出，帶你瞭解一個簡單、易上手的圖表元件庫

华为云开发者联盟發表於2024-08-09
UI元件
摘要：目前 OpenTiny HUICharts 已經成功落地在華為內部100多個產品中，持續提升了使用者的視覺化體驗。

本文分享自華為雲社群《OpenTiny HUICharts 正式開源釋出，一個簡單、易上手的圖表元件庫》，作者： OpenTiny。

引言

大家好！

我們非常高興地跟大家宣佈，今天正式釋出我們的新產品——OpenTiny HUICharts。這是一款前端 Web 視覺化圖表庫，其基礎圖表功能構建於 ECharts 之上，而高階圖表則採用了新的底層技術，以滿足更廣泛的資料視覺化需求。

OpenTiny HUICharts 整合了自適應、效能提升、資料狀態管理、無障礙能力、刻度最佳化、刻度均分等特性。這些特性幫助我們解決了許多內部業務場景中的問題。我們追求的目標是讓圖表的使用變得更加簡單、直觀且易於上手。

為什麼要做 OpenTiny HUICharts

OpenTiny HUICharts 的誕生源於我們的內部業務需求。在處理資料視覺化時，我們常常遇到兩個主要問題：工具過於複雜和定製性不足。許多現有的圖表工具雖然功能強大，但使用起來相對繁瑣，需要頻繁查詢 API 文件。在處理大量複雜資料時，我們發現市場上現有的解決方案無法完全滿足我們對資料視覺化工具的要求。此外，我們還意識到公司內許多部門使用的圖表工具缺乏統一的規範和主題樣式，這造成了視覺上的不一致。

綜合上面的問題，我們自主研發了 OpenTiny HUICharts。目前支援原生使用，也支援 Vue 框架封裝元件，參考 OpenTiny Vue 元件庫。 我們支援基礎圖表如線形圖、柱狀圖、圓盤圖、雷達圖等，這些圖基於 Echarts 圖表庫，但我們簡化了相關 API 的使用，使其更加統一和規範。而針對複雜場景，我們開發了一系列的高階圖表，使用時可按需引用，不依賴其他庫。

對我們來說，OpenTiny HUICharts 不僅僅是一個產品，更是我們對資料視覺化的一種全新探索。目前 OpenTiny HUICharts 已經成功落地在公司內部100多個產品中，持續提升了使用者的視覺化體驗。

OpenTiny HUICharts開源釋出，帶你瞭解一個簡單、易上手的圖表元件庫

元件總覽

  • 基礎圖表：線形圖、面積圖、柱狀圖、圓盤圖、雷達圖、地圖、桑基圖等等。
  • 複雜圖表：甘特圖、流程圖、河流圖、蜂窩圖、波紋圖、梯田圖、時間軸、組織關係圖、雪花圖、里程碑圖。使用時要按需引用，不依賴其他庫。
OpenTiny HUICharts開源釋出，帶你瞭解一個簡單、易上手的圖表元件庫

特性

1、一鍵換膚 & 主題定製

2、可定製化響應式圖表

3、生命週期

4、低程式碼開發

5、內建資料狀態提示

6、複雜視覺化圖表

一鍵換膚 & 主題定製

基於 Design Token 樣式變數，可依據產品和品牌多樣化的視覺需求實現靈活的樣式定義與主題切換。使用者可透過當前頁面右側的操作皮膚調整相應樣式變數（如：字型、間距、各類顏色等）實時預覽定製效果。

OpenTiny HUICharts開源釋出，帶你瞭解一個簡單、易上手的圖表元件庫

可定製化響應式圖表

傳統的圖表庫自適應通常是簡單的圖元縮小，OpenTiny HUICharts 提供了可定製化圖表響應式能力，並提供語法糖。

如使用者可根據容器寬度，自行抉擇隱藏非必要的圖元屬性，如圖例、座標軸等。

OpenTiny HUICharts開源釋出，帶你瞭解一個簡單、易上手的圖表元件庫

生命週期

為了讓開發者能夠更靈活、更高效地管理圖表的建立、更新和銷燬過程，OpenTiny HUICharts 圖表庫提供了生命週期功能，能夠在元件的初始化，更新，銷燬這幾個階段進行呼叫回撥。

例如，當您要重新整理已經渲染完畢的圖表時，如果您想重新整理配置項和資料，可以使用：

// 新的配置項，為物件格式
let newChartOption = {...};
chartIns.refresh(newChartOption);

如果想對圖表渲染完畢進行回撥，可以這樣：

chartIns.onRenderReady(callback);

內建資料狀態提示

提供資料狀態介面和呼叫介面，也支援使用者傳入自定義的圖示和文字。

OpenTiny HUICharts開源釋出，帶你瞭解一個簡單、易上手的圖表元件庫

複雜視覺化圖表

OpenTiny HUICharts 提供了傳統圖表庫不包含的複雜視覺化圖表元件，圖表包含自研演算法佈局和圖形繪製。

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 開源社群。新增微信小助手：opentiny-official 一起參與交流前端技術～
OpenTiny 官網：https://opentiny.design/
OpenTiny HUICharts 原始碼：https://github.com/opentiny/tiny-charts
歡迎進入程式碼倉庫 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建，可以進入程式碼倉庫，找到 good first issue標籤，一起參與開源貢獻~

（溫馨提示：OpenTiny CCF開源創新大賽也在持續報名中，歡迎大家一起報名參賽，贏取10W獎金）

點選關注，第一時間瞭解華為雲新鮮技術~

相關文章