@linkdesign/screen/lib/echart/README.md

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

# echarts图表 EChart

## 使用场景

echarts图表

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



## 预览

![饼状标签占比图 EChart](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/111014/1580788352830-df4678c3-663e-4303-b6f0-d0767c44c52a.png)   



## 演示

<!--before-content-->

## 基础用法

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

const { EChart } = Chart;

class App extends React.Component {
  render() {
    return (
      <EChart
        className="pie-chart"
        title="饼状标签占比图"
        universalStyle={{
          width: 450,
          height: 240,
        }}
        options={{
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            icon: 'circle',
            orient: 'vertical',
            top: 'middle',
            left: 'right',
            align: 'left',
            itemWidth: 6,
            formatter: 'Legend {name}',
            textStyle: {
              fontFamily: 'HelveticaNeue-CondensedBold',
              textBorderColor: '#fff',
              textBorderWidth: 2,
              fontSize: 12,
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['35%', '50%'],
              data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
              ],
            }
          ]
        }}
      />
    );
  }
}

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

<!--after-content-->



### API

| 参数名                    | 说明         | 必填 | 类型                                                 | 默认值 | 备注 |
| ------------------------- | ------------ | ---- | ---------------------------------------------------- | ------ | ---- |
| className                         | 类名         | N    | String                                  | -                                                    |              |
| title | 图表标题 | N | ReactNode | - | |
| [universalStyle](#universalStyle) | 通用样式     | N    | Object                                  | -                                                    |              |
| titleOptions | 标题配置 | N | ITitle | ```{align: 'left', textStyle: {marginBottom: 8}}``` |  |
| options | echarts options配置 | Y | EChartOption | - | https://echarts.apache.org/zh/option.html |

#### universalStyle

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


## TODO List

- [ ] ......