我用3 分钟上手 RankProcessChart 排名进度图！

前言

OpenTiny HUICharts 是一套功能强大的前端可视化图表库，提供丰富的图表组件、支持 Vue、React、Angular 等主流前端框架，并内置多套主题且可灵活定制，同时完全兼容 ECharts API，使开发高性能、响应式的数据可视化应用变得简单便捷。

RankProcessChart 基于 HUICharts 开发，专门用于展示排名及流程类数据的可视化效果，能够直观呈现复杂数据关系。

在使用 RankProcessChart 之前，需要先完成基本的开发环境配置。

环境准备与安装

1. 环境要求

在开始之前，首先确认安装了 NodeJs，并确保 NodeJs 版本是 10.13 或以上

检查 Node.js 版本

bash 复制代码

node -v

如果版本低于 10.13，请前往 Node.js 官网下载安装最新的 LTS 版本。

2. 查看最新版本

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

bash 复制代码

npm show @opentiny/huicharts

3. 安装 HUICharts

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

bash 复制代码

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

安装完成后，您就可以在项目中引入并使用 HUICharts 了。

快速开始

基本使用流程

下面是一个示范，展示如何在项目中创建并渲染一个图表：

javascript 复制代码

<!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 示例

vue 复制代码

<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 示例

jsx 复制代码

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. 克隆项目

bash 复制代码

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

2. 安装依赖

bash 复制代码

npm install

3. 启动开发服务器

bash 复制代码

npm run dev

4. 访问项目

启动成功后，在浏览器中访问：

arduino 复制代码

http://localhost:8080/

您将看到包含所有图表示例的文档站点，可以在线查看和调试各种图表效果。

RankProcessChart 排名进度图详解

图表简介

RankProcessChart（排名进度图） 是一个专门用于展示排名和进度数据的可视化组件。它以直观的横向进度条形式展示每个项目的排名、数值和贡献度。

图表特点

数据展示 ：RankProcessChart 支持在每行数据中展示标题文本，数值文本，百分比文本以及进度条图形，且在图表顶部允许提供列头来概括该列信息，信息均可由用户自定义
数据排序 ：RankProcessChart 支持对数据进行排序并展示排名和进度数据，同时用户可自定义排序的依据和排序方法
自定义tooltip ：RankProcessChart 支持对每行数据展示额外的信息，在鼠标悬浮到进度条时会出现tooltip，且tooltip的内容和格式均可由用户自定义
纵向滚动条 ：RankProcessChart 支持在数据条数过多时，在纵向出现滚动条，用户可通过鼠标滑动查看数据
自定义配色 ：RankProcessChart 支持用户自定义进度条配色，且包括单列进度条配色和全局进度条默认配色
过长标题显示tips ：RankProcessChart 支持在每行的标题文本过长截断并出现 ... 省略，当鼠标悬浮到标题文本时出现tips，展示完整的标题文本

配置项详解

下面详细介绍 RankProcessChart 的所有配置选项及其作用。

完整配置项

javascript 复制代码

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`	`否`	`''`	鼠标悬浮时显示的用户自定义信息

示例

javascript 复制代码

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图表深色主题

示例

javascript 复制代码

theme: 'hdesign-light'

演示如下：

3. titleName - 名称列标题

类型：string

titleName定义了顶部的第一列文本，用来规范data的name属性

默认值 ：'标题'

示例

javascript 复制代码

titleName: '部门名称'

4. valueName - 数值列标题

类型：string

valueName定义了顶部的第二列文本，用来规范data的value属性

默认值 ：'数值'

示例

javascript 复制代码

valueName: '营业额'

5. percentName - 百分比列标题

类型：string

percentName定义了顶部的第三列文本，用来规范data的percent属性

默认值 ：'百分比'

示例

javascript 复制代码

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'

示例

javascript 复制代码

// 数字方式
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 数组
主题默认色：主题提供的默认配色

示例

javascript 复制代码

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`表示不排序

示例

javascript 复制代码

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

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

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

演示如下：

类型：Object

tooltip用来配置鼠标悬浮时显示的提示框。

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

配置选项

字段	类型	默认值	说明
`show`	`boolean`	`true`	是否显示提示框
`formatter`	`Function	null`	`null`

formatter 函数

如果需要自定义 tooltip 内容，可以提供 formatter 函数：

参数：接收一个对象，包含当前数据项的所有信息

javascript 复制代码

{
    name: string,      // 名称
    value: number,     // 数值
    percent: number,   // 百分比
    color: string,     // 颜色
    content: string    // 详细信息
}

返回值：HTML 字符串

示例

javascript 复制代码

// 默认的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 官网：opentiny.design

OpenTiny 代码仓库：github.com/opentiny

TinyVue 源码：github.com/opentiny/ti...

TinyEngine 源码： github.com/opentiny/ti...

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~ 如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~

我用3 分钟上手 RankProcessChart 排名进度图！

前言

环境准备与安装

1. 环境要求

2. 查看最新版本

3. 安装 HUICharts

快速开始

基本使用流程

在不同框架中使用

Vue 3 示例

React 示例

本地开发环境搭建

1. 克隆项目

2. 安装依赖

3. 启动开发服务器

4. 访问项目

RankProcessChart 排名进度图详解

图表简介

图表特点

配置项详解

完整配置项

1. data - 图表数据（必需）

2. theme - 主题样式

3. titleName - 名称列标题

4. valueName - 数值列标题

5. percentName - 百分比列标题

6. padding - 内边距

7. color - 颜色配置

8. sort - 排序配置

9. tooltip - 提示框配置

总结

关于OpenTiny

2. `theme` - 主题样式