vxe-table 高性能渲染单位格图表：柱状图与饼图

在数据麋集型表格中，将统计图表直接嵌入单位格，可以极大提升数据可读性与决议服从。vxe-table 原生支持柱状图（条形图）与饼图（含环形图、多饼混淆）的单位格渲染，具备以下焦点本领：

• 高性能：基于 Canvas 轻量绘制，共同假造滚动，支持万级数据流畅滚动。
  
• 高机动性：支持自界说颜色、标签、提示框（tooltip）、数值范围、环形内径等。
  
• 多数据格式：数组情势传入数值（如 [30, 70]），自动盘算占比或绘制多系列柱状图。
  
• 混淆渲染：一个单位格内可渲染多个独立饼图（pies 渲染器）。
  

柱状图

柱状图渲染器名称为 bar，通过 cellRender 设置即可在表格列中展示横向或纵向进度条（默以为横向百分比条）。支持单值、多值并列体现，并可以设置最大值、颜色、标签等。
参数阐明：
属性范例阐明bar.maxnumber柱状图的最大参考值，用于比例盘算（默认自动取最大值或 100）colorsstring[]多系列柱状图的颜色数组，如 ['#FFDB5C', '#91C7AE']labelsstring[]多系列对应的图例标签，用于 tooltip 中的 {label} 占位符labelobject数值标签设置：{ formatter: '{value}%' }，支持 {value} 占位符tooltipobject提示框格式化：{ formatter: '{label}：{value}%' }

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

饼图

饼图渲染器名称为 pie（单个饼图）或 pies（多个小饼图混淆）。支持环形图、实心饼图、自界说中央笔墨、提示框等。
参数阐明
属性范例阐明ringobject环形设置：{ diameter: '60%', color: '#2F4554' }。diameter 为内径占比（百分比字符串），color 为中央颜色。不设置则为实心饼图。colorsstring[]扇区颜色数组labelsstring[]扇区标签，用于 tooltip 中的 {label} 占位符labelobject图表中央文本（仅环形图见效）：{ color: '#fff', formatter: '概况' }。若需在每个扇区体现数值，可使用 formatter: '{value[0]}%'（体现第一个扇区的百分比）tooltipobject提示框格式化：{ formatter: '{label}：{value}%' }

• 多饼图混淆渲染（pies）
  
  
  
  • 通过 children 数组设置多个独立饼图，每个子项支持上述 pie 的全部 props。
    
  • 数据格式：字段值必须为二维数组，外层数组长度与 children 数目同等，内层数组为每个小饼图的数据。
    
  
  

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

大数据量

对于几万行数据选，丝滑流畅，启用假造滚动方式：virtual-scroll="{ gt: 0 }"
https://vxetable.cn

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.