echarts 堆叠树状图排序

echarts 堆叠树状图。没有相关的配置API,要自己先把数据排好,再传到数据配置中。。。

未排序:

它的配置项:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器,坐标轴触发有效
            type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '邮件营销',
            type: 'bar',
            stack: '广告',
            data: [120, 132, 100, 100, 90, 230, 100]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '广告',
            data: [220, 182, 100, 100, 290, 330, 100]
        },

    ]
};

与之对应的图表显示:
在这里插入图片描述
升序排列之后应该是: 周三,周四,周日,周二,周一,周五,周六

进行排序后:

 let moudle = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    let data1 = [120, 132, 100, 100, 90, 230, 100];
    let data2 = [220, 182, 100, 100, 290, 330, 100];
    let sumY = [];
    // 保存Y轴2个维度的和
    for (let x = 0; x < data1.length; x++) {
        sumY.push(data1[x] + data2[x])
    }
    console.log(sumY);
    let falgdata = [];
    let falg = 0;
    // 记录升序排序后应该所在数组的索引值
    for (let x = 0; x < sumY.length; x++) {
        falg = 0;
        for (let i = 0; i < sumY.length; i++) {
        	//降序为 <
            if (sumY[x] > sumY[i]) {  
                falg++
            }
        }
        console.log(sumY[x], falg)
        falgdata.push(falg);
    }
    console.log("排序", falgdata)
    // 考虑到有值相同时的情况
    for (let x = 0; x < falgdata.length; x++) {
        falg = 0;
        for (let i = x + 1; i < falgdata.length; i++) {
            // console.log(falgdata[x], falgdata[i])
            if (falgdata[x] == falgdata[i]) {
                falgdata[i] += 1;
                // console.log("falgdata[x] = falgdata[i]", falgdata[x], falgdata[i])
            }
        }
    }
    console.log("去重+1,falgdata", falgdata)
    let sortSumY = [];
    let newMoudle = [];
    let newData1 = [];
    let newData2 = [];
    // 按保存好的索引值,排序源数据
    falgdata.map((item, index) => {
        // sortSumY[item] = sumY[index];
        // console.log(index, item, sumY[item]);
        newMoudle[item] = moudle[index];
        newData1[item] = data1[index];
        newData2[item] = data2[index];
    })
    // console.log("排序后的sumY", sortSumY)
    console.log("排序后的newMoudle", newMoudle)
    console.log("排序后的newData1", newData1)
    console.log("排序后的newData2", newData2)

看结果:
在这里插入图片描述

最后:
我的这种写法是菜鸡写法,如果有更简便的方法,希望大佬能留言分享一波,不胜感激!!!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值