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

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

# 仪表盘 GaugeChart

## 使用场景

图表-仪表盘

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



## 预览

![仪表盘 GaugeChart](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1589190100541-deda4874-70e9-4463-86eb-e6f020ceca59.png)   



## 演示

<!--before-content-->

## 基础用法

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

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

class App extends React.Component {
  render() {
    return (
      <div data-theme="dark" className={`${_cssPrefix}main-body`} style={{ backgroundColor: "#1f3b6d" }}>
        <GaugeChart
          title="负荷指数"
          universalStyle={{
            width: 450,
            height: 240,
          }}
          config={{
            value: 5.4,
            limit: 6,
            min: 0,
            max: 8,
            tickInterval: 1,
            label: '良好',
          }}
        />
      </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 | 配置 | Y | [Config](#Config) | - |  |

#### universalStyle

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



#### Config

```typescript
interface Config {
  min: number;
  max: number;
  value: number;
  limit: number;
  tickInterval: number;
  label: string;
  content: number | string | ((value: number | string) => string);
}

config: Config;
```



## TODO List

- [ ] ......