data2charts

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

示例运行

$ npm install
$ npm start

当前版本

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 为空的情况 参考上面的部分