首页 > 其他分享 >数据格式的处理 echarts数据改为 Table表格格式的数据

数据格式的处理 echarts数据改为 Table表格格式的数据

时间:2023-08-04 11:13:47浏览次数:34  
标签:yData1 yData3 xData Table 数据格式 data echarts

 

 

前景

  后端返回的 echarts 展示数据格式,既要展示echarts 又要展示table表格,echarts 的数据格式为下面

  

{
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
yData1:[10, 52, 200, 334, 390, 330, 220],
yData2: [120, 200, 150, 80, 70, 110, 130],
yData3:['a','b','c','d','e','f','g']

}

 

table数据格式为下面

tableData: [{
          xData: 'Mon',
          yData1: '10',
          yData2: '120',
          yData3:'a'
        }, {
           xData: 'Tue',
          yData1: '王52',
          yData2: '200',
           yData3:'b'
        }, {
          xData: 'Wed',
          yData1: '200',
          yData2: '150',
           yData3:'c'
        },
       .....
]        

 

方法:

   testData(data) {
            return data.xData.map((item, index) => {
                const resultObj = {};
                Object.keys(data).forEach(key => {
                    if (data[key]?.length) {
                        resultObj[key] = data[key][index];
                    }
                });
                return resultObj;
            });
        }




调用的时候 this.testData(res.data) //res.data 的格式为代码1中,  this.testData(res.data)得到代码2中的格式

 

标签:yData1,yData3,xData,Table,数据格式,data,echarts
From: https://www.cnblogs.com/qing1224/p/17605345.html

相关文章

  • echarts多次setOption没有覆盖上一条数据 和 echarts的站位问题
    1、问题现象:echarts第一次获取的数据展示后第二次再次获取会覆盖不了展示的依然是上次的数据解决办法:chart.clear()   2、问题现象:echarts的占位没有数据的话是只展示x轴和y轴解决办法:利用title的副标题subtext,默认为“暂无......
  • 使用echarts画流程图-2
    效果图代码vardata=[{name:'数据中心人员专题库',tooltip:{formatter:'{b}:19999<br/>'},value:[10,0],symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAyCAYAAAAA9rgCAAA......
  • el-table表头高亮动画效果
    el-table表头高亮动画效果<divclass="front-table"><el-table:data="tableData"height="100%"stripe:header-cell-style="{backgroundC......
  • 全国各乡镇的边界数据,json格式适配echarts;
    湖南省的数据现有,联系我获取(免费、帮我看一下小程序);其他省份可通过联系我用脚本获取(要手动输入验证码),或者网站获取(tips:每个区县需要一个个手动下载,且每个下载需要输入验证码):https://www.poi86.com/ ......
  • ECharts随笔
    EChats的loadingECharts中有自带的loading方法 showLoading()通常搭配 hideLoading()使用1xxx.showLoading({2text:"数据正在路上...",3color:"#409eff",4textColor:"#000",5maskColor:"rgba(255,255,255,0.2)",6......
  • JPA配置实体时 insertable = false, updatable = false
    @Excel(name="创建时间",format="yyyy-MM-ddHH:mm:ss",width=20)@Column(name="created_time",insertable=false,columnDefinition="timestampdefaultcurrent_timestamp")@Temporal(TemporalType.TIMES......
  • 开启firewalld或iptables的日志记录
    文件名:ip_fire.sh内容:#!/bin/bash#iptablesiptables_run(){#修改日志文件grep-e"^kern.*"/etc/rsyslog.confflag_k=$?if[$flag_k-eq0]thenecho"rsyslog日志指定文件已存在"elsesed-i'/#kern.*......
  • 使用echarts画流程图
    场景流程图中涉及到弯曲的箭头,使用普通的css是画不出来的,至少我是没想到办法。效果图代码option={xAxis:{show:false,type:'value'},yAxis:{show:false,type:'value'},tooltip:{formatter:'{b}'},series:[{......
  • 七月学习之Iptables链的概念
    2、Iptables链的概念2.1、什么是链在iptables中的关卡为什么被称作"链"呢防火墙的作用就在于对经过的数据报文进行"规则"匹配,然后执行规则对应的"动作",所以当报文经过这些关卡的时候,则必须匹配这个关卡上的规则但是,这个关卡上可能不止有一条规则,而是有很多条规则,当我们把这些规......
  • 【入门教程】3202年了,还有人没用stable diffusion画个自己的AI小姐姐吗。
    个人绘画作品: 说明本文主要是讲一下如何安装、使用整合包,以及介绍画真人图片的大模型(介绍的整合包只提供二次元模型,个人不太感兴趣)通过最简单的介绍帮助大家快速入门,开始画图,不会深入的进行讲解,毕竟网上讲的已经很详细了。 介绍目前市面上用的最多的AI绘画工具是stable-......