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
import React, { Component } from 'react'
import ReactPie from 'react-table-pie'
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 {String}
* dataIndex {String}
* clickable {Boolean}
* dataDep {Boolean} if the key of props exists in data, the column appear, or disappear
*/
const columnConfigArr = [
{
title: 'category',
dataIndex: 'name',
clickable: true
},
{
title: 'number',
dataIndex: 'value'
},
{
title: 'price',
dataIndex: 'price',
dataDep: true
}
]
export default class ReactPieContainer extends Component {
render() {
return (
<div className="pie-container">
<ReactPie
option={option}
columnConfigArr={columnConfigArr}
/>
</div>
)
}
}
TODO
- line chart support