echarts 堆疊樹狀圖。沒有相關的配置API,要自己先把數(shù)據(jù)排好，再傳到數(shù)據(jù)配置中。。。

未排序：

它的配置項：

option = {tooltip: {trigger: 'axis',axisPointer: { // 坐標軸指示器，坐標軸觸發(fā)有效type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'}},legend: {data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎', '百度', '谷歌', '必應', '其他']},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: '聯(lián)盟廣告',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;// 記錄升序排序后應該所在數(shù)組的索引值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 = [];// 按保存好的索引值，排序源數(shù)據(jù)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)

看結果：

最后：
我的這種寫法是菜雞寫法，如果有更簡便的方法，希望大佬能留言分享一波，不勝感激！！！

總結

以上是生活随笔為你收集整理的echarts 堆叠树状图排序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。