美文网首页
当echart 柱状图,两个柱子,如去年数据,今年数据,返回的数

当echart 柱状图,两个柱子,如去年数据,今年数据,返回的数

作者: 啥啥啥啥啥啥啥 | 来源:发表于2025-01-14 11:02 被阅读0次

需要展示的效果如下图,可能是2~x个柱。后端返回的数据类似:

{

old:[

{name:"1",value:1},{name:"2",value:2},{name:"3",value:3}

],

new:[

{name:"1",value:1},{name:"3",value:3}

]

}

可以看到 new数据里面缺少了{name:"2"},如果简单得循环遍历取值填充到ecahrt的话,那么name:"3"

的值会显示在x轴刻度为2的地方,3的地方反而没有值了,按理说x轴刻度为2的地方,第二根柱子应该是0。

前端处理思路如下:JS

1.先将old new 数据里X轴都取出来拼接,然后去重,暂定为Arr;

2.命名一个新的数组对象,用Arr 去遍历生成 俩这样的数组 [{name:arr[index] ,value:0}......],暂命名AARR  BARR;

3.用AARR套原始数据old双层遍历,如果old中有name和AARR中name相同的,AARR.item.value=old.value,否则不处理 还是0;得到完整的,补0以后的AARR

4.同理:用BARR套原始数据new双层遍历,如果new中有name和BARR中name相同的,BARR.item.value=new.value,否则不处理 还是0;得到完整的,补0以后的BARR;

5.再去处理AARR  BARR 生成echart 所需要的数据。

目前能想出来的最笨的办法,有大神有好方法欢迎交流。最后贴一下代码怕自己忘了

相关文章

  • echarts处理区域点击

    echart默认的点击事件只能通过点击图形触发,比如柱状图,只有点击柱子才会触发,如果数据相差较大,有些柱子非常小...

  • Echart例子-笔录

    横向术状图(颜色根据条件) 横向柱状图(指定数据到坐标轴的映射) 多条数据散点图 Echart多饼图例子 1、先看...

  • mysql 防止重复插入唯一限制的数据

    一. insert ignore into 当插入数据时,如出现错误时,如重复数据,将不返回错误,只以警告形式返回...

  • Qt编写可视化大屏电子看板系统16-标准柱状图

    一、前言 标准柱状图是大屏系统中最常用的一种展示数据效果图,提供不同的柱子显示数据值,在QCustomPlot的基...

  • 开发中关于从线程中返回数据的一点心得体会

    如下方法:当你的返回值是来自线程返回的数据的话,这是就不适合用return来返回数据,因为当开启一个子线程去获取数...

  • 界面设计-数据报表

    离散数据 定义:数值可清晰计数,入NBA 得分,篮板、失误,点赞数等等; 常见的数据模型:柱状图最适合表现离散数据...

  • echart清空折线图数据

    如何在获取新的数据前清空echarts折线图、柱状图中所有的折线和柱子? 在echarts的操作实际运用中...

  • iOS,NSNull型数据导致程序crash

    网络请求返回来的数据中有可能是NSNull型的数据,而非我们希望的数据类型。如:在对一个原本为NSArray型的数...

  • graphpad作图

    1.一维度柱状图(一次分组、非配对样本): column--create粘贴数据,画图点击柱子,改变填充颜色和轮廓...

  • matplotlib之散点图

    问题描述 散点图展示数据的聚集,而不是趋势(如线图)或者离散值(如柱状图)。散点图的目的是帮助你看数据模式。 基本...

网友评论

      本文标题:当echart 柱状图,两个柱子,如去年数据,今年数据,返回的数

      本文链接:https://www.haomeiwen.com/subject/ffriyjtx.html