re-chart/src/lib/funnel/index.js

A react chart library powered by ECharts

import React, { Component, PropTypes } from 'react'
import BaseChart from '../BaseChart'

import 'echarts/lib/chart/funnel'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/toolbox'

const Funnel = ({ name, data = [], style, callback }) => {
  const option = {
    tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}%' },
    toolbox: { feature: { dataView: { readOnly: false } } },
    legend: { data: data.map(item => item.name) },
    series: [{ name, type: 'funnel', data }],
  }
  const props = { option, style, callback }
  return <BaseChart { ...props } />
}

Funnel.propTypes = {
  title: PropTypes.string,
  data: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string.isRequired,
    value: PropTypes.number.isRequired,
  })),
  style: PropTypes.object,
  callback: PropTypes.func,
}

export default Funnel