OpenTiny HUICharts——RankProcessChart 排名进度图上手指南

是一套功能强大的前端可视化图表库，提供丰富的图表组件、支持 Vue、React、Angular 等主流前端框架，并内置多套主题且可灵活定制，同时完全兼容 ECharts API，使开发高性能、响应式的数据可视化应用变得简单便捷。基于HUICharts开发，专门用于展示排名及流程类数据的可视化效果，能够直观呈现复杂数据关系。在使用之前，需要先完成基本的开发环境配置。RankProcessChart（

OpenTiny社区

864人浏览 · 2025-10-28 10:51:19

OpenTiny社区 · 2025-10-28 10:51:19 发布

本文由张颢严同学原创。

前言

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. `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: '增长率'

演示如下：

请添加图片描述

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]

演示如下：

请添加图片描述

7. color - 颜色配置

类型：Array<string | null>

color用来自定义图表的配色方案，配置之后会顶替当前主题的默认配色，如果进度条没有颜色配置，则颜色从color中轮换取色

默认值：[]

颜色优先级

数据项的颜色选择遵循以下优先级：

数据项 color：单个数据项的 color 字段
全局 color 数组：配置中的 color 数组
主题默认色：主题提供的默认配色

示例

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

演示如下：

请添加图片描述

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>
        `;
    }
}