报表系统练手(1) -- 分析数据模型

目的：

1. 一些新技术的入门学习；

2. jQuery插件datatables的使用；

3. 后台管理程序中 报表基本功能。

课程内容：

1. 分析数据模型

2. datatables,Echarts3基础实例

3. TypeScript, Angular2入门

4. bootstrap完成页面基本布局

5. datatables数据 与 Echarts数据的 切换

6. 筛选功能的实现

一、气温数据统计

主题： 气温

维度： 地区，时间

{name: '北京市', time: '2017-03-31 00:00:00', 气温:'5℃'}

需要统计的信息

1. 同一地区 不同时间 气温变化（折线图）

2. 同一时间 不同地区 最高或者最低气温对比（柱状图）

3. 一段时间内 同一地区 不同温度的天数占比（饼状图）

二、企业贸易数据统计

有出口，进口；

或者核销数据，未核销数据 以及 逾期未核销数据。

主题： 企业进出口，企业核销数据

维度： 企业，时间

{name: '某企业', time: '2017-03-31 00:00:00', 进口:123, 出口: 22}

统计信息：

1. 同一企业 不同时间的进出口数据（总量） 统计 （折线图，柱状图）

2. 同一时间 不同企业的进出口数据 统计 （折线图，柱状图）

3. 同一时间 同一企业 的进出口数据占比（饼状图）

可从上两个的统计中直接获得数据。

核销数据的统计信息 和 进出口统计信息 是类似的。

三、技术选型

页面需要显示 报表（折线图、柱状图、饼状图）和表格数据显示。

jQuery, Echarts3, datatables.

交互效果：

1. 选取表格数据中 某几条或者几列进行统计。

2. 筛选 某些满足条件的 数据进行统计（比如：进口量大于100，气温高于35℃等等）。

为方便数据的筛选以及快速的处理这些数据，引入

TypeScript(ES6的过滤数据功能)， Angular2(数据绑定功能)

四、数据模型

结合前两个实例分析，如果企业贸易数据的进出口数据统计中，只统计进口数据，这时的数据模型和气温数据是相同的。

后端数据的存储模型为：

{name: '北京市', time: '2017-03-31 00:00:00', 气温:'5℃'}

{name: '某企业', time: '2017-03-31 00:00:00', 进口:123, 出口: 22}

前端展示所需的数据模型:

1. datatables:

两个维度分别占据 标题和表格的第一列，具体数据在表格内显示

1.1 datatbales-1:

time:['12:00:00','13:00:00','14:00:00','15:00:00','16:00:00'],

unit:'℃',

data:[

[ "北京市", "5", "8", "4", "6", "7" ],

[ "上海市", "10", "12", "11", "14", "11" ],

[ "重庆市", "15", "14", "15", "13", "14" ],

[ "深圳市", "20", "19", "18", "17", "16" ]

]

1.2 datatbales-2:

unit:'℃',

data: [

{ name:"北京市",

'12:00:00':"5",

'13:00:00':"8",

'14:00:00':"4",

'15:00:00':"6",

'16:00:00':"7"

},{ name:"上海市",

'12:00:00':"10",

'13:00:00':"12",

'14:00:00':"11",

'15:00:00':"14",

'16:00:00':"11"

},

。。。

]

2. 柱状图数据模型:

2.1 横坐标

xaxis:{data:['12:00:00','13:00:00','14:00:00','15:00:00','16:00:00']}

2.2 地区显示列:

legend: {data:['北京市','上海市','重庆市','深圳市']}

2.3 数据显示：

data:[[ "5", "8", "4", "6", "7" ],

[ "10", "12", "11", "14", "11" ],

[ "15", "14", "15", "13", "14" ],

[ "20", "19", "18", "17", "16" ]

]

3. 折线图数据模型:

同上

4. 饼状图数据模型:

北京市数据

不同类别

legend: {data:['12:00:00','13:00:00','14:00:00','15:00:00','16:00:00']},

数据:

series:{data:[

{value:5,name:'12:00:00'},

{value:8,name:'13:00:00'},

{value:4,name:'14:00:00'},

{value:6,name:'15:00:00'},

{value:7,name:'16:00:00'},

]}

五、最终类似效果