首页 > 其他分享 >echarts爬坑记—数组反转reverse导致源数据发生改变

echarts爬坑记—数组反转reverse导致源数据发生改变

时间:2022-09-03 16:13:28浏览次数:89  
标签:坑记 reverse 反转 柱状图 数组 数据 echarts

原文链接:echarts爬坑记—数组反转reverse导致源数据发生改变 – 每天进步一点点 (longkui.site)

 

0.背景

上一篇文章中介绍了 echarts让饼图数据和图例位置发生改变的。数据返回后,又遇到了新坑。echarts 填充柱状图的顺序的反的。这个简单啊,直接用reverse函数反转一下echarts的name数组和data数组就行了。结果悲剧了,一是来回切换柱状图的时候发现,柱状图的数据每切换一次数据颠倒一次,更要命的是原来的饼图数据由于和柱状图数据的同一个数据源,结果,比例数据全是反的。

1.问题原因及解决办法

这个问题的原因在于我们使用的reverse函数,这个函数能把数组的数据反转过来,但是有个问题,reverse会把源数据的也反转过来,就算我们把数据赋值出来再使用reverse函数,还是会将原始数据全部反转过来,那么应该怎么解决呢?

很简单,前面加上slice函数就行了。

// 原来的写法,以name数组为例 res.data.name.reverse() // 现在的写法 res.data.name.slice().reverse()

这样的话,我们的柱状图也能按照顺序要求显示数据,而且饼图的数据也不会乱了。

每天进步一点点!!!

 

标签:坑记,reverse,反转,柱状图,数组,数据,echarts
From: https://www.cnblogs.com/longkui-site/p/16652844.html

相关文章

  • echarts实现数据轮播效果
    原文链接:echarts实现数据轮播效果–每天进步一点点(longkui.site) angular怎么实现数据轮播效果呢?echarts要实现数据轮播效果,最终实现效果如下图所示:这篇文章,我们......
  • Vue+Echarts图表自适应
    图表的自适应,挺简单的,但是有几个需要注意的点。1、我们采用addEvenListener()方法,此方法用于向指定元素添加监听事件。且同一元素目标可重复添加,不会覆盖之前相同事件,配合......
  • Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表
    通常,这类需求在客户端应用中不太会用到,但是在后端的各种统计分析模块会经常碰到。比如:通过折线图、柱状图、雷达图等可视化形式,更直观的展现和分析经营状况或系统运行情况......
  • Echarts 多图表共用legend
    //参考地址:https://www.isqqw.com/echartsdetail?id=31404//加载数据functionLoadDataX(){GetApiDataSync2("url",'POST',{......
  • leetcode 206. Reverse Linked List 反转链表(简单)
    一、题目大意给你单链表的头节点head,请你反转链表,并返回反转后的链表。示例1:输入:head=[1,2,3,4,5]输出:[5,4,3,2,1]示例2:输入:head=[1,2]输出:[2,1]示例3:......
  • [Google] LeetCode 150 Evaluate Reverse Polish Notation
    EvaluatethevalueofanarithmeticexpressioninReversePolishNotation.Validoperatorsare+,-,*,and/.Eachoperandmaybeanintegeroranotherexpres......
  • Unity踩坑记录(持续更新)
    1.利用UsePass可以帮助投影pass合批。相同网格、不同材质、不同shader,只要这些shader使用UsePass引用了同一个pass,并且材质的属性和宏都一样,那么这些物体的投影pass就可以......
  • [CTF]2022 CNSS夏令营 Web&Reverse 复现wp
    写在前面很有趣的一次(大)学前教育,作为一个22级泥电新生,对CTF网安类的东西完全是一窍不通,进新生群然后就被拉进来Van了.结果没想到还挺好玩(可能是我这几天太无聊......
  • Echarts柱状图渲染进度条效果
    柱状图渲染进度条效果option={yAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],axisTick:{show:fals......
  • echarts-dataset数据源配置项
     如下效果图:   代码入下:letbox4=document.querySelector('.box4')letmyCharts3=echarts.init(box4)myCharts3.setOption({......