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

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

# g2图表 G2Chart

## 使用场景

g2图表

- 内置了些样式
- 标题单独配置，不使用g2属性配置
- 图表canvas的大小会根据容器及标题自动计算


## 预览

![g2图表 G2Chart](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1589248918127-53398d68-7c0a-43a9-b408-9d0f4f40830e.png)   



## 演示

<!--before-content-->

## 基础用法

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

const { G2Chart } = Chart;
const { _cssPrefix } = config;

const data = [
  { type: '未知', value: 654, percent: 0.02 },
  { type: '17 岁以下', value: 654, percent: 0.02 },
  { type: '18-24 岁', value: 4400, percent: 0.2 },
  { type: '25-29 岁', value: 5300, percent: 0.24 },
  { type: '30-39 岁', value: 6200, percent: 0.28 },
  { type: '40-49 岁', value: 3300, percent: 0.14 },
  { type: '50 岁以上', value: 1500, percent: 0.06 },
];

class App extends React.Component {
  render() {
    return (
      <div data-theme="dark" className={`${_cssPrefix}main-body`} style={{ backgroundColor: "#1f3b6d" }}>
        <G2Chart
          title="柱状图"
          universalStyle={{
            width: 450,
            height: 240,
          }}
          config={{ padding: [50, 20, 50, 20] }}
          onInit={(chart) => {
            // 添加文本标注
            data.forEach((item) => {
              chart
                .annotation()
                .text({
                  position: [item.type, item.value],
                  content: item.value,
                  style: {
                    textAlign: 'center',
                    fill: '#d3e2ff',
                    stroke: null
                  },
                  offsetY: -30,
                })
                .text({
                  position: [item.type, item.value],
                  content: (item.percent * 100).toFixed(0) + '%',
                  style: {
                    textAlign: 'center',
                    fill: '#d3e2ff',
                    stroke: null
                  },
                  offsetY: -12,
                });
            });
          }}
          options={{
            data,
            scales: {
              value: {
                alias: '销售额(万)',
              },
              type: {
                tickLine: {
                  alignTick: false,
                },
              }
            },
            axes: {
              value: false,
            },
            tooltip: {
              showMarkers: false,
            },
            interaction: {
              type: 'element-active'
            },
            geometries: [{
              type: 'interval',
              position: 'type*value'
            }]
          }}
        />
      </div>
    );
  }
}

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

<!--after-content-->



### API

| 参数名                    | 说明         | 必填 | 类型                                                 | 默认值 | 备注 |
| ------------------------- | ------------ | ---- | ---------------------------------------------------- | ------ | ---- |
| className                         | 类名         | N    | String                                  | -                                                    |              |
| title | 图表标题 | N | ReactNode | - | |
| [universalStyle](#universalStyle) | 通用样式     | N    | Object                                  | -                                                    |              |
| titleOptions | 标题配置 | N | ITitle | {align: 'left', textStyle: {marginBottom: 8}} |  |
| config | g2 构造方法的入参 | Y | ChartCfg | - | https://github.com/antvis/G2/blob/master/src/interface.ts#L725 |
| options | g2 options配置 | Y | Options | - | https://github.com/antvis/G2/blob/master/src/interface.ts#L1327 |

#### universalStyle

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


## TODO List

- [ ] ......