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

## 科技风 - 堆叠柱状图

```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: {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
    },
    yAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    series: [
      {
        name: '直接访问',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
        data: [320, 302, 301, 334, 390, 330, 320],
      },
      {
        name: '邮件营销',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: '联盟广告',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: '视频广告',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
        data: [150, 212, 201, 154, 190, 330, 410],
      },
      {
        name: '搜索引擎',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320],
      },
    ],
  },
};

export default () => (
  <div
    style={{
      width: '100%',
      height: '100%',
      padding: 50,
    }}
  >
    <Charts.SCBarChartY {...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 |