cuz-charts

// 默认数据格式: 
// data = {male: 422, female: 631}
<Chart title='分布图'>
  <Chart.Pie data={data} title='SEX' />
</Chart>

// 手动设置 key, value 对应绑定的字段
// data = [{myKey: 'male', myValue: '422'}, {myKey: 'female', myValue: '631'}]
<Chart title='设置 key, value'>
  <Chart.Bar data={data} key='myKey' value='myValue' />
</Chart>

// 手动设置 key, value 对应绑定的字段 (deep path)
// data = [{info: {name: 'male'}, myValue: '422'}, {info: {name:'female'}, myValue: '631'}]
<Chart title='设置 key, value'>
  <Chart.Bar data={data} key='info.name' value='myValue' />
</Chart>

// 多图表
// data = {
//   CN: {male: 854, female: 752}, 
//   US: {male: 550, female: 444}, 
//   JP: {male: 720, female: 508}
// }
<Chart>
  <Chart.Line data={data.CN} title="中国" />
  <Chart.Line data={data.US} title="美国" />
  <Chart.Line data={data.JP} title="日本" />
</Chart>

// 动态多图表
// data = [
//   {data: {male: 854, female: 752}, title: "中国" },
//   {data: {male: 550, female: 444}, title: "中国" },
//   {data: {male: 720, female: 508}, title: "中国" }
// ]
<Chart>
  {data.map((item) =>
    <Chart.Line data={item.data} title={item.title} />
  )}
</Chart>

// 地图
// data = {
//   "China": 500,
//   "India": 800
// }
<Chart lengend={['China']}>
  <Chart.Map data={data} />
</Chart>

// ref 获取 echart 对象
<Chart ref="echart">
  <Chart.Line data={data} />
</Chart>

const echart = this.refs.echart;
echart.refresh()

// 自定义
<Chart title='自定义 config' config={(config) => config}>
  <Chart.Bar data={data} />
</Chart>