antd-table-pie
description
Combine table & pie chart to create a interactive component. The dataSource of antd table is computed from echarts' pie option. You can set the table columns config by passing columnConfigArr prop to the reactPie component.
usage
Passing the option prop for Pie Chart & columnConfigArr prop for the antd table and it works.
example
const colorArr = '#FCD55B' '#7FC3FF' '#68C991' '#B4ACF7' '#FF89C6' '#FC9BA4' '#FFB436' '#42A2F1' '#B7E386' '#717ACC' '#9E744F' /** * echarts option config * only support pie chart of echarts now * more config on http://echarts.baidu.com/option.html#title */const option = title: text: 'access origin of xxx.com' subtext: 'purely fictional' x: 'center' tooltip: trigger: 'item' formatter: '{a} <br/>{b} : {c} ({d}%)' legend: orient: 'vertical' left: 'right' show: false data: 'direct call' 'mail' 'advertisement' 'video advertisement' 'search engine' color: colorArr series: name: '访问来源' type: 'pie' radius: '55%' center: '50%' '60%' data: value: 335 name: 'direct call' price: 5 value: 310 name: 'mail' value: 234 name: 'advertisement' value: 135 name: 'video advertisement' value: 1548 name: 'search engine' itemStyle: emphasis: shadowBlur: 10 shadowOffsetX: 0 shadowColor: 'rgba(0, 0, 0, 0.5)' /** * columns config * title * dataIndex * clickable * dataDep */const columnConfigArr = title: 'category' dataIndex: 'name' clickable: true title: 'number' dataIndex: 'value' title: 'price' dataIndex: 'price' dataDep: true { return <div className="pie-container"> <ReactPie option=option columnConfigArr=columnConfigArr /> </div> }
TODO
- line chart support