老闆要排名可視化？我反手甩出TinyChart 排名進度圖詳情 - 前端,圖表庫 OpenTiny社區動態日志

本文由張顥嚴同學原創。

前言

OpenTiny HUICharts 是一套功能強大的前端可視化圖表庫，提供豐富的圖表組件、支持 Vue、React、Angular 等主流前端框架，並內置多套主題且可靈活定製，同時完全兼容 ECharts API，使開發高性能、響應式的數據可視化應用變得簡單便捷。

RankProcessChart 基於 HUICharts 開發，專門用於展示排名及流程類數據的可視化效果，能夠直觀呈現複雜數據關係。

在使用 RankProcessChart 之前，需要先完成基本的開發環境配置。

環境準備與安裝

1. 環境要求

在開始之前，首先確認安裝了 NodeJs，並確保 NodeJs 版本是 10.13 或以上

檢查 Node.js 版本

node -v

如果版本低於 10.13，請前往 Node.js 官網下載安裝最新的 LTS 版本。

2. 查看最新版本

在安裝前，可以先查看 HUICharts 當前的最新版本：

npm show @opentiny/huicharts

3. 安裝 HUICharts

使用 npm 安裝最新版本的 HUICharts：

# 使用 npm
npm install @opentiny/huicharts@latest --save

安裝完成後，您就可以在項目中引入並使用 HUICharts 了。

快速開始

基本使用流程

下面是一個示範，展示如何在項目中創建並渲染一個圖表：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>RankProcessChart演示</title>
  <style>
    #RankProcessChart {
      width: 800px;
      height: 800px;
      background-color: #fff;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="app">
    <div id="RankProcessChart"></div>
  </div>

  <script type="module">
    import HuiCharts, { RankProcessChart } from '@opentiny/huicharts';

    const chartContainer = document.getElementById('RankProcessChart');
    const chart = new HuiCharts();
    chart.init(chartContainer);

    const chartOption = {
      name: 'RankProcessChart',
      theme: 'hdesign-light',
      padding: ['middle', 16, 0, 16],
      titleName: '名稱',
      valueName: '金額',
      percentName: '貢獻度',
      tooltip: { 
          show: true,
          formatter: null
      },
      sort: {
          field: 'value',
          order: 'desc'
      },
      data: [
        { name: '小王', value: 100, percent: 100 },
        { name: '小明', value: 60, percent: 60 },
        { name: '小智', value: 40, percent: 40 },
        { name: '小剛', value: 70, percent: 70 },
        { name: '小李', value: 50, percent: 50 }
      ],
    };

    chart.setSimpleOption(RankProcessChart, chartOption);
    chart.render();
  </script>
</body>
</html>

下面是在瀏覽器中打開的效果：

在不同框架中使用

Vue 3 示例

<template>
  <div class="app">
    <div id="chart" style="width: 600px; height: 400px; margin: 40px auto;"></div>
  </div>
</template>

<script setup>
    import { onMounted } from 'vue'
    import HuiCharts, { RankProcessChart } from '@opentiny/huicharts';

    onMounted(() => {
      const chartContainer = document.getElementById('chart')
      const chart = new HuiCharts()
      chart.init(chartContainer)

      const chartOption = {
          name: 'RankProcessChart',
          theme: 'hdesign-light',
          padding: [16, 16, 0, 16], 
          titleName: '名稱',
          valueName: '金額',
          percentName: '貢獻度',
          tooltip: {
                show: true,
                formatter: null
          },
          sort: {
                field: 'value',
                order: 'desc'
          },
          data:[
                  { name: '小王', value: 100, percent: 100 },
                { name: '小明', value: 60, percent: 60 },
                { name: '小智', value: 40, percent: 40 },
                { name: '小剛', value: 70, percent: 70 },
                { name: '小李', value: 50, percent: 50 }
          ],
      };
        
      chart.setSimpleOption(RankProcessChart, chartOption)
      chart.render()

    })
</script>

<style>
    .app {
      text-align: center;
    }
</style>

React 示例

import React, { useEffect, useRef } from 'react';
import HuiCharts, { RankProcessChart } from '@opentiny/huicharts';

const App = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = new HuiCharts();
    chart.init(chartRef.current);

    const chartOption = {
      theme: 'hdesign-light',
      name: 'RankProcessChart',
      padding: [16, 16, 0, 16],
      titleName: '名稱',
      valueName: '金額',
      percentName: '貢獻度',
      tooltip: { show: true },
      sort: { field: 'value', order: 'desc' },
      data: [
        { name: '小王', value: 100, percent: 100 },
        { name: '小明', value: 60, percent: 60 },
        { name: '小智', value: 40, percent: 40 },
        { name: '小剛', value: 70, percent: 70 },
        { name: '小李', value: 50, percent: 50 }
      ],
    };

    chart.setSimpleOption(RankProcessChart, chartOption);
    chart.render();

  }, []);

  return (
    <div className="app" style={{ textAlign: 'center' }}>
      <div
        ref={chartRef}
        style={{ width: '600px', height: '400px', margin: '40px auto' }}
      ></div>
    </div>
  );
};

export default App;

本地開發環境搭建

如果您想參與 HUICharts 的開發，或在本地查看完整示例，可以按照以下步驟搭建本地開發環境：

1. 克隆項目

git clone git@github.com:opentiny/tiny-charts.git
cd tiny-charts

2. 安裝依賴

npm install

3. 啓動開發服務器

npm run dev

4. 訪問項目

啓動成功後，在瀏覽器中訪問：

http://localhost:8080/

您將看到包含所有圖表示例的文檔站點，可以在線查看和調試各種圖表效果。

RankProcessChart 排名進度圖詳解

圖表簡介

RankProcessChart（排名進度圖） 是一個專門用於展示排名和進度數據的可視化組件。它以直觀的橫向進度條形式展示每個項目的排名、數值和貢獻度。

圖表特點

數據展示：RankProcessChart 支持在每行數據中展示標題文本，數值文本，百分比文本以及進度條圖形，且在圖表頂部允許提供列頭來概括該列信息，信息均可由用户自定義
數據排序：RankProcessChart 支持對數據進行排序並展示排名和進度數據，同時用户可自定義排序的依據和排序方法
自定義tooltip：RankProcessChart 支持對每行數據展示額外的信息，在鼠標懸浮到進度條時會出現tooltip，且tooltip的內容和格式均可由用户自定義
縱向滾動條：RankProcessChart 支持在數據條數過多時，在縱向出現滾動條，用户可通過鼠標滑動查看數據
自定義配色：RankProcessChart 支持用户自定義進度條配色，且包括單列進度條配色和全局進度條默認配色
過長標題顯示tips：RankProcessChart 支持在每行的標題文本過長截斷並出現 ... 省略，當鼠標懸浮到標題文本時出現tips，展示完整的標題文本

配置項詳解

下面詳細介紹 RankProcessChart 的所有配置選項及其作用。

完整配置項

const chartOption = {
    // 圖表名稱
    name: 'RankProcessChart',
    
    // 主題樣式
    theme: 'hdesign-light',
    
    // 內邊距 [上, 右, 下, 左]
    padding: [16, 16, 0, 16],
    
    // 列標題
    titleName: '名稱',
    valueName: '數值',
    percentName: '百分比',
    
    // 全局進度條配色
    color: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
    
    // 排序配置
    sort: {
        field: 'value',    // 排序依據，可選'value' 或 'percent'
        order: 'desc'      // 排序方式，可選'asc'、'desc'、'none'
    },
    
    // 提示框配置
    tooltip: {
        show: true,        // tooltip是否展示
        formatter: null    // 自定義格式函數
    },
    
    // 數據
    data: [
        {
            name: '項目名稱',         // 必需
            value: 100,              // 必需
            percent: 85,             // 必需
            color: '#FF0000',        // 可選
            content: '詳細描述'        // 可選
        }
    ]
};

1. data - 圖表數據（必需）

類型：Array<Object>

data是圖表的核心數據，每個數據項代表一條記錄。

數據項字段説明

字段名	類型	必需	默認值	説明
`name`	`string`	`是`	`'未命名'`	顯示名稱，如項目名、人員名等
`value`	`number`	`是`	`0`	顯示數值，可用於排序
`percent`	`number`	`是`	`0`	百分比進度，範圍 0-100，可用於排序
`color`	`string`	`否`	`null`	用户自定義該行進度條顏色
`content`	`string`	`否`	`''`	鼠標懸浮時顯示的用户自定義信息

示例

data: [
    { 
        name: '項目A', 
        value: 96, 
        percent: 96 
    },
    { 
        name: '項目B', 
        value: 85, 
        percent: 85, 
        content: '項目B詳細信息',
    },
    { 
        name: '項目C', 
        value: 72, 
        percent: 72, 
        content: '項目C詳細信息' 
        color: '#FF6B6B'
    },
]

演示如下:

2.1.gif

2. `theme` - 主題樣式

類型：string

theme用來設置圖表的主題風格，影響整體色彩和樣式。

默認值：'hdesign-light'

可選值：

light ：ICT3.0圖表淺色主題
dark ：ICT3.0圖表深色主題
hdesign-light ：H Design1.1圖表淺色主題
hdesign-dark ：H Design1.1圖表深色主題
cloud-light ：華為雲圖表淺色主題
cloud-dark ：華為雲圖表深色主題
dpui-light ：質量&流程IT圖表淺色主題
dpui-dark ：質量&流程IT圖表深色主題

示例

theme: 'hdesign-light'

演示如下：

3. titleName - 名稱列標題

類型：string

titleName定義了頂部的第一列文本，用來規範data的name屬性

默認值：'標題'

示例

titleName: '部門名稱'

4. valueName - 數值列標題

類型：string

valueName定義了頂部的第二列文本，用來規範data的value屬性

默認值：'數值'

示例

valueName: '營業額'

5. percentName - 百分比列標題

類型：string

percentName定義了頂部的第三列文本，用來規範data的percent屬性

默認值：'百分比'

示例

percentName: '增長率'

演示如下：

4.1.GIF

6. padding - 內邊距

類型：Array<number | string>

padding用來控制圖表距離容器的內邊距，順序為 [top, right, bottom, left]。

默認值：[16, 16, 0, 16]

支持的值類型

數字：直接像素值，如 16
百分比字符串：相對容器尺寸，如 '10%'
位置詞：
- 垂直方向（僅適用於top）：'top'、'middle'、'bottom'
- 水平方向（僅適用於left）：'left'、'center'、'right'

示例

// 數字方式
padding: [16, 16, 0, 16]

// 百分比方式
padding: ['5%', '5%', '5%', '5%']

// 位置詞方式
padding: ['top', 0, 0, 'left']

// 混合方式
padding: ['top', '10%', 0, 20]

演示如下：

5.1.GIF

7. color - 顏色配置

類型：Array<string | null>

color用來自定義圖表的配色方案，配置之後會頂替當前主題的默認配色，如果進度條沒有顏色配置，則顏色從color中輪換取色

默認值：[]

顏色優先級

數據項的顏色選擇遵循以下優先級：

數據項 color：單個數據項的 color 字段
全局 color 數組：配置中的 color 數組
主題默認色：主題提供的默認配色

示例

color: [
    '#FF6B6B',
    '#4ECDC4',
    '#45B7D1',
    '#96CEB4',
    '#FFEAA7'
]

演示如下：

6.1.GIF

8. sort - 排序配置

類型：Object

sort用來控制數據的排序方式

默認值：{ field: 'value', order: 'desc' }

配置選項

字段	類型	可選值	默認值	説明
`field`	`string`	`'value'`、`'percent'`	`'value'`	`field`決定排序所依據的屬性，`value`則根據`value`排序，`percent`則根據`percent`排序
`order`	`string`	`'asc'`、`'desc'`、`'none'`	`'desc'`	`order`決定如何排序，`asc`表示升序排序,`desc`表示降序排序，`none`表示不排序

示例

// 示例1：按數值降序（默認）
sort: {
    field: 'value',
    order: 'desc'
}

// 示例2：按百分比升序
sort: {
    field: 'percent',
    order: 'asc'
}

// 示例3：不排序
sort: {
    field: 'value',
    order: 'none'
}

演示如下：

9. tooltip - 提示框配置

類型：Object

tooltip用來配置鼠標懸浮時顯示的提示框。

默認值：{ show: true, formatter: null }

配置選項

字段	類型	默認值	説明
`show`	`boolean`	`true`	是否顯示提示框
`formatter`	`Function \	null`	`null`	自定義格式化函數

formatter 函數

如果需要自定義 tooltip 內容，可以提供 formatter 函數：

參數：接收一個對象，包含當前數據項的所有信息

{
    name: string,      // 名稱
    value: number,     // 數值
    percent: number,   // 百分比
    color: string,     // 顏色
    content: string    // 詳細信息
}

返回值：HTML 字符串

示例

// 默認的tooltip配置
tooltip: {
    show: true,
    formatter: null
}

// 關閉 tooltip
tooltip: {
    show: false
}

// 自定義 tooltip 內容
tooltip: {
    show: true,
    formatter: function(params) {
        const { name, value, percent, color, content } = params;
        
        return `
            <div style="padding: 12px;">
                <div style="font-weight: bold; color: ${color}; margin-bottom: 8px;">
                    ${name}
                </div>
                <div>數值: <strong>${value}</strong></div>
                <div>完成度: <strong>${percent}%</strong></div>
                ${content ? `<div style="margin-top: 8px; color: #666;">${content}</div>` : ''}
            </div>
        `;
    }
}

演示如下：

總結

RankProcessChart 提供了對排名與進度數據的高度定製能力。建議在設計時遵循配置優先級、在外層預處理數值與格式、併兼顧無障礙對比與移動端交互。合理配置與文檔化這些選項，可顯著提升 RankProcessChart 在不同場景下的可用性、可維護性與用户體驗。

關於OpenTiny

歡迎加入 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
歡迎進入代碼倉庫 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~
如果你也想要共建，可以進入代碼倉庫，找到 good first issue 標籤，一起參與開源貢獻~