# 通用非时序统计图组件category-axis-charts

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

## 1.功能说明

category-axis-charts组件，可用于绘制x轴为离散数据的统计图

## 2.组件依赖

-- react

-- echarts

-- types/echarts

-- 工具类utils/gen-uuid

## 3.依赖结构体

```tsx
 export interface CateGoryData {
    axisName: string;
    legendName?: string;
    value: number;
 }
```

## 4.组件接口

```tsx
 interface IProps {
     q_data: CateGoryData[],
     precision: number,
     width?: number,
     height?: number,
     type?: string,   //默认值为line，即折线图，可选为直方图bar
     color?: string   //该颜色只对二维数据有效
     padding?: {left?:number|string, right?:number|string, top?:number|string, bottom?:number|string} //图表内边距
 }
```

如果传入的q_data具有legendName属性，则一个x轴的点对应多个柱子，效果如下：

![具有legendName](./picture/legend-name.png)

如果传入的q_data不具有legendName属性，则一个x轴的点只对应一个柱子，效果如下：

![不具有legendName](./picture/no-legend-name.png)

## 5.案例

```tsx
//导入组件
import SingleEChart, { CateGoryData } from '../common/category-axis-charts';
```

```tsx
//定义数据
const [dealData, setDealData] = useState<CateGoryData[]>();
const [data, setData] = useState<CateGoryData[]>();
useEffect(()=>{
    setData([
        {axisName: "张琪", legendName: "错误数", value: 15},
        {axisName: "张琪", legendName: "贡献数", value: 4},
        {axisName: "张琪", legendName: "工作量", value: 44},

        {axisName: "吴俊", legendName: "错误数", value: 5},
        {axisName: "吴俊", legendName: "贡献数", value: 7},
        {axisName: "吴俊", legendName: "工作量", value: 35},

        {axisName: "朱世宇", legendName: "错误数", value: 19},
        {axisName: "朱世宇", legendName: "贡献数", value: 6},
        {axisName: "朱世宇", legendName: "工作量", value: 40},

        {axisName: "覃匡毅", legendName: "错误数", value: 20},
        {axisName: "覃匡毅", legendName: "贡献数", value: 10},
        {axisName: "覃匡毅", legendName: "工作量", value: 35},

        {axisName: "李世新", legendName: "错误数", value: 5},
        {axisName: "李世新", legendName: "贡献数", value: 14},
        {axisName: "李世新", legendName: "工作量", value: 20},

        {axisName: "李泽阳", legendName: "错误数", value: 13},
        {axisName: "李泽阳", legendName: "贡献数", value: 8},
        {axisName: "李泽阳", legendName: "工作量", value: 39},

        {axisName: "杨宗欢", legendName: "错误数", value: 10},
        {axisName: "杨宗欢", legendName: "贡献数", value: 3},
        {axisName: "杨宗欢", legendName: "工作量", value: 50},  
    ])

    setDealData([
        {axisName: "张琪", value: 15},

        {axisName: "吴俊", value: 5},

        {axisName: "朱世宇", value: 19},

        {axisName: "覃匡毅", value: 20},

        {axisName: "李世新", value: 5},

        {axisName: "李泽阳", value: 13},

        {axisName: "杨宗欢", value: 10},
    ])
}, [])

//添加组件
return (
    <div className="main-layout-container">
        <SingleEChart q_data={dealData} precision={0} width={400} type="bar" color={"#999900"}/>
        <SingleEChart q_data={data} precision={0} width={400} type="bar"/>
    </div>
)
```