vxe-table 实现根据单元格渲染的内容自动渲染成统计图、折线图、拼图等图表
<p>vxe-table 实现根据单元格渲染的内容自动渲染成统计图、折线图、拼图等图表</p><h2 id="效果">效果</h2>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202511/3563285-20251111160926295-1305067055.gif"></p>
<h2 id="代码">代码</h2>
<pre><code class="language-html"><template>
<div>
<vxe-grid
v-bind="gridOptions"
@menu-click="menuClickEvent">
</vxe-grid>
</div>
</template>
<script>
export default {
data() {
const gridOptions = {
border: true,
height: 500,
showOverflow: true,
columnConfig: {
resizable: true
},
editConfig: {
mode: 'cell',
trigger: 'dblclick'
},
mouseConfig: {
area: true // 是否开启区域选取
},
keyboardConfig: {
isArrow: true,
isShift: true,
isTab: true,
isEnter: true,
isEdit: true,
isDel: true,
isEsc: true,
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 }
]
};
return {
gridOptions
};
},
methods: {
menuClickEvent({ menu }) {
switch (menu.code) {
case 'myCode':
alert('自定义菜单');
break;
}
}
}
}
</script>
</code></pre><br><br>
来源：https://www.cnblogs.com/qaz666/p/19210732
頁:
[1]