@@ -25,42 +25,46 @@ VXETable.use(VXETablePluginRenderer)
2525
2626## API
2727
28- ### ProgressBar 进度条
28+ ### bar 柱状图
2929
30- #### ProgressBar Props
30+ #### bar Props
3131
3232| 属性 | 描述 | 类型 | 可选值 | 默认值 |
3333| ------| ------| -----| -----| -----|
34- | lineWidth | 线宽度 | number | — | — |
35- | lineColor | 线颜色 | string | — | — |
36- | lineBgColor | 线背景颜色 | string | — | — |
37- | labelColor | 显示值的颜色 | string | — | — |
34+ | bar.width | 柱子宽度 | number | string | — | — |
35+ | bar.max | 柱子最大值 | number | — | — |
36+ | colors | 柱子颜色列表 | string[ ] | — | — |
37+ | tooltip.formatter | 提示内容格式 | string | — | — |
38+ | label.color | 显示值的颜色 | string | — | — |
39+ | label.formatter | 显示值的格式 | string | — | — |
3840
39- ### ProgressRing 环形进度条
41+ ### pie 饼图
4042
41- #### ProgressRing Props
43+ #### pie Props
4244
4345| 属性 | 描述 | 类型 | 可选值 | 默认值 |
4446| ------| ------| -----| -----| -----|
45- | width | 宽度 | number | — | — |
46- | height | 高度 | number | — | — |
47- | margin | 间距 | string | — | — |
48- | lineColor | 线颜色 | string | — | — |
49- | lineBgColor | 线背景颜色 | string | — | — |
50- | hollowColor | 圆心的背景颜色 | string | — | — |
51- | labelColor | 显示值的颜色 | string | — | — |
47+ | diameter | 饼图直径 | number | string | — | — |
48+ | margin | 饼图间距 | number | string | — | 1px |
49+ | colors | 扇区的颜色列表 | string[ ] | — | — |
50+ | tooltip.formatter | 提示内容格式 | string | — | — |
51+ | ring.diameter| 内圆直径 | number | string | — | — |
52+ | ring.color | 内圆的颜色 | string | — | — |
53+ | label.color | 显示值的颜色 | string | — | — |
54+ | label.formatter | 显示值的格式 | string | — | — |
5255
5356## Demo
5457
5558``` html
5659<vxe-table
5760 border
58- height =" 600"
61+ show-overflow
62+ height =" 400"
5963 :data =" tableData" >
6064 <vxe-table-column type =" checkbox" width =" 60" ></vxe-table-column >
6165 <vxe-table-column field =" name" width =" 200" ></vxe-table-column >
62- <vxe-table-column field =" num1" title =" Progress Bar" :cell-render =" {name: 'ProgressBar '}" ></vxe-table-column >
63- <vxe-table-column field =" num2" title =" Progress Ring" :cell-render =" {name: 'ProgressRing '}" ></vxe-table-column >
66+ <vxe-table-column field =" num1" title =" Bar" :cell-render =" {name: 'bar '}" ></vxe-table-column >
67+ <vxe-table-column field =" num2" title =" Ring" :cell-render =" {name: 'pie '}" ></vxe-table-column >
6468</vxe-table >
6569```
6670
@@ -69,9 +73,9 @@ export default {
6973 data () {
7074 return {
7175 tableData: [
72- { id: 100 , name: ' test1' , num1: 30 , num2: 60 },
73- { id: 101 , name: ' test2' , num1: 15 , num2: 85 },
74- { id: 102 , name: ' test3' , num1: 75 , num2: 45 }
76+ { id: 100 , name: ' test1' , num1: [ 30 , 47 ], num2: [ 60 , 36 , 36 ] },
77+ { id: 101 , name: ' test2' , num1: [ 15 , 22 ], num2: [ 85 , 22 , 97 ] },
78+ { id: 102 , name: ' test3' , num1: [ 75 , 36 ], num2: [ 45 , 84 , 66 ] }
7579 ]
7680 }
7781 }
0 commit comments