vxe-table如何在单元格中渲染简单的饼图_vue.js_

npm install vxe-table-plugin-renderer 

```javascript import Vue from 'vue' import VXETable from 'vxe-table' import VXETablePluginRenderer from 'vxe-table-plugin-renderer' import 'vxe-table/lib/style.css' import 'vxe-table-plugin-renderer/dist/style.css' VXETable.use(VXETablePluginRenderer) Vue.use(VXETable) 

 ## bar-柱状图 props: | 属性 | 描述 | 类型 | |------|------|-----| | bar.width | 柱子宽度 | number | string | | bar.max | 柱子最大值 | number | | colors | 柱子颜色列表 | string[] | | tooltip.formatter | 提示内容格式 | string | | label.color | 显示值的颜色 | string | | label.formatter | 显示值的格式（{row, value}） | string | # pie-饼图 props: | 属性 | 描述 | 类型 | |------|------|-----| | diameter | 饼图直径 | number | | margin | 饼图间距 | number | | colors | 扇区的颜色列表 | string[] | | tooltip.formatter | 提示内容格式 | string | | ring.diameter| 内圆直径 | number | | ring.color | 内圆的颜色 | string | | label.color | 显示值的颜色 | string | | label.formatter | 显示值的格式（{row, value}） | string | 

export default { data() { return { tableData: [ { name: 'test1', role: 'Developer', num1: [12, 34, 62], num2: [24, 81, 28], num3: [13, 45, 10] }, { name: 'test2', role: 'Tester', num1: [41, 12, 33], num2: [86, 9, 16], num3: [13, 45, 96] }, { name: 'test3', role: 'Developer', num1: [96, 75, 28], num2: [47, 72, 37], num3: [22, 97, 100] }, { name: 'test4', role: 'Developer', num1: [33, 75, 77], num2: [46, 12, 97], num3: [13, 45, 24] }, { name: 'test5', role: 'Tester', num1: [96, 75, 24], num2: [8, 72, 37], num3: [13, 45, 96] }, { name: 'test6', role: 'Developer', num1: [7, 55, 88], num2: [84, 72, 110], num3: [64, 45, 71] }, { name: 'test7', role: 'Tester', num1: [96, 75, 28], num2: [74, 36, 37], num3: [23, 45, 96] }, { name: 'test8', role: 'Developer', num1: [41, 11, 66], num2: [64, 24, 99], num3: [53, 4, 96] }, { name: 'test9', role: 'Tester', num1: [22, 14, 28], num2: [11, 72, 37], num3: [34, 45, 96] }, { name: 'test10', role: 'Developer', num1: [96, 75, 22], num2: [47, 22, 10], num3: [22, 44, 40] } ] } } }