# 通用时序统计图组件

组件来源: 办公系统v3 - common组件

## 1.功能说明

分multi-line-chart与mutil-echart两个组件，均可用于绘制x轴为时间轴的统计图，两个组件分别依赖antv/g2与echarts

## 2.组件依赖

-- react

-- antv/g2 or echarts

-- types/echarts (only mutil-echart)

-- 工具类utils/gen-uuid (only mutil-echart)

## 3.依赖结构体

```tsx
//MultiDataPoint是{name: string, time: number, value: number}的三元对象组
export interface MultiDataPoint extends DataPoint {
    name: string;
}

export interface DataPoint {
    time?: number;
    value?: number;
}
```

## 4.组件接口

两个组件的接口几乎一致

```tsx
 interface IProps {
     q_data: MultiDataPoint[],
     precision: number,
     width?: number,
     height?: number,
     type?: string,   //echarts组件独有，默认值为line，即折线图，可选为直方图bar
     padding?: {left?:number|string, right?:number|string, top?:number|string, bottom?:number|string} //echarts组件独有，图表内边距
 }
```

## 5.案例

用两个组件分别绘制如下统计图

1)导入组件

```tsx
import MultiLineChart from './common/time-axis-charts/multi-line-chart';
import MultiEChart from './common/time-axis-charts/mutil-echart';
```

2)定义数据

```tsx
const data = [
    {value:5.7, time:1665626825256, name:"小明"},
    {value:10.4, time:1665713225256, name:"小明"},
    {value:17.1, time:1665799625256, name:"小明"},
    {value:18.6, time:1665886025256, name:"小明"},
    {value:23.5, time:1665972425256, name:"小明"},
    {value:41.8, time:1666058825256, name:"小明"},
    {value:47.4, time:1666145225256, name:"小明"},

    {value:0.6, time:1665626825256, name:"小红"},
    {value:1.3, time:1665713225256, name:"小红"},
    {value:17.1, time:1665799625256, name:"小红"},
    {value:18.9, time:1665886025256, name:"小红"},
    {value:34.7, time:1665972425256, name:"小红"},
    {value:35.5, time:1666058825256, name:"小红"},
    {value:53.2, time:1666145225256, name:"小红"},

    {value:5.6, time:1665626825256, name:"小任"},
    {value:1.3, time:1665713225256, name:"小任"},
    {value:1.1, time:1665799625256, name:"小任"},
    {value:19.9, time:1665886025256, name:"小任"},
    {value:3.7, time:1665972425256, name:"小任"},
    {value:75.5, time:1666058825256, name:"小任"},
    {value:43.2, time:1666145225256, name:"小任"},

    {value:30.6, time:1665626825256, name:"小刚"},
    {value:21.3, time:1665713225256, name:"小刚"},
    {value:7.1, time:1665799625256, name:"小刚"},
    {value:8.9, time:1665886025256, name:"小刚"},
    {value:34.7, time:1665972425256, name:"小刚"},
    {value:35.5, time:1666058825256, name:"小刚"},
    {value:53.2, time:1666145225256, name:"小刚"},

    {value:24, time:1665626825256, name:"小虎"},
    {value:13.3, time:1665713225256, name:"小虎"},
    {value:16.1, time:1665799625256, name:"小虎"},
    {value:20.4, time:1665886025256, name:"小虎"},
    {value:31.7, time:1665972425256, name:"小虎"},
    {value:35.5, time:1666058825256, name:"小虎"},
    {value:5.2, time:1666145225256, name:"小虎"},

    {value:0.6, time:1665626825256, name:"小天"},
    {value:1.3, time:1665713225256, name:"小天"},
    {value:17.1, time:1665799625256, name:"小天"},
    {value:18.9, time:1665886025256, name:"小天"},
    {value:14.7, time:1665972425256, name:"小天"},
    {value:39.5, time:1666058825256, name:"小天"},
    {value:11.2, time:1666145225256, name:"小天"},
]
```

3)添加组件

```tsx
<MultiLineChart q_data={data} precision={0}/>
<MultiEChart width={800} height={700} q_data={data} precision={1}/>
```