本文由张颢严同学原创。
前言
OpenTiny HUICharts 是一套功能强大的前端可视化图表库，提供丰富的图表组件、支持 Vue、React、Angular 等主流前端框架，并内置多套主题且可灵活定制，同时完全兼容 ECharts API，使开发高性能、响应式的数据可视化应用变得简单便捷。
RankProcessChart 基于 HUICharts 开发，专门用于展示排名及流程类数据的可视化效果，能够直观呈现复杂数据关系。
在使用 RankProcessChart 之前，需要先完成基本的开发环境配置。
环境准备与安装
1. 环境要求
在开始之前，首先确认安装了 NodeJs，并确保 NodeJs 版本是 10.13 或以上
检查 Node.js 版本
如果版本低于 10.13，请前往 Node.js 官网 下载安装最新的 LTS 版本。
2. 查看最新版本
在安装前，可以先查看 HUICharts 当前的最新版本：
npm show @opentiny/huicharts
复制代码
3. 安装 HUICharts
使用 npm 安装最新版本的 HUICharts：
# 使用 npmnpm 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.gitcd tiny-charts
复制代码
2. 安装依赖
3. 启动开发服务器
4. 访问项目
启动成功后，在浏览器中访问：
您将看到包含所有图表示例的文档站点，可以在线查看和调试各种图表效果。
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 是图表的核心数据，每个数据项代表一条记录。
数据项字段说明
示例
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 图表深色主题
示例
演示如下：
3. titleName - 名称列标题
类型 ：string
titleName 定义了顶部的第一列文本，用来规范 data 的 name 属性
默认值 ：'标题'
示例
4. valueName - 数值列标题
类型 ：string
valueName 定义了顶部的第二列文本，用来规范 data 的 value 属性
默认值 ：'数值'
示例
5. percentName - 百分比列标题
类型 ：string
percentName 定义了顶部的第三列文本，用来规范 data 的 percent 属性
默认值 ：'百分比'
示例
演示如下：
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' }
配置选项
示例
// 示例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 }
配置选项
formatter 函数
如果需要自定义 tooltip 内容，可以提供 formatter 函数：
参数：接收一个对象，包含当前数据项的所有信息
{ name: string, // 名称 value: number, // 数值 percent: number, // 百分比 color: string, // 颜色 content: string // 详细信息}
复制代码
返回值：HTML 字符串
示例
// 默认的tooltip配置tooltip: { show: true, formatter: null}
// 关闭 tooltiptooltip: { 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 标签，一起参与开源贡献~
评论