vue 表格组件 vxe-table 选择单元格区域后生成图表

在数据分析场景中，用户往往希望选中表格中的一块数据区域后，直接生成可视化图表。vxe-table 结合官方插件 plugin-render-echarts，可以轻松实现这一能力：选中区域 → 右键菜单 → 生成柱状图/折线图/饼图，整个过程基于 ECharts 渲染，开箱即用。

功能概述

区域选取：通过 mouseConfig.area 开启鼠标区域选择，支持拖拽选中连续单元格。
右键菜单：通过 menuConfig.body.options 配置菜单项，内置图表类型 code，也可自定义菜单。
图表生成：集成 plugin-render-echarts 插件后，菜单点击即可基于选中区域数据生成图表。
多种图表类型：支持横向柱状图、纵向柱状图、折线图、饼图，并支持“自由选择”与“固定类别”两种模式。

依赖安装

图表渲染依赖 ECharts 与官方插件：

npm install echarts vxe-table-plugin-render-echarts

// ...
import { VxeUI } from 'vxe-table'
import echarts from 'echarts'
import VxeUIPluginRenderEcharts from '@vxe-ui/plugin-render-echarts'
import '@vxe-ui/plugin-render-echarts/dist/style.css'
// ...

// 方式1：NPM 安装，注入 echarts 对象
VxeUI.use(VxeUIPluginRenderEcharts, {
  echarts
})

// （推荐）方式2：CDN 安装，只要确保 window.echarts 存在即可
// VxeUI.use(VxeUIPluginRenderEcharts)

echarts：图表底层库。
vxe-table-plugin-render-echarts：vxe-table 官方图表插件，封装了选中区域 → 图表的转换逻辑。

参数说明

启用区域选取

mouseConfig: {
  area: true // 开启鼠标区域选取
}

配置键盘交互（可选）

keyboardConfig: {
  isArrow: true, // 方向键
  isShift: true, // Shift + 方向键扩展选区
  isTab: true,   // Tab 键
  isEnter: true, // 回车键
  isEdit: true,  // 任意键进入编辑
  isDel: true,   // Delete 键
  isEsc: true,   // Esc 关闭编辑
  isFNR: true    // 查找与替换
}

配合区域选取，键盘也能完成选区操作，提升效率。

配置右键菜单

menuConfig: {
  body: {
    options: [
      [{ code: 'myCode', name: '自定义的菜单' }],
      [
        {
          name: '创建图表',
          children: [
            { code: 'CHART_BAR_X_AXIS', name: '横向柱状图 - 自由选择', prefixIcon: 'vxe-icon-chart-bar-x' },
            { code: 'CHART_BAR_X_AXIS', name: '横向柱状图 - 固定类别', prefixIcon: 'vxe-icon-chart-bar-x', params: { category: 'name' } },
            { code: 'CHART_BAR_Y_AXIS', name: '纵向柱状图 - 自由选择', prefixIcon: 'vxe-icon-chart-bar-y' },
            { code: 'CHART_BAR_Y_AXIS', name: '纵向柱状图 - 固定类别', prefixIcon: 'vxe-icon-chart-bar-y', params: { category: 'name' } },
            { code: 'CHART_LINE', name: '折线图 - 自由选择', prefixIcon: 'vxe-icon-chart-line' },
            { code: 'CHART_LINE', name: '折线图 - 固定类别', prefixIcon: 'vxe-icon-chart-line', params: { category: 'name' } },
            { code: 'CHART_PIE', name: '饼图 - 自由选择', prefixIcon: 'vxe-icon-chart-pie' },
            { code: 'CHART_PIE', name: '饼图 - 固定类别', prefixIcon: 'vxe-icon-chart-pie', params: { category: 'name' } }
          ]
        }
      ]
    ]
  }
}

内置图表 code：CHART_BAR_X_AXIS（横向柱状图）、CHART_BAR_Y_AXIS（纵向柱状图）、CHART_LINE（折线图）、CHART_PIE（饼图）。
params.category：指定固定类别列（如 name），用于“固定类别”模式。
自定义菜单可通过 menuClick 事件处理。

注意：原文中“横向柱状图 - 自由选择”与“横向柱状图 - 固定类别”使用了相同的 code，这是合理的——两者的区别在于 params.category 是否存在。插件会根据 params 判断是否固定类别。

代码

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

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

const gridOptions = reactive({
  border: true,
  height: 500,
  showOverflow: true,
  columnConfig: {
    resizable: true
  },
  editConfig: {
    mode: 'cell',
    trigger: 'dblclick'
  },
  mouseConfig: {
    area: true // 是否开启区域选取
  },
  keyboardConfig: {
    isArrow: true, // 是否开启方向键功能
    isShift: true, // 是否开启同时按住方向键以活动区域为起始，向指定方向扩展单元格区域
    isTab: true, // 是否开启 Tab 键功能
    isEnter: true, // 是否开启回车键功能
    isEdit: true, // 是否开启任意键进入编辑（功能键除外）
    isDel: true, // 是否开启删除键功能
    isEsc: true, // 是否开启Esc键关闭编辑功能
    isFNR: true // 是否开启查找与替换
  },
  menuConfig: {
    body: {
      options: [
        [{ code: 'myCode', name: '自定义的菜单' }],
        // vxe-table-plugin-charts 之后可以直接使用内置 code，也可以自行实现
        [
          {
            name: '创建图表',
            children: [
              { code: 'CHART_BAR_X_AXIS', name: '横向柱状图 - 自由选择', prefixIcon: 'vxe-icon-chart-bar-x' },
              { code: 'CHART_BAR_X_AXIS', name: '横向柱状图 - 固定类别', prefixIcon: 'vxe-icon-chart-bar-x', params: { category: 'name' } },
              { code: 'CHART_BAR_Y_AXIS', name: '纵向柱状图 - 自由选择', prefixIcon: 'vxe-icon-chart-bar-y' },
              { code: 'CHART_BAR_Y_AXIS', name: '纵向柱状图 - 固定类别', prefixIcon: 'vxe-icon-chart-bar-y', params: { category: 'name' } },
              { code: 'CHART_LINE', name: '折线图 - 自由选择', prefixIcon: 'vxe-icon-chart-line' },
              { code: 'CHART_LINE', name: '折线图 - 固定类别', prefixIcon: 'vxe-icon-chart-line', params: { category: 'name' } },
              { code: 'CHART_PIE', name: '饼图 - 自由选择', prefixIcon: 'vxe-icon-chart-pie' },
              { code: 'CHART_PIE', name: '饼图 - 固定类别', prefixIcon: 'vxe-icon-chart-pie', params: { category: 'name' } }
            ]
          }
        ]
      ]
    }
  },
  columns: [
    { type: 'seq', width: 60 },
    { field: 'name', title: '名字', editRender: { name: 'input' } },
    { field: 'num1', title: '分数', editRender: { name: 'VxeNumberInput' } },
    { field: 'num2', title: '计划完成数量', editRender: { name: 'VxeNumberInput' } },
    { field: 'num3', title: '已完成数量', editRender: { name: 'VxeNumberInput' } },
    { field: 'num4', title: '未开始数量', editRender: { name: 'VxeNumberInput' } },
    { field: 'num5', title: '成功数量', editRender: { name: 'VxeNumberInput' } },
    { field: 'num6', title: '失败数量', editRender: { name: 'VxeNumberInput' } }
  ],
  data: [
    { id: 10001, name: '张三', role: '前端开发', num1: 4, num2: 45, num3: 77, num4: 42, num5: 23, num6: 67 },
    { id: 10002, name: '小徐', role: '测试人员', num1: 23, num2: 52, num3: 23, num4: 45, num5: 78, num6: 23 },
    { id: 10003, name: '老王', role: '后端开发', num1: 22, num2: 41, num3: 88, num4: 12, num5: 23, num6: 23 },
    { id: 10004, name: '李四', role: '设计师', num1: 3, num2: 66, num3: 23, num4: 16, num5: 11, num6: 23 },
    { id: 10005, name: '老刘', role: '前端开发', num1: 23, num2: 76, num3: 12, num4: 23, num5: 34, num6: 78 },
    { id: 10006, name: '老徐', role: '项目经理', num1: 7, num2: 45, num3: 23, num4: 5, num5: 15, num6: 32 },
    { id: 10007, name: '王五', role: '后端开发', num1: 87, num2: 9, num3: 6, num4: 44, num5: 23, num6: 44 },
    { id: 10008, name: '老六', role: '测试人员', num1: 23, num2: 23, num3: 55, num4: 45, num5: 80, num6: 33 },
    { id: 10009, name: '小李', role: '前端开发', num1: 8, num2: 90, num3: 8, num4: 4, num5: 23, num6: 50 },
    { id: 10010, name: '小王', role: '设计师', num1: 88, num2: 23, num3: 2, num4: 23, num5: 18, num6: 23 }
  ]
})

const gridEvents = reactive({
  menuClick({ menu }) {
    switch (menu.code) {
      case 'myCode':
        alert('自定义菜单')
        break
    }
  }
})
</script>

zhiy3

vue 表格组件 vxe-table 选择单元格区域后生成图表

功能概述

依赖安装

参数说明

启用区域选取

配置键盘交互（可选）

配置右键菜单

代码

相关使用

图表类型 code

自定义菜单事件

自定义图表

公告

code	说明
CHART_BAR_X_AXIS	横向柱状图
CHART_BAR_Y_AXIS	纵向柱状图
CHART_LINE	折线图
CHART_PIE	饼图