前言
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>
`;
}
}
演示如下：
![]()
总结
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 标签，一起参与开源贡献~
