【组件模板】瀑布图

收藏

效果

拷贝代码

let total_name = "总计";
let num = 0;
let accumulateValue = [];
option.xAxis.data.reverse().push({
value:total_name
});
option.xAxis.data.reverse();
option.series[0].data.reverse().map(item=>{
accumulateValue.push(num);
num += item.value;
})
accumulateValue.push(0);
accumulateValue = accumulateValue.reverse();
option.series[0].data.push({
itemStyle : {
opacity : 1
},
value:num
});
option.series[0].data.reverse();
option.series[0].stack = 'Total';
option.series= [
{
name: 'Placeholder',
type: 'bar',
stack: 'Total',
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: accumulateValue
},
...option.series
];
return option;

复制代码

方式1：
在Wyn管理后台的【导入】功能，导入以下Zip包，然后在仪表板设计器的左侧工具箱的【组件模板分类中】可以找到。

瀑布图.zip (428.24 KB, 下载次数: 291)

nimotea · nimotea

代码更新记录 V2

var positiveColor = "green";
var negative = "red";
var totalColor = "blue";
var data = option.series[0].data.map(item=>(item.value));
var help = [];
var positive = [];
var negative = [];
let total;
for (var i = 0, sum = 0; i < data.length; ++i) {
if (data[i] >= 0) {
positive.push(data[i]);
negative.push('-');
} else {
positive.push('-');
negative.push(-data[i]);
}
if (i === 0) {
help.push(0);
} else {
sum += data[i - 1];
if (data[i] < 0) {
help.push(sum + data[i]);
} else {
help.push(sum);
}
}
total = sum;
}
let len = data.length;
let total_array = new Array(len);
total_array.fill(0);
total_array.push(total);
let series_zero = option.series[0];
let series_first = {};
let series_second = {};
let series_total = {};
Object.assign(series_first,series_zero);
Object.assign(series_second,series_zero);
Object.assign(series_total,series_zero);
series_zero.data = help;
series_first.data = positive;
series_second.data = negative;
series_total.data = total_array;
console.log(`total:${total_array}`);
option.xAxis.data.push({
value:"总计"});
series_zero.itemStyle = {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(1,0,0,0)',
color: 'rgba(0,0,0,0)'
}
};
series_first.itemStyle = {
color: 'green'
}
series_second.itemStyle = {
color: 'red'
}
series_total.itemStyle = {
color: 'blue'
}
series_zero.stack = 'all';
series_first.stack = 'all';
series_second.stack = 'all';
series_total.stack = 'all';
series_first.name = '上升';
series_second.name = '下降';
series_total.name = '总计';
option.legend.show = true;
option.legend.data = ["上升","下降","总计"]
option.series = [series_zero,series_first,series_second,series_total];
option.tooltip = {
show: true
}
return option

复制代码

瀑布图V2.zip (24.39 KB, 下载次数: 188)

		自动登录	找回密码
密码			立即注册

【组件模板】瀑布图

1 个回复