react-funnel-chart

漏斗图(梯形图) by canvas

$3

npm install react-funnel-chart --save

$3

``javascript
import FunnelChart from 'react-funnel-chart';

`

$3


`javascript
{
list: [
{ name: 'Q1', value: 500, backgroundColor: '', ... },
{ name: 'Q2', value: 400, backgroundColor: '' },
{ name: 'Q3', value: 300, backgroundColor: '' },
{ name: 'Q4', value: 200, backgroundColor: '' },
],
onClick: (e, ringInfo), // default
onHover: (e, ringInfo), // default
onResize: ({ ratio, clientWidth, clientHeight, ratioWidth, ratioHeight }, e), // default
isGradient: false,
labelStyle: '#333',
dataStyle: '#000',
strokeStyle: '#000',
tooltip: {
show: false, // default
formatter: (ringInfo) => {
return 数值: ${ringInfo.value};
}
},
tooltipStyle: {
backgroundColor: 'rgba(0,0,0,0.65)',
...
},
minPercent: 0.2,
}
``

$3

color-conversion-rgb

react-chart-canvas

$3

!funnel-bar

$3

##### 0.1
非传统漏斗图，目前为满足当前需求，后续增加配置项来适配其他情况