# data2charts

> 二维数组数据转换echarts的react组件

Latest version **0.3.2-dev-3** (published 2019-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install data2charts
pnpm add data2charts
yarn add data2charts
bun add data2charts
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2-dev-3 |
| Published | 2019-01-17 |
| First published | 2018-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 13.6 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | sherferyu |

## Links

- npm: https://www.npmjs.com/package/data2charts
- Homepage: https://github.com/LylaYuKakola/data2charts
- npm.io page: https://npm.io/package/data2charts

## Dependencies (5)

- [antd](https://npm.io/package/antd.md) ^3.12.1
- [react](https://npm.io/package/react.md) ^16.2.0
- [echarts](https://npm.io/package/echarts.md) ^4.2.0-rc.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [react-draggable-tags](https://npm.io/package/react-draggable-tags.md) ^0.2.9

## Recent versions

- 0.3.2-dev-3 (latest) — 2019-01-17
- 0.3.2-dev-20190117 — 2019-01-17
- 0.3.2-dev-1 — 2019-01-15
- 0.3.2 — 2019-01-15
- 0.3.1-dev.20190115 — 2019-01-15
- 0.3.1-dev.20190111 — 2019-01-11
- 0.3.1-dev.20190110 — 2019-01-11
- 0.2.2 — 2018-12-26
- 0.2.1 — 2018-12-26
- 0.2.0 — 2018-12-26
- 0.1.21-alpha-2 — 2018-11-22
- 0.1.21-alpha-1 — 2018-11-22
- 0.1.20 — 2018-11-20
- 0.1.19 — 2018-11-20
- 0.1.18 — 2018-11-20
- … 29 more at https://npm.io/package/data2charts/versions

## README

# data2charts

就一个表格数据的ECharts的可以配置的展示的react组件的简单二次封装

## 示例运行
```$xslt
$ npm install
$ npm start
```

## 当前版本
```$xslt
v0.1.0
```

## npm
```
https://www.npmjs.com/package/data2charts
```

## 数据层
```
./src/model/index
```

因为所有入参的数据均为表格数据，所以数据均为二维数组，如下

```
[
    ['小明'，'男'，'665'],  // 第一行
    ['老王'，'男'，'699'],  // 第二行
    ['李华'，'女'，'749'],  // 第三行
    ...
]
```

所以以下描述均按照表格描述（行、列等）

### 1. numeric 单指标

#### 入参：
chart : { data、title（非必选）、description（非必选）}

- data：二维数组（为了和其他类型的图表保持一致）
- title：图表的标题（暂时不支持复杂标题的配置）
- description：指标描述（点击?按钮显示的内容）

#### 数据转换：

默认取数据中的第一行第一列（如示例数据中的 '小明'，当然，这是一个NaN，所以会被处理为0 ），所以需要保证这个位置的数据的合理性

### 2. heatMap 热力地图（带下钻）

#### 入参：
chart : { data、defaultDimName（默认维度名）、location（非必选）}

- data：二维数组，可以如下

```
[
    // 按照最高级别的省市去划分
    ['河北省', '保定市', '高阳县', 1.9],
    ['河北省', '沧州市', '任丘市', 1.2],
    ['河北省', '沧州市', '黄骅市', 1.1],
    ['山东省', '济南市', '市区', 1.5],
    ['山东省', '青岛市', '市区', 1.8],
    ...
    
    // 可以控制最高地区，如 '河北省'
    ['保定市', '安新县', 1.9],
    ['保定市', '高阳县', 1.9],
    ['沧州市', '任丘市', 1.1],
    ['沧州市', '黄骅市', 1.1],
    ['石家庄', '正定市', 1.1],
    ...
]
```

- title：图表的标题（暂时不支持复杂标题的配置）
- location：初始区域的名称（默认为'中国'）

#### 数据转换：

```
{
    '河北省': {
        '保定市': {
            '高阳县': { value: '**|1.9|**' },  // **| |** 是为了计算方便增加的标志
        },
        '沧州市': {
            '黄骅市': { value: '**|1.1|**' },
            '任丘市': { value: '**|1.2|**' }
        }
    },
    '山东省': {
        '济南市': {
            '市区': { value: '**|1.5|**' }
        },
        '青岛市': {
            '市区': { value: '**|1.8|**' }
        }
    }
}
```

然后就可以按照所选城市进行下钻了，最多下钻到区县级别，如果当前数据中没有包含该级别的数据（例如：下钻到保定市高阳县，如果没有保定市以下的数据），此时均显示为0

### 3. 折线图和柱状图（两者暂时不能同时展示）

#### 入参：
chart { data、defaultDimName（默认维度名 非必选）}
xOrY, xColumn, yColumn, dimColumns

- title：图表的标题（暂时不支持复杂标题的配置）
- data：二维数组，可以如下

```
[
    ['2012', '型号001', '渠道1', 1],
    ['2013', '型号001', '渠道1', 2],
    ['2014', '型号001', '渠道1', 3],
    ['2015', '型号001', '渠道1', 1],
    ['2012', '型号002', '渠道1', 2],
    ['2013', '型号002', '渠道1', 3],
    ['2014', '型号002', '渠道1', 1],
    ['2015', '型号002', '渠道1', 0],
    ['2012', '型号001', '渠道2', 10],
    ['2013', '型号001', '渠道1', 9],
    ['2014', '型号001', '渠道2', 6],
    ['2015', '型号001', '渠道2', 7],
    ['2012', '型号002', '渠道2', 4],
    ['2013', '型号002', '渠道2', 5],
    ['2014', '型号002', '渠道2', 6],
    ['2015', '型号002', '渠道2', 7],
    ...
]
```

- xOrY 基轴配置为x/y轴，默认为x
- xColumn x轴对应的列数，默认为第一列
- yColumn y轴对应的烈属，默认为最后一列
- dimColumns 维度的分组合并列，数组，默认为空，有顺序区分

#### 数据转换：

配置1：
xOrY: 'x'
xColumn: 0
yColumn: 3
dimColumns: [] 

```
// 默认维度为defaultDimName的配置内容
{
    `${defaultDimName}`: {
        '2012': '17', // 1+2+10+4，所有2012数据的和
        '2012': '19', // 2+3+9+5，所有2013数据的和
        '2012': '16', // 1+3+6+6，所有2014数据的和
        '2012': '15' // 1+0+7+7，所有2015数据的和
    } 
}
```

配置2：
xOrY: 'x'
xColumn: 0
yColumn: 3
dimColumns: [2,1] （有顺序区分，和 [1, 2] 不同） 

则输出数据如下
```
// 维度按照第三列和第二列去合并
// 维度如下
dims: ['渠道1型号001', '渠道1型号002', '渠道2型号001', '渠道2型号002']
{
    '渠道1型号001': {
        '2012': '1',  // 对应 ['2012', '型号001', '渠道1', 1]
        '2012': '2',
        '2012': '3',
        '2012': '1'
    },
    '渠道1型号002': {
        '2012': '2',
        '2012': '3',
        '2012': '1',
        '2012': '0'
    }，
    '渠道2型号001': {
        '2012': '10',  
        '2012': '9',
        '2012': '6',
        '2012': '7'
    }，
    '渠道2型号002': {
        '2012': '4',  
        '2012': '5',
        '2012': '6',
        '2012': '7'
    } 
}
```

### 4. 饼图

#### 入参：
chart { data、defaultDimName（默认维度名 非必选）}
- xColumn 配置为指标值数组，默认为第一列
- yColumn 配置为数据值数据，默认为最后一列

#### 数据转换：

饼图为直角坐标系的图表的变体，为控制 xOry 为 x 并且 dimColumns 为空的情况
参考上面的部分

---
_Source: https://npm.io/package/data2charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._