在数据分析场景中用户常常希望选中表格中的一块数据区域后直接生成可视化图表。vxe-table 结合官方图表插件 vxe-ui/plugin-render-echarts可以轻松实现“选中区域 → 右键菜单 → 生成图表”的完整流程底层基于 ECharts 渲染支持柱状图、折线图、饼图等多种类型。功能概述区域选取通过 mouseConfig.area 开启鼠标拖拽选择单元格区域。右键菜单通过 menuConfig.body.options 配置菜单项内置图表类型 code也可自定义菜单。图表生成集成 vxe-ui/plugin-render-echarts 后点击菜单即可基于选中区域数据生成图表。多种图表支持横向柱状图、纵向柱状图、折线图、饼图并支持“自由选择”与“固定类别”两种模式。键盘辅助配合 keyboardConfig 可使用方向键、Shift、Tab 等快速扩展选区。安装npm install vxe-table vxe-ui/plugin-render-echarts echartsvxe-table表格组件。vxe-ui/plugin-render-echarts官方图表渲染插件。echarts图表底层库。// ... import VXETable from vxe-table import echarts from echarts import VxeUIPluginRenderEcharts from vxe-ui/plugin-render-echarts import vxe-ui/plugin-render-echarts/dist/style.css // ... // 方式1NPM 安装注入 echarts 对象 VXETable.use(VxeUIPluginRenderEcharts, { echarts }) // 方式2CDN 安装只要确保 window.echarts 存在即可 // VXETable.use(VxeUIPluginRenderEcharts)如果使用 CDN 方式无需传入 echarts插件会自动使用全局的 window.echarts。核心配置启用区域选取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}}]}]]}}内置图表 codeCHART_BAR_X_AXIS横向柱状图、CHART_BAR_Y_AXIS纵向柱状图、CHART_LINE折线图、CHART_PIE饼图。params.category指定固定类别列如 name用于“固定类别”模式。自定义菜单可通过 menuClick 事件处理。图表类型与参数code说明是否需 params.categoryCHART_BAR_X_AXIS横向柱状图可选不传为自由选择CHART_BAR_Y_AXIS纵向柱状图可选不传为自由选择CHART_LINE折线图可选不传为自由选择CHART_PIE饼图可选不传为自由选择自由选择不传 params.category插件自动将选区第一列作为类别其余列作为数据系列。固定类别传 params.category: ‘name’指定 name 列作为类别轴其余列作为数据系列。代码templatedivvxe-gridv-bindgridOptionsv-ongridEvents/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstgridOptionsreactive({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}]})constgridEventsreactive({menuClick({menu}){switch(menu.code){casemyCode:alert(自定义菜单)break}}})/script注意事项数据格式要求选中区域的第一列固定类别模式下为 category 指定的列作为类别轴其余列作为数值系列。建议选区内包含表头便于识别列名。性能考虑选中区域数据量较大时图表渲染可能较慢。建议限制选区范围或在生成前做数据聚合。通过区域选取 右键菜单 图表插件vxe-table 让“选中数据 → 生成图表”变得非常简单。开发者无需手写数据转换逻辑几行配置即可拥有类似 Excel 的图表生成能力非常适合数据分析、报表展示等场景。https://vxetable.cn