vue在单元格中渲染简化柱状图：数据可视化新方式

在后台管理或数据分析类应用中，单纯展示数字往往不够直观。在表格单元格内嵌入柱状图，可以让数值的大小、对比关系一目了然。vxe-table 官方插件 @vxe-ui/plugin-render-chart 提供了轻量级的柱状图渲染器，支持单值、多值柱状图，并允许自定义颜色、标签和提示框。

使用

npm install vxe-table@4.20.7 @vxe-ui/plugin-render-chart@4.4.0

import { VxeUI } from 'vxe-table'
import VxeUIPluginRenderChart from '@vxe-ui/plugin-render-chart'

VxeUI.use(VxeUIPluginRenderChart)

基础用法

在列定义中，通过 cellRender 指定渲染器名称 'bar'，数据字段应为数值数组。

{
  field: 'num10',
  title: '柱状图',
  cellRender: {
    name: 'bar',
    props: {
      bar: { max: 100 },          // 柱状图最大值
      label: { formatter: '{value}%' } // 数值标签格式
    }
  }
}

代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const num10CellRender = reactive({
  name: 'bar',
  props: {
    bar: {
      max: 100
    },
    label: {
      formatter: '{value}%'
    }
  }
})

const num11CellRender = reactive({
  name: 'bar',
  props: {
    label: {
      formatter: '{value}'
    }
  }
})

const num12CellRender = reactive({
  name: 'bar',
  props: {
    bar: {
      max: 140
    },
    colors: ['#FFDB5C', '#91C7AE', '#D48265'],
    labels: ['团队1', '团队2', '团队3'],
    tooltip: {
      formatter: '{label}：{value}%'
    },
    label: {
      formatter: '{value}%'
    }
  }
})

const gridOptions = reactive({
  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>

配置属性详解

属性	类型	默认值	说明
bar.max	number	100	柱状图的最大值，所有柱子的高度以此为基准。
colors	string[]	自动生成	各柱的颜色数组，按顺序对应数据项。
labels	string[]	—	各柱的标签（用于 Tooltip 和图例）。
label.formatter	string	'{value}'	数值标签格式化模板，支持 {value} 和 {percent}（百分比）。
tooltip.formatter	string	'{label}：{value}'	悬浮提示模板，支持 {label}、{value}、{percent}。
width	number	自动	每个柱子的宽度（px），默认根据单元格宽度自适应。
gap	number	4	柱之间的间距（px）。

注意：percent 是通过 value / max * 100 计算得出的百分比值，可用于显示百分比标签。

适用场景

场景	推荐配置
单指标对比（如完成率）	单柱图，显示百分比标签。
多维度对比（如各季度销售额）	多柱图，自定义颜色和标签。
排名展示	多柱图结合 Tooltip 显示详细数值。
实时数据监控	配合表格数据更新，柱状图自动刷新。

通过 @vxe-ui/plugin-render-chart 插件，vxe-table 将轻量级柱状图引入表格单元格，让数据展示更具表现力。只需简单配置，即可实现。

https://vxetable.cn