Vue导入Echarts实现散点图 axios解析excel流数据 echarts数据可视化前端展示

news2024/11/23 15:17:25

        为实现从本地服务器下载xlsx文件至前端vue echarts中展示，踩过许多坑，现将完整流程和源码分享。

1、 vue axios get请求 返回304 Not Modified 不更新数据

原因：由于浏览器缓存了get请求，导致不管如何刷新，数据都不更新。 

var url = 'http://127.0.0.1:8000/' + this.value.value + '?nocache=' + (new Date()).getTime() // 本地数据库下载
axios.get(url,{ responseType: "arraybuffer" })

解决方法：url尾部添加 '?nocache=' + (new Date()).getTime()  

给url这个对象添加一个nocache的参数，属性为timestamp，值为时间戳，原理是实时更改url，浏览器判断缓存内容不同，就会正常更新数据。

2、获取并解析xlsx文件流数据

axios.get(url,{ responseType: "arraybuffer" })
        .then((res) => {
          console.log("res:" + res)
          console.log("res.data:" + res.data)
          
          let wb = XLSX.read(res.data, {
						type: 'arraybuffer'
					});
          
          //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
		  //wb.Sheets[Sheet名]获取第一个Sheet的数据
          let worksheet = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])); // 将一个 JavaScript 对象或值转换为 JSON 字符串
          console.log('worksheet:' + worksheet)

可以使用axios的get方法发送HTTP请求，获取Excel文件的二进制流数据。在请求中，需要设置responseType为arraybuffer。

得到Excel文件流数据后，可以使用wb.Sheets[wb.SheetNames[0]]函数获取Sheets中第一个Sheet的数据。使用插件SheetJS使用XLSX.utils.sheet_to_json()解析excel，给空的单元格赋值为空字符串。最后使用JSON.stringify()将对象转换为 JSON 字符串。

本地存储的xlsx文件内容，简单的线性回归的y = 2x：

我们打印下worksheet看看字符串内容：

 3、处理Json字符串并由前端echarts可视化展示

 将Json字符串转为二维数组：

var axisData = []
for( var i = 0;i < myobj.length; i++) {
    var x = myobj[i].x
    var y = myobj[i].y
    var newArr = [x,y]
}
console.log("axisData:" + axisData);

打印二维数组axisData内容如下：

博主尝试了很多种方法，只有上面函数转换生成的二维数组echarts才会正常显示。

以下为其他尝试Json转数组的方法，echarts均不可识别，如果有明白的大佬请留言解释下。

// 获取二维数组第一种方法
          const array = [[]];
          for(var i = 0;i < myobj.length; i++){
            array[i] = [];
            for(var j=0;j<2;j++){
              if(j==0){
                var x = myobj[i].x;
                array[i][j] = x;
                console.log("array[i][j]:"+array[i][j]);
              } else if (j==1) {
                var y = myobj[i].y;
                array[i][j] = y;
                console.log("array[i][j]:"+array[i][j]);
              }
            }
          }

// 获取二维数组第二种方法
          let array2 = new Array(myobj.length);   //动态定义一个二维数组
          for(let i=0;i<array2.length;i++){
            array2[i] = new Array(2);
            for(var j=0;j<2;j++){
              if(j==0){
                var x = myobj[i].x;
                array2[i][j] = x;
                console.log("array2[i][j]:"+array2[i][j]);
              } else if (j==1){
                var y = myobj[i].y;
                array2[i][j] = y;
                console.log("array2[i][j]:"+array2[i][j]);
              }
            }
          }
          this.arrActive2 = {...array2};   //形同于arrActive2=[['','',''],['','',''],['','','']]
          console.log("this.arrActive2" + this.arrActive2);

最后将axisData二维数组传递给echarts组件

echarts.init(document.getElementById('chart')).setOption({
    xAxis: { triggerEvent: true }, // 允许点击X轴（y轴需要点击也是要加这句话）
    yAxis: { triggerEvent: true },
    series: [
        {
            symbolSize: 20,
            data: axisData,
            type: 'scatter'
        }
    ]
})

用户选择已导入的xlsx数据文件，单击“展示”按钮，可视化结果散点图展示在按钮下方，完整效果如下：

 4、完整的前端源码

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import * as echarts from 'echarts'
import * as XLSX from 'xlsx'
import { request } from '@/api/service'
import { AddObj, GetList, UpdateObj, DelObj } from './api' // 查询添加修改删除的http请求接口
import axios from 'axios' // Axios是一个基于promise的HTTP库（类似于jQuery的Ajax，用于HTTP请求）可以用于浏览器和node.js（既可以用于客户端也可以用于node.js编写的服务端）
// import { process_chart_data1 } from './process_data.js'
export default {
  name: 'echarts',
  mixins: [d2CrudPlus.crud],
  mounted () {
    this.pageRequest().then((res) => {
      const resList = res.data.data
      resList.forEach((val, index) => {
        this.dataList.push({
          value: val.file_url,
          label: val.name
        })
      })
      console.log(this.dataList)
    })
  },
  data () {
    return {
      form: {},
      dataList: [],
      value: ''
    }
  },
  methods: {
    change (val) {
      console.log(val)
    },
    onSubmit () {
      // 在这设置图表option
      // api
      //   .getFileData({
      //     filePath: 'this.value.value'
      //   })
      var url = 'http://127.0.0.1:8000/' + this.value.value + '?nocache=' + (new Date()).getTime() // 本地数据库下载
      axios.get(url,{ responseType: "arraybuffer" })
        .then((res) => {
          console.log("res:" + res)
          console.log("res.data:" + res.data)
          // let str = String.fromCharCode.apply(null, new Uint16Array(res.data)) // ArrayBuffer转为字符串，参数为ArrayBuffer对象
          let wb = XLSX.read(res.data, {
						type: 'arraybuffer'
					});
          // this.handle(wb);
          //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
				  //wb.Sheets[Sheet名]获取第一个Sheet的数据
          let worksheet = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])); // 将一个 JavaScript 对象或值转换为 JSON 字符串
          console.log('worksheet:' + worksheet)
          // this.worksheet是读入的JSON文件的数据，读出的数据时对象类型，要转为数组才行
          // const obj= JSON.stringify(worksheet);
          // var arr = [];
          // for(let key in obj){
          //   arr.push(obj[key])
          // }
          // console.log("arr" + arr); // ",[,{,\,",x,\,",:,1,,,\,",y,\,",:,2,},,,{,\,",x,\,",:,2,,,\,",y,\,",:,4,},,,{,\,",x,\,",:,3,.,5,,,\,",y,\,",:,7,},,,{,\,",x,\,",:,4,,,\,",y,\,",:,8,},],"
          // var myobj = worksheet;
          var myobj = eval('('+worksheet+')'); // 将字符串str当成有效的表达式来求值并返回计算结果

          // 获取二维数组第一种方法
          // const array = [[]];
          // for(var i = 0;i < myobj.length; i++){
          //   array[i] = [];
          //   for(var j=0;j<2;j++){
          //     if(j==0){
          //       var x = myobj[i].x;
          //       array[i][j] = x;
          //       console.log("array[i][j]:"+array[i][j]);
          //     } else if (j==1) {
          //       var y = myobj[i].y;
          //       array[i][j] = y;
          //       console.log("array[i][j]:"+array[i][j]);
          //     }
          //   }
          // }

          // 获取二维数组第二种方法
          // let array2 = new Array(myobj.length);   //动态定义一个二维数组
          // for(let i=0;i<array2.length;i++){
          //   array2[i] = new Array(2);
          //   for(var j=0;j<2;j++){
          //     if(j==0){
          //       var x = myobj[i].x;
          //       array2[i][j] = x;
          //       console.log("array2[i][j]:"+array2[i][j]);
          //     } else if (j==1){
          //       var y = myobj[i].y;
          //       array2[i][j] = y;
          //       console.log("array2[i][j]:"+array2[i][j]);
          //     }
          //   }
          // }
          // this.arrActive2 = {...array2};   //形同于arrActive2=[['','',''],['','',''],['','','']]
          // console.log("this.arrActive2" + this.arrActive2);

          var axisData = []
          for( var i = 0;i < myobj.length; i++) {
            var x = myobj[i].x
            var y = myobj[i].y
            var newArr = [x,y]
            axisData.push(newArr)
          }
          console.log("axisData:" + axisData);

          //解析excel
          // this.analysisExcel(file).then((tableJson) => {
          //   if (tableJson && tableJson.length > 0) {
          //     //成功解析出数据
          //     //只取第一个sheet的数据
          //     let dataExcel = tableJson[0];
          //     console.log("数据", dataExcel);
          //     console.log(JSON.stringify(dataExcel.sheet));
          //   }
          // });

          console.log('this.value.label' + this.value.label)
          this.data = axisData
          // this.data = res.data.data
          switch (this.value.label) {
            case '逻辑回归.xlsx':
              echarts.init(document.getElementById('chart')).setOption({
                xAxis: {},
                yAxis: {},
                series: [
                  {
                    symbolSize: 20,
                    data: this.data,
                    type: 'scatter'
                  }
                ]
              })
              break
            case '线性回归.xlsx':
              echarts.init(document.getElementById('chart')).setOption({
                xAxis: { triggerEvent: true }, // 允许点击X轴（y轴需要点击也是要加这句话）
                yAxis: { triggerEvent: true },
                series: [
                  {
                    symbolSize: 20,
                    data: axisData,
                    type: 'scatter'
                  }
                ]
              })
              break

            default:
              break
          }
        })
    },
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return GetList(query)
    },
    addRequest (row) {
      console.log('api', api)
      return AddObj(row)
    },
    updateRequest (row) {
      console.log('----', row)
      return UpdateObj(row)
    },
    delRequest (row) {
      return DelObj(row.id)
    }
  }
}
</script>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/766580.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Echarts：柱状图的第一个柱子超出了y轴

Echarts：柱状图的第一个柱子超出了y轴

问题 使用Echarts绘制柱状图的时候&#xff0c;第一个柱子超出了y轴&#xff1a; 解决 boundaryGap 此属性与坐标轴两端空白有关。默认值为true即留空&#xff0c;false则表示柱子顶头,而出现上述现象,是因为代码中参数 boundaryGap设置为了false 将boundaryGap的值改为tru…
阅读更多...
sadtalker-- 本地生成数字人

sadtalker-- 本地生成数字人

文章目录 概要工具讲解安装流程1. 安装Python2. 安装FFmpeg3. 安装Sadtalker4. 导入模型 使用流程1. 生成语音2. 上传图片跟语音3. 点击生成&#xff0c;漫长等待4. 虚拟内存 小结 概要 sadtalker&#xff0c;可以根据图片以及语音&#xff0c;生成动态视频&#xff0c;跟现在…
阅读更多...
怎么将拼接的字符串element组件通过“v-html“渲染到页面

怎么将拼接的字符串element组件通过“v-html“渲染到页面

如上图所示&#xff0c;没那么多废话&#xff0c;直接上代码 html中 <div id"app"><div :html"tempHtml"></div> </div>vue中 new Vue({el: #app,data() {return {tempHtml: }},created() {this.getHtml()},mounted() {window.…
阅读更多...
Java学到什么程度可以在当下面试找工作？

Java学到什么程度可以在当下面试找工作？

今年的面试主打一个字&#xff1a;卷&#xff01; 随着经济环境下行&#xff0c;大厂降本增效、筛除了一部分冗余岗位&#xff0c;原本荒蛮的IT行业发展正在逐步进入正轨中。虽说今年就业环境不容乐观&#xff0c;但数据不会骗人&#xff0c;以Java为例&#xff0c;在职友集上…
阅读更多...
gd32f103vbt6 串口OTA升级3-linux端的部分

gd32f103vbt6 串口OTA升级3-linux端的部分

一. 简介 本文主要是对linux端升级单片机程序的功能部分做一些介绍&#xff0c;包括一些软件流程。 二.硬件部分 2.1 rk3399cpugd32f103 2.2 连接方式&#xff1a;串口&#xff08;115200&#xff0c;8N1&#xff09;或者iic&#xff08;本文没有介绍iic&#xff09; 三、其…
阅读更多...
[nlp] GPT

[nlp] GPT

一、联合训练任务 1.1 NTP(Next Token Prediction) gpt预训练的一个目标函数有两个，第一个是基础的下一个词预测任务，选择一个K窗口，将窗口中的K个词的embedding作为条件去预测下一个词。 1.2 TC(Text Classification) 第二个是一个分类任务，一段话给一个标签，然后去预…
阅读更多...
Qt 获得QTableview所选中的行的某一列数据

Qt 获得QTableview所选中的行的某一列数据

1、点击QtableView控件-》右键-》跳到槽-》选择 2、编写槽函数信息 void XXX::on_tableView_CalTable_clicked(const QModelIndex &index) {int rowindex.row();//获得当前行索引int colindex.column();//获得当前列索引QModelIndex index1 CalViewModel->index(row,2)…
阅读更多...
开鸿智谷与华秋达成生态共创合作，共同打造OpenHarmony硬件生态

开鸿智谷与华秋达成生态共创合作，共同打造OpenHarmony硬件生态

7月11日&#xff0c;在2023慕尼黑上海电子展现场&#xff0c;开鸿智谷数字产业发展有限公司(以下简称“开鸿智谷”)与深圳华秋电子有限公司(以下简称“华秋”)签署了生态共创战略合作协议&#xff0c;共同推动开源鸿蒙OpenAtom OpenHarmony(以下简称“OpenHarmony”)硬件生态繁…
阅读更多...
在线图片处理工具：让您的图片处理更加轻松

在线图片处理工具：让您的图片处理更加轻松

在我们日常生活和工作中&#xff0c;图片已经成为了一种非常常见的媒介。然而&#xff0c;有时候我们会遇到一些问题&#xff0c;例如图片过大不能上传或下载等等。在这种情况下&#xff0c;我们需要一个功能强大的图片处理工具&#xff0c;来解决这些问题。今天&#xff0c;我…
阅读更多...
Visual Studio 向工程中添加现有文件夹

Visual Studio 向工程中添加现有文件夹

前言&#xff1a; 在创建C#类库&#xff08;dll&#xff09;工程后&#xff0c;需要把现有的C#文件添加进工程中 步骤1.将所有文件夹复制到工程中 步骤2. 点击这个图标&#xff0c;显示所有文件夹 工程目录下的所有文件夹都会被显示出来 选中需要添加的文件夹&#xff0c;右…
阅读更多...
Ceph 应用（CephFS文件存储、块存储、对象存储）

Ceph 应用（CephFS文件存储、块存储、对象存储）

目录 一&#xff1a;创建 CephFS 文件系统 MDS 接口 1、服务端操作 &#xff08;1&#xff09;在管理节点创建 mds 服务 &#xff08;2&#xff09;查看各个节点的 mds 服务 &#xff08;3&#xff09;创建存储池&#xff0c;启用 ceph 文件系统 &#xff08;4&#xff09;…
阅读更多...
C#（六十二）之泛型的约束

C#（六十二）之泛型的约束

类型约束 基类约束有两个重要的目的。 1&#xff1a;它允许在泛型类中使用有约束指定的基类成员。 2&#xff1a;确保只能使用支持指定基类或派生类的类型实例。 约束是使用 where 上下文关键字指定的。 下表列出了五种类型的约束&#xff1a; 约束 说明 T&#xff1a;str…
阅读更多...
C++初阶 - 2.类和对象（上）

C++初阶 - 2.类和对象（上）

目录 1.面向过程和面向对象初步认识 2.类的引入 3.类的定义 4.类的访问限定符及封装 4.1 访问限定符 4.2 封装 5.类的作用域 6. 类的实例化 7.类对象模型 7.1 如何计算类对象的大小 7.2 类对象的存储方式猜测 7.3 结构体内存对齐规则 8. this指针 8.1 this指针的…
阅读更多...
网络--练习错题笔记

网络--练习错题笔记

1、SNMP是简单网络管理协议&#xff0c;与邮件发送无关 发送邮件&#xff1a;SMTP协议&#xff0c;简单邮件管理协议 用户发送邮件是利用SMTP协议将编辑好的邮件送往发送端的邮件服务器 2、mac地址前24位是厂商编号 来自IEEE&#xff0c;后24位来自厂商&#xff0c;区别每一个…
阅读更多...
5.0蓝牙模块助力车联网实现简便、安全连接-车载蓝牙模块SKB501参考设计

5.0蓝牙模块助力车联网实现简便、安全连接-车载蓝牙模块SKB501参考设计

车载电子系统正向智能化、信息化和网络化方向发展&#xff0c;无线通信技术在汽车等移动系统中有着广泛的应用前景。车联网通过蓝牙技术可以实现与各种设备进行无缝、快速的连接&#xff0c;针对这部分应用需求&#xff0c;SKYLAB研发推出的5.0蓝牙模块SKB501&#xff0c;该模块…
阅读更多...
Linux调试器------gdb的使用【Linux系统编程】

Linux调试器------gdb的使用【Linux系统编程】

目录 背景&#xff1a; 指令&#xff1a; 背景&#xff1a; &#xff08;1&#xff09;debug和release&#xff1a;debug可以调试&#xff08;形成可执行程序时会有调试信息&#xff09;&#xff0c;release不可以。Linux下默认是release版本。如果要以debug版本发布&#…
阅读更多...
Spring Boot 3.x 自动配置详解

Spring Boot 3.x 自动配置详解

基于Spring Boot 3.1.0 系列文章 Spring Boot 源码阅读初始化环境搭建Spring Boot 框架整体启动流程详解Spring Boot 系统初始化器详解Spring Boot 监听器详解Spring Boot banner详解Spring Boot 属性配置解析Spring Boot 属性加载原理解析Spring Boot 异常报告器解析Spring Bo…
阅读更多...
《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(3)-再识Charles

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(3)-再识Charles

1.简介 上一篇通过宏哥的介绍想必各位小伙伴或者童鞋们对Charles已经有了一个理性地认识&#xff0c;今天宏哥在从Charles的外貌介绍和分享一下&#xff0c;让小伙伴们或者童鞋们再对Charles有一个感性的认识&#xff0c;今天主要是对Charles的界面进行一个详细的介绍。 2.Ch…
阅读更多...
CSS:给子元素设置了浮动，页面缩放的时候，子元素往下掉

CSS:给子元素设置了浮动，页面缩放的时候，子元素往下掉

前言 给子元素设置了浮动&#xff0c;页面缩放的时候&#xff0c;子元素往下掉 html代码&#xff1a; <div class"father"><div class"child1"></div><div class"child2"></div> </div>css代码 .child1…
阅读更多...
SSD 读写擦相关知识

SSD 读写擦相关知识

1. 简述闪存的工作原理及存储和记录数据 每个闪存芯片中有海量的存储单元&#xff08;Cell&#xff09;&#xff0c;下图是一个闪存存储单元的示意图&#xff0c;从上到下包括控制栅极、氧化层、浮栅层、隧道氧化层和衬底&#xff1b;左侧是源极&#xff0c;右侧是漏极。电流只…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023