在数据密集型表格中将统计图表直接嵌入单元格可以极大提升数据可读性与决策效率。vxe-table 原生支持柱状图条形图与饼图含环形图、多饼混合的单元格渲染具备以下核心能力高性能基于 Canvas 轻量绘制配合虚拟滚动支持万级数据流畅滚动。高灵活性支持自定义颜色、标签、提示框tooltip、数值范围、环形内径等。多数据格式数组形式传入数值如 [30, 70]自动计算占比或绘制多系列柱状图。混合渲染一个单元格内可渲染多个独立饼图pies 渲染器。柱状图柱状图渲染器名称为 bar通过 cellRender 配置即可在表格列中展示横向或纵向进度条默认为横向百分比条。支持单值、多值并列显示并可以设置最大值、颜色、标签等。参数说明属性类型说明bar.maxnumber柱状图的最大参考值用于比例计算默认自动取最大值或 100colorsstring[]多系列柱状图的颜色数组如 [‘#FFDB5C’, ‘#91C7AE’]labelsstring[]多系列对应的图例标签用于 tooltip 中的 {label} 占位符labelobject数值标签配置{ formatter: ‘{value}%’ }支持 {value} 占位符tooltipobject提示框格式化{ formatter: ‘{label}{value}%’ }templatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstnum10CellRenderreactive({name:bar,props:{bar:{max:100},label:{formatter:{value}%}}})constnum11CellRenderreactive({name:bar,props:{label:{formatter:{value}}}})constnum12CellRenderreactive({name:bar,props:{bar:{max:140},colors:[#FFDB5C,#91C7AE,#D48265],labels:[团队1,团队2,团队3],tooltip:{formatter:{label}{value}%},label:{formatter:{value}%}}})constgridOptionsreactive({border:true,showOverflow:true,height:500,columnConfig:{resizable:true},columns:[{type:seq,width:70},{field:name,title:Name},{field:num10,title:柱状图,width:200,cellRender:num10CellRender},{field:num11,title:柱状图 - 显示值,width:200,cellRender:num11CellRender},{field:num12,title:柱状图 - 最大值,width:200,cellRender:num12CellRender}],data:[{id:101,name:test1,num10:[60],num11:[60,111],num12:[60,134,76]},{id:102,name:test2,num10:[85],num11:[33,25],num12:[42,73,22]},{id:103,name:test3,num10:[45],num11:[60,104],num12:[6,64,44]},{id:104,name:test4,num10:[88],num11:[76,99],num12:[41,81,77]},{id:105,name:test5,num10:[72],num11:[27,157],num12:[48,101,76]},{id:106,name:test6,num10:[50],num11:[8,111],num12:[60,5,19]},{id:107,name:test7,num10:[16],num11:[60,6],num12:[9,57,34]},{id:108,name:test8,num10:[24],num11:[23,68],num12:[35,111,80]},{id:109,name:test9,num10:[100],num11:[14,66],num12:[27,34,98]},{id:1010,name:test10,num10:[98],num11:[44,98],num12:[29,107,127]}]})/script饼图饼图渲染器名称为 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 数量一致内层数组为每个小饼图的数据。templatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstnum20CellRenderreactive({name:pie,props:{ring:{diameter:60%}}})constnum21CellRenderreactive({name:pie,props:{colors:[#FFDB5C,#F0F0F0],ring:{diameter:60%},label:{formatter:{value[0]}%}}})constnum23CellRenderreactive({name:pie})constnum30CellRenderreactive({name:pie,props:{colors:[#FFDB5C,#91C7AE,#D48265],labels:[团队1,团队2,团队3],ring:{diameter:60%,color:#2F4554},tooltip:{formatter:{label}{value}%},label:{color:#ffffff,formatter:概况}}})constnum31CellRenderreactive({name:pies,children:[{props:{tooltip:{formatter:值{value}},colors:[#FFDB5C,#D48265],ring:{diameter:60%}}},{props:{tooltip:{formatter:值{value}}}},{props:{tooltip:{formatter:值{value}}}}]})constgridOptionsreactive({border:true,showOverflow:true,height:500,columnConfig:{resizable:true},columns:[{type:seq,width:70},{field:name,title:Name},{field:num20,title:饼图 - 环形,width:100,cellRender:num20CellRender},{field:num21,title:饼图 - 自定义环形,width:140,cellRender:num21CellRender},{field:num23,title:饼图 - 实心,width:100,cellRender:num23CellRender},{field:num30,title:饼图 - 自定义实心,width:140,cellRender:num30CellRender},{field:num31,title:多种混合,width:200,cellRender:num31CellRender}],data:[{id:101,name:test1,num20:[30,70],num21:[30,70],num30:[47,67,67],num31:[[60,28,26],[77,100],[77,100,8,55,100,77,142]],num23:[20,30,50]},{id:102,name:test2,num20:[50,50],num21:[60,40],num30:[60,83,33],num31:[[28,60,32],[88,40],[22,100,9,55,111,86,100]],num23:[200,400,500]},{id:103,name:test3,num20:[33,67],num21:[27,78],num30:[84,11,14],num31:[[100,17,39],[100,220],[7,100,11,77,105,77,100]],num23:[10,80,10]},{id:104,name:test4,num20:[11,89],num21:[50,50],num30:[25,71,67],num31:[[19,76,99],[77,702],[33,100,77,66,174,69,100]],num23:[80,10,10]},{id:105,name:test5,num20:[19,81],num21:[67,33],num30:[100,29,55],num31:[[35,63,100],[53,8],[77,100,66,33,100,97,100]],num23:[18,30,26]},{id:106,name:test6,num20:[16,84],num21:[17,83],num30:[66,100,67],num31:[[13,57,60],[330,546],[11,100,58,72,100,178,100]],num23:[14,33,26]},{id:107,name:test7,num20:[98,2],num21:[86,14],num30:[60,9,5],num31:[[60,40,0],[120,100],[22,100,77,44,10,77,198]],num23:[20,5,15]},{id:108,name:test8,num20:[63,37],num21:[99,1],num30:[55,76,67],num31:[[46,71,83],[77,100],[77,100,65,97,9,59,100]],num23:[10,20,30,40]},{id:109,name:test9,num20:[48,52],num21:[8,92],num30:[97,60,41],num31:[[55,33,53],[747,52],[73,100,78,81,100,77,174]],num23:[14,20,36]},{id:1010,name:test10,num20:[72,28],num21:[22,78],num30:[17,10,31],num31:[[77,100,58],[75,85],[14,250,59,44,16,50,100]],num23:[200,400,500]}]})/script大数据量对于几万行数据选丝滑流畅启用虚拟滚动方式virtual-scroll“{ gt: 0 }”https://vxetable.cn