@linkdesign/screen/lib/bar-stack-chart/README.md

屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏

# 条形堆叠占比图 BarStackChart

## 使用场景

条形堆叠占比图



## 预览

![条形堆叠占比图 BarStackChart](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580787623699-fa4d1d9d-64de-448c-b191-0b6081dae305.png)



## 演示

<!--before-content-->

## 基础用法

```js
import { Chart } from '@linkdesign/screen';

const { BarStackChart } = Chart;

class App extends React.Component {
  render() {
    return (
      <BarStackChart
        className="bar-stack-chart"
        title="条形占比堆叠图"
        dataSource={[{
          label: '图例标签指标',
          value: '20%',
          rate: 20,
          color: '#3B81FF',
        }, {
          label: '图例标签指标',
          value: '30%',
          rate: 30,
          color: '#2ACA96',
        }, {
          label: '图例标签指标',
          value: '50%',
          rate: 50,
          color: '#FEC400',
        }]}
        universalStyle={{ width: '450px' }}
        normOptions={{ widthRate: 40 }}
      />
    );
  }
}

ReactDOM.render(<App />);
```

<!--after-content-->



### API

| 参数名                    | 说明         | 必填 | 类型                                                 | 默认值 | 备注 |
| ------------------------- | ------------ | ---- | ---------------------------------------------------- | ------ | ---- |
| className                         | 类名         | N    | String                                  | -                                                    |              |
| title | 图表标题 | N | ReactNode | - | |
| [dataSource](#dataSource) | 数据源       | Y    | Array                                                | -      |      |
| [universalStyle](#universalStyle) | 通用样式     | N    | Object                                  | -                                                    |              |
| titleOptions | 标题配置 | N | ITitle | ```{align: 'left'}``` |  |
| [normOptions](#normOptions) | 值样式 | N | Object | - |  |
| [barOptions](#barOptions) | 柱状图样式 | N | Object | - |  |

#### dataSource

```typescript
// 数据源
dataSource: {
  label: React.ReactNode; // 内容
  value: React.ReactNode; // 值
  rate: number; // 占比
  color: string; // 颜色
}[];
```

#### universalStyle

```typescript
// 通用样式
universalStyle?: {
  width?: string | number;
  height?: string | number;
  position?: {
    x: string | number;
    y: string | number;
  };
  rotation?: number;
  opacity?: number;
  backgroundColor?: string;
};
```

#### normOptions

```typescript
// 指标配置
normOptions?: {
  widthRate?: number; // 宽占比
  labelOptions?: ITitle; // 内容样式
  valueOptions?: ITitle; // 值样式
  lineSpacing?: string | number; // 行间距
};
```

#### barOptions

```typescript
// 柱状图样式
barOptions?: {
  backgroundColor?: string; // 背景色
  height?: string | number; // 高度
  spacing?: string | number; // 间距
};
```


## TODO List

- [ ] ......