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

## 科技风 - 柱状图

单柱状图

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

const props = {
  option: {
    legend: {
      show: false,
    },
    series: [
      {
        itemStyle: {
          normal: {
            label: {
              show: true,
              color: '#fff',
              position: 'top',
            },
          },
        },
      },
    ],
  },
  data: {
    xData: ['2小时以下', '2-6小时', '6-12小时', '12-24小时', '24及以上'],
    yData: [[13, 8, 7, 21, 38]],
  },
  theme: {
    /**
     * 文本颜色
     */
    textColor: 'red',
    /**
     * 组件主色
     */
    primaryColor: '#50E1',
    secondColor: '#FDAFFF',
    thirdColor: '#DDD',
    colorList: ['#50E1', '#FDA568', '#DDD'],
  },
};

export default () => (
  <div
    style={{
      
      width: '100%',
      height: '100%',
      padding: 50,
    }}
  >
    <Charts.SCBarChart {...props} />
  </div>
);
```

多柱状图

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

const data = [
  [10, 52, 200, 334, 390, 330, 220],
  [21, 520, 200, 334, 350, 300, 200],
  [210, 520, 200, 334, 350, 300, 200],
];

export default () => (
  <div
    style={{
      
      width: '100%',
      height: '100%',
      padding: 50,
    }}
  >
    <Charts.SCBarChart
      option={{ legend: { show: true } }}
      data={{
        xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        yData: data,
      }}
    />
  </div>
);
```

折线柱状混合图

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

const props = {
  option: {
    legend: {
      show: true,
    },
    series: [
      {
        name: '降水量',
        type: 'bar',
        markPoint: {
          data: [{ type: 'max', name: '最大值' }],
        },
      },
      {
        name: '平均温度',
        type: 'line',
        markPoint: {
          data: [{ type: 'max', name: '最大值' }],
        },
      },
    ],
  },
  data: {
    xData: ['2小时以下', '2-6小时', '6-12小时', '12-24小时', '24及以上'],
    yData: [
      [13, 8, 7, 21, 30],
      [5, 8, 38, 21, 18],
    ],
  },
};

export default () => (
  <div
    style={{
      
      width: '100%',
      height: '100%',
      padding: 50,
    }}
  >
    <Charts.SCBarChart {...props} />
  </div>
);
```

堆叠柱状图

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

const data = [
  [10, 52, 200, 334, 390, 330, 220],
  [21, 220, 50, 314, 150, 150, 100],
  [210, 320, 150, 34, 240, 100, 200],
];
const props = {
  option: {
    legend: {
      show: true,
    },
    series: [
      {
        name: '降水量',
        type: 'bar',
      },
      {
        name: '处理中',
        type: 'bar',
        stack: 'st1',
      },
      {
        name: '未处理',
        type: 'bar',
        stack: 'st1',
      },
    ],
  },
  data: {
    xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    yData: data,
  },
};
export default () => (
  <div
    style={{
      
      width: '100%',
      height: '100%',
      padding: 50,
    }}
  >
    <Charts.SCBarChart {...props} />
  </div>
);
```

## 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 |