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)
看结果:
最后:
我的这种写法是菜鸡写法,如果有更简便的方法,希望大佬能留言分享一波,不胜感激!!!