JavaScript前端数据呈现——Table会拐弯的column，数据分多列展示

希望能够在前端用table展示数据如下：

以上图片有两个难点，一是各区域、省份的市场表现分三大列进行展示，二是每个区域有一个汇总，以下是我通过SQL+node.js完成了前端数据源的制作。

首先用SQL从数据库提取两段原始数据，区域&省份数据与区域数据然后用union all 将两段数据进行拼接

select 区域,省份,sum(case when 年份=2020 then 数量 end) 同期销量,sum(case when 年份=2021 then 数量 end) 本月销量 from 数据源 group by 区域,省份 union all select 区域,区域 as 省份,sum(case when 年份=2020 then 数量 end) 同期销量,sum(case when 年份=2021 then 数量 end) 本月销量 from 数据源 group by 区域
--通过union all 将省份数据与区域数据进行拼接

node 代码如下：

const sql=`select 区域,省份,sum(case when 年份=2020 then 数量 end) 同期销量,sum(case when 年份=2021 then 数量 end) 本月销量 from 数据源 group by 区域,省份 union all select 区域,区域 as 省份,sum(case when 年份=2020 then 数量 end) 同期销量,sum(case when 年份=2021 then 数量 end) 本月销量 from 数据源 group by 区域`
const sql1=`select sum(数量) 销量 from 数据源 where 年份=2021`
const objn={'东北':1,'华北':2,'华南':3,'华东':4,'华中':5,'西北':6,'西南':7}
//用来对区域进行排序
const [results1, metadata1] = await this.app.model.query(sql)
//results1 为原始数据源，这里用的egg.js 所以sequelize的语句和官网不同
const [resultssum, metadata2] = await this.app.model.query(sql1)
// resultssum 为2021年总销量，用来计算比重
results1.forEach(obj=>{obj.同比=obj.本月销量/obj.同期销量-1obj.比重=obj.本月销量/resultssum[0].销量})
//计算出同比与比重
const results2=_.orderBy(results1,[o=>{ return objn[o.区域]},'本月销量'],['asc','desc'])
//使用lodash对数据进行排序，先排序区域，然后使用销量倒叙就能保证区域数据居于省份上方
const array1=results2.filter(obj=>{return obj.区域==='东北'||obj.区域==='华北'||obj.区域==='华南'})
const array2=results2.filter(obj=>{return obj.区域==='华东'||obj.区域==='华中'})
const array3=results2.filter(obj=>{return obj.区域==='西北'||obj.区域==='西南'})
//将数据按照表格的需求拆分成3个数组
array1.forEach((obj,index)=>{if(index<array2.length){obj.省份1=array2[index].省份obj.本月销量1=array2[index].本月销量obj.同比1=array2[index].同比obj.比重1=array2[index].比重}if(index<array3.length){obj.省份2=array3[index].省份obj.本月销量2=array3[index].本月销量obj.比重2=array3[index].比重obj.同比2=array3[index].同比}})
//将数组array2与array3 并入 array1, 添加数字标号1和2是方便前端设置table的column路径

通过以上方法对数据源进行处理，我们就能够在前端获得一个column拐弯的table表格了。

JavaScript前端数据呈现——Table会拐弯的column，数据分多列展示相关推荐

如何给mysql表添加百万条数据_给mysql一百万条数据的表添加索引
直接alter table add index 添加索引,执行一个小时没反应,并且会导致锁表:故放弃该办法,最终解决办法如下: 一.打开mysql 命令行客户端这里我们那可以看到导出的数据文件所存放 ...
vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化
Vue - Table表格渲染上千数据优化此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当 ...
1万条数据大概占多大空间_Vue - Table表格渲染上千数据优化
这次项目经验会谈谈经常在项目中,针对成千上万数据渲染优化的不断探索来谈谈自己的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操作过程中不会出现UI卡顿或者最糟糕的情况,直接浏览器 ...
JavaScript前端判断文件是否存在（案例详解）
[辰兮要努力]:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端.后台.数据 ...
前端导出excel(element+xlsx+filesaver插件),表格数据重复问题解决
纯前端导出excel,表格数据渲染重复业务需求页面有table表格里的多条数据,并且没有分页.需求希望不调用接口,纯前端生成excel文件实现导出功能. 效果图 1.安装依赖(xlsx 和 fil ...
前端加密php后端解密,使用RSA怎么实现JavaScript前端加密与PHP后端解密功能
使用RSA怎么实现JavaScript前端加密与PHP后端解密功能发布时间:2021-02-08 15:19:14 来源:亿速云阅读:97 作者:Leah 这期内容当中小编将会给大家带来有关使用R ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
前端将后端返回的带颜色的数据进行转换
前端将后端返回的带颜色的数据进行转换因为之前在调用后端接口的时候后端返给我的数据显示乱码:具体如下图所示: 然后这些数据在后台显示的是这样的的,如下图所示: 根据以上这三幅图片可以看到有些数据 ...
自学Web开发第十四天-基于VB和ASP.NET；丰富数据呈现：TreeView控件的使用及与GridView控件联动，深入研究从GridView中取数据
自学Web开发第十四天-基于VB和ASP.NET:丰富数据呈现:TreeView控件的使用及与GridView控件联动,深入研究从GridView中取数据 GridView操作数据库后,刷新TreeV ...
Vue+elementUI从头开始构建前端页面(中篇-Table作妖)
传送门:Vue+elementUI从头开始构建前端页面(前篇-Starter搭建) 传送门:Vue+elementUI从头开始构建前端页面(中篇-Table作妖) 传送门:Vue+elementUI从 ...

JavaScript前端数据呈现——Table会拐弯的column，数据分多列展示

JavaScript前端数据呈现——Table会拐弯的column，数据分多列展示相关推荐

最新文章

热门文章