Echarts堆叠柱状图排序

客户需求柱状图总量排序(echarts无排序配置)

由于我是在别人的代码基础上修改功能,所以格式展示如下面

 let xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 let yTitle = ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
 let yData = [
        [320, 302, 301, 334, 390, 330, 320],
        [220, 182, 191, 234, 290, 330, 310],
        [820, 832, 901, 934, 1290, 1330, 1320],
        [120, 132, 101, 134, 90, 230, 210],
        [120, 132, 101, 134, 90, 230, 210]
      ];

yData与yTitle是通过方法遍历到series的,顺序对应直接访问: [320, 302, 301, 334, 390, 330, 320],懂的都懂吧,我直接上排序代码了;

//可直接复制
		 let xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
		 let yTitle = ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
		 let yData = [
		        [320, 302, 301, 334, 390, 330, 320],
		        [220, 182, 191, 234, 290, 330, 310],
		        [820, 832, 901, 934, 1290, 1330, 1320],
		        [120, 132, 101, 134, 90, 230, 210],
		        [120, 132, 101, 134, 90, 230, 210]
		      ];
		let allTemp = [];
      	// let tempObj={dept:'',yTitle1:0,yTiteln:0,value:0};
      	//======将数据都创建到对象中==============
      	//如:{dept:'周一',‘直接访问’:320,‘邮件营销’:220,‘联盟广告’:820,‘视频广告’:120,‘搜索引擎’:120,value:(320+220+820+120+120)的值}
      for(let i=0;i<xData.length;i++){
        let tempObj={dept:xData[i]};
        let sum=0;
          for(let j=0;j<yTitle.length;j++){
          //由于key为中文不太好,我这里把key换成了自定义的
            tempObj['yTitle'+j]=yData[j][i];
            sum+=yData[j][i];
          }
          tempObj['value']=sum;
          allTemp.push(tempObj);
        }
        //=========排序,如下图===========
        allTemp.sort((a,b)=>a.value-b.value);
       //=========数据放回==========
	    let tempDept=[];
	    let tempData=new Array(yTitle.length);
	    //yData的二维数组遍历回去
	    for(let l=0;l<yTitle.length;l++){
	    tempData[l]=[];
	      for(let k=0;k<xData.length;k++){
	        tempData[l].push(allTemp[k]['yTitle'+l]);
	      }
	    }
    //最后tempData为y轴数据,tempDept为x轴数据,yTitle不变

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值