vxe-table 實現根據單元格渲染的內容自動渲染成統計圖、折線圖、拼圖等圖表

效果

代碼

<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>