---
order: 2
group:
  title: 图表
  order: 1
---

## 斑马柱状图

斑马柱状图

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  data: [
    {
      x: 'x1',
      y: 320,
    },
    {
      x: 'x2',
      y: 200,
    },
    {
      x: 'x3',
      y: 25,
    },
    {
      x: 'x4',
      y: 190,
    },
    {
      x: 'x5',
      y: 90,
    },
  ],
  option: {},
};

export default () => (
  <div style={{ background: 'rgba(5, 23, 48, 1)' }}>
    <Charts.D3ZebraBarChart {...props} />
  </div>
);
```

<!-- 多柱状图

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

const props = {
  data: {
    xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    yData: [
      [10, 52, 200, 334, 390, 330, 220],
      [21, 520, 200, 334, 350, 300, 200],
    ],
  },
};

export default () => <Charts.BasicBarChart {...props} />;
``` -->

## API

| 参数   | 说明                                                                                        | 类型   |
| ------ | ------------------------------------------------------------------------------------------- | ------ |
| size   | 容器的宽高                                                                                  | object |
| data   | 图表数据                                                                                    | object |
| option | 图表配置项，具体配置请参照[echarts 配置项 ](https://www.echartsjs.com/zh/option.html#title) | object |

### data

| 参数  | 说明     | 类型  |
| ----- | -------- | ----- |
| xData | x 轴数据 | array |
| yData | y 轴数据 | array |

### size

| 参数   | 说明 | 类型           |
| ------ | ---- | -------------- |
| width  | 宽度 | number\|string |
| height | 高度 | number\|string |