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

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

# 条形占比统计图 BarChart

## 使用场景

条形占比统计图



## 预览

![条形占比统计图 BarChart](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580784332368-f218c5cf-fd73-4374-870a-e8e0cf2a71a0.png)  



## 演示

<!--before-content-->

## 基础用法

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

const { BarChart } = Chart;

// 条形占比统计图
const barChart = (direction) => (
  <BarChart
    title="条形占比统计图"
    dataSource={[{
      label: '1.条形统计图对比项',
      value: '80%',
      rate: 80,
    }, {
      label: '2.条形统计图对比项',
      value: '80%',
      rate: 80,
    }, {
      label: '3.条形统计图对比项',
      value: '80%',
      rate: 80,
    }]}
    direction={direction}
    universalStyle={{ width: '450px' }}
    titleOptions={{
      textStyle: {
        marginBottom: 8, // 调整标题与内容的间距
      },
    }}
  />
);

class App extends React.Component {
  render() {
    return (
      <div className="bar-chart">
        <div className="bar-chart-hoz">
          {barChart('hoz')}
        </div>
        <div className="bar-chart-ver">
          {barChart('ver')}
        </div>
      </div>
    );
  }
}

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

<!--after-content-->



### API

| 参数名                    | 说明         | 类型                                                 | 必填 | 默认值 | 备注 |
| ------------------------- | ------------ | ---------------------------------------------------- | ---- | ------ | ---- |
| className                         | 类名         | String                                  | N    | -                                                    |              |
| title | 图表标题 | ReactNode | N | - | |
| [dataSource](#dataSource) | 数据源       | Array                                                | Y    | -      |      |
| [universalStyle](#universalStyle) | 通用样式     | Object          | N    | -                      |              |
| [global](#global) | 全局样式 | Object | N | - | |
| direction            | 排列方式 | Enum<br />'hoz' \| 'ver'          | N    | ```'hoz'```  | 水平排列 |
| titleOptions | 标题配置 | ITitle | N | ```{align: 'left', textStyle: {marginBottom: 12}}``` |  |
| [labelOptions](#labelOptions) | 内容样式 | Object | N | - |  |
| [barOptions](#barOptions) | 柱状图样式 | Object | N | - |  |
| [valueOptions](#valueOptions) | 值样式 | Object | N | - |  |
| sliderOptions | 轮播配置 | SliderProps | N | - |  |
| emptyContent | 数据为空时的内容 | ReactNode | N | ```<div className={`${_cssPrefix}bar-chart-empty`}><span className={`${_cssPrefix}iconfont-ability`} dangerouslySetInnerHTML={{ __html: '&#xe836;' }} />暂无任何数据</div>``` |  |

#### dataSource

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

#### universalStyle

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

#### global

```typescript
// 全局样式
global?: {
  height?: string | number; // 高度
  lineSpacing?: string | number; // 行间距
};
```

#### labelOptions

```typescript
interface ILabelOptions extends ITitle {
  widthRate: number; // 宽占比
}

// 内容样式
labelOptions?: ILabelOptions;
```

#### barOptions

```typescript
// 柱状图样式
barOptions?: {
  widthRate: number; // 宽占比
  height?: string | number; // 高度
  backgroundColor?: string; // 背景颜色
  innerColor?: string; // 占比颜色
  radius?: number; // 圆角
};
```

#### valueOptions

```typescript
interface IValueOptions extends ITitle {
  widthRate: number; // 宽占比
}

// 值样式
valueOptions?: IValueOptions;
```



## TODO List

- [ ] ......