js-xlsx + handsontable + echarts实现excel上传编辑然后显示成图表

joy968 发布于2019-08-23 12:03 / 2301人阅读

摘要：生成报表数据都处理完了之后，就是生成报表了，报表这里稍微做的灵活了一点，是要让用户根据上传的数据，自己选择字段，然后用去生成对应的报表。

js-xlsx + handsontable + echarts 实现在前端导入excel数据并生成echart报表

前言

最近都在做类似 ERP 的项目,所以呢,又碰到一个比较{{BANNED}}的需求(至少对我来说是),在前端导入 excel 文件,
然后在浏览器里面预览和编辑,　最后再选择一些数据,用echarts生成报表.

依赖

js-xlsx 读取excel数据到js

handsontable 类似Excel一样显示和编辑列表数据

echarts 一个生成各种报表的库

数据导入

数据导入这边需要用到浏览器的 FileReader对象 的 readAsBinaryString() 函数, 把选择的文件读取出来,
然后再监听 FileReader 对象的 onload 事件 , 在 onload 事件的回调函数中,我们可以获取到读取的二进制数据.
这里顺便提一下, FileReader 对象提供以下方法,用来读取各种格式的数据(参考自MDN)

FileReader.readAsArrayBuffer() // 读取文件的 ArrayBuffer 数据对象.

FileReader.readAsBinaryString() // 读取文件的原始二进制数据

FileReader.readAsDataURL() // 返回一个URL格式的字符串以表示所读取文件的内容

FileReader.readAsText() // 返回一个字符串以表示所读取的文件内容

tips: 需要注意的是 readXxxxx() 函数,是不直接返回读取结果的,因为读取这个动作异步的.

readAsBinaryString 读取到的内容应该是一个二进制的字符串,这个时候,需要调用 js-xlsx
的 read 方法, read 返回的是一个可读性很强的对象了,我看了一下,里面有关于表格的属性很多都有
,如样式, vsb宏, sheets等等 (反正我对excel也不熟,认识的也就这些哈),

npm i xlsx

import XLSX from "xlsx"
...
let res = XLSX.read(data, {type: "binary"})
let sheetName = res.Sheets[res.SheetNames[0]]
let table = XLSX.utils.sheet_to_json(sheetName, {header: "A", raw: true, defval: " "})

这里的 res 得到的我猜是 excel 表格原有的数据,里面包含上面说的很多种数据,而正常情况下,
我们需要的往往只是第一个 sheet 里面的 纯数据, 所以调用 XLSX.utils.sheet_to_json
获取第一个 sheet 的数据, table 拿到的应该是一个我们熟悉的数组了.这个时候如果你只是单纯的渲染的话,
你甚至可以就此打住,自己写一个渲染方法(比如字符串拼接哈)把数据渲染出来即可.

如果单纯的显示无法满足你的需求,那么你可能需要 handsontable 了.

tips: sheet_to_json 的 第二个参数里面的 header，可以传数字，也可以转 "A", 两个的主要区别在于转化出来的表第一行如果是空行会不会正常显示，
传 "A" 会正常显示，传数字的话，如果表格的第一行有空白单元格，表格会错乱。

数据展示

首先当然是安装,我的项目是基于 vue 的,所以要安装 vue 版本的,其他框架的,只要安装响应的版本即可.

npm i @handsontable/vue

然后就可以直接这么用

模板里面的 settings 是 handsontable 的一些配置, 每个项目的需求不同,配置也不同,这里就不列举出来了, 上面获取到的 table 在这里要赋值给 settings.data

我这里用 handsontable 显示数据的目的，是让用户可以清晰的看到上传的表的数据和结构，可以删除屌部分无用的数据，减少冗余。

生成报表

数据都处理完了之后，就是生成报表了，报表这里稍微做的灵活了一点，是要让用户根据上传的数据，自己选择字段，然后用 echart 去生成对应的报表。

为了偷懒降低复杂度，我这里只提供了3种报表类型供选择,分别是饼图，柱状图，折线图，稍微分析 echart 的配置手册，我发现各种类型的图表，
其实主要的区别在 series 配置项下面，其他位置几乎没啥区别 ~~就算有区别，也被我无视~~ 。最终的实现大概是这样

let option = {
  title: {...},
  tooltip: {...},
  xAxis: {...},
  yAxis: {...},
  toolbox: {...},
}

switch (type) {
  case "pie" : 
    option.series = {...}
    break
  case "pie" : 
    option.series = {...}
    break
  case "pie" : 
    option.series = {...}
    break
}

myChart.setOption(option)

echart 第一次渲染完以后，如果改变 option 的数据然后重新渲染，新的 option 数据是采用追加的方式加进去的，类似 javascript 的 Object.assign(),
所以如果新的数据没办法完全覆盖掉就旧的数据的话，旧的那些没有被覆盖掉的数据，还会渲染出来. 我对这种情况的处理方法是调用 dispose.dispose() 把实例销毁掉，
然后重新创建一个新实例，设置新的 option

最后

源码记得star 和follow哦。

专线服务云服务器 echarts 图表 excel表格图表制作 excel表格制作图表 excel表格怎么制作图表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97890.html

手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
Handsontable 类似 excel 表格编辑器

摘要：原文发布于个人博客欢迎访问简介是一个类似表格编辑器，支持丰富的展现和交互，以及多样的单元格展现和配置核心由原生编写，通过打包同类项目中，点赞最多，列表官网地址支持的特征的一些主要功能这里只列出主要功能，想了解更多更能，可以查询官方文档。这原文发布于个人博客>>欢迎访问 HandsonTable 简介 Handsontable 是一个类似 excel 表格编辑器，支持丰富的展现和交互...

ztyzz 2019-08-20 18:13 评论0 收藏0
Handsontable 类似 excel 表格编辑器

摘要：原文发布于个人博客欢迎访问简介是一个类似表格编辑器，支持丰富的展现和交互，以及多样的单元格展现和配置核心由原生编写，通过打包同类项目中，点赞最多，列表官网地址支持的特征的一些主要功能这里只列出主要功能，想了解更多更能，可以查询官方文档。这原文发布于个人博客>>欢迎访问 HandsonTable 简介 Handsontable 是一个类似 excel 表格编辑器，支持丰富的展现和交互...

villainhr 2019-08-01 17:12 评论0 收藏0
12个值得关注的顶级可视化JS库涉及图表、动画、时间处理，表格操作

摘要：本文是译文，原文是我在原文的基础上加了百度的图表库，这个也是毫不逊色其他图表库的。更新记录图表类数据驱动文档通常被称为最强大的开源可视化库。是迄今为止最好的图表库。在顶级功能支持，使任何元素可拖动，可旋转或可滑动滚动和快速性能的能力。本文是译文，原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库，这个也是毫不逊色其他图表...

JinB 2019-08-20 14:14 评论0 收藏0