vxe-table 在单元格中渲染简单的饼图

vxe-table 在单元格中渲染简单的饼图

有时候遇到比较特殊的需求，比如在很小的单元格中要放个饼图，如果使用 echart 等图表插件又显得太笨重了，毕竟单元格大小有限，vxe-table 官方也提供了一个非常流畅简单图表渲染，仅用于单元格，具体如下：

安装插件：

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 |

<vxe-table 
  border
  resizable
  show-overflow
  height="400"
  :data="tableData">
  <vxe-column type="seq" width="60"></vxe-column>
  <vxe-column field="name" title="名称"></vxe-column>
  <vxe-column field="role" title="职务"></vxe-column>
  <vxe-column field