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

A react chart library powered by ECharts

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

import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'

const Bar = ({ xList, data = [], style, callback }) => {
  const option = {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: { data: data.map(item => item.name) },
    xAxis: [{ type: 'category', data: xList }],
    yAxis: [{ type: 'value' }],
    series: data.map(item => ({ ...item, type: 'bar' })),
  }
  const props = { option, style, callback }
  return <BaseChart { ...props } />
}

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

export default Bar