【组件模板】瀑布图

效果


拷贝代码

1. let total_name = "总计";
   
2. 
   
3. let num = 0;
   
4. let accumulateValue = [];
   
5. option.xAxis.data.reverse().push({
   
6. value:total_name
   
7. });
   
8. option.xAxis.data.reverse();
   
9. 
   
10. 
    
11. option.series[0].data.reverse().map(item=>{
    
12.         accumulateValue.push(num);  
    
13.         num += item.value;
    
14. })
    
15. accumulateValue.push(0);
    
16. accumulateValue = accumulateValue.reverse();
    
17. 
    
18. 
    
19. option.series[0].data.push({
    
20. itemStyle : {
    
21.         opacity : 1
    
22. },
    
23.   value:num
    
24. });
    
25. option.series[0].data.reverse();
    
26. option.series[0].stack = 'Total';
    
27. option.series= [
    
28.   {
    
29.       name: 'Placeholder',
    
30.       type: 'bar',
    
31.       stack: 'Total',
    
32.       itemStyle: {
    
33.         borderColor: 'transparent',
    
34.         color: 'transparent'
    
35.       },
    
36.       emphasis: {
    
37.         itemStyle: {
    
38.           borderColor: 'transparent',
    
39.           color: 'transparent'
    
40.         }
    
41.       },
    
42.       data: accumulateValue
    
43. 
    
44.   },
    
45. ...option.series
    
46. ];
    
47. 
    
48. 
    
49. 
    
50. return option;
    

复制代码

方式1：
在Wyn管理后台的【导入】功能，导入以下Zip包，然后在仪表板设计器的左侧工具箱的【组件模板分类中】可以找到。
瀑布图.zip (428.24 KB, 下载次数: 291)

2024-1-30 09:35 上传

点击文件名下载附件

方式2:
在仪表板设计器中添加【柱状图(ECharts)】，然后将以上代码粘贴到【自定义属性】中，(总计数值是代码计算的，名称可以在代码自定义修改)

代码更新记录 V2

1. var positiveColor = "green";
   
2. var negative = "red";
   
3. var totalColor = "blue";
   
4. 
   
5. var data = option.series[0].data.map(item=>(item.value));
   
6. var help = [];
   
7. var positive = [];
   
8. var negative = [];
   
9. let total;
   
10. for (var i = 0, sum = 0; i < data.length; ++i) {
    
11.   if (data[i] >= 0) {
    
12.     positive.push(data[i]);
    
13.     negative.push('-');
    
14.   } else {
    
15.     positive.push('-');
    
16.     negative.push(-data[i]);
    
17.   }
    
18. 
    
19.   if (i === 0) {
    
20.     help.push(0);
    
21.   } else {
    
22.     sum += data[i - 1];
    
23.     if (data[i] < 0) {
    
24.       help.push(sum + data[i]);
    
25.     } else {
    
26.       help.push(sum);
    
27.     }
    
28.   }
    
29.   total = sum;
    
30. }
    
31. 
    
32. 
    
33. let len = data.length;
    
34. let total_array = new Array(len);
    
35. total_array.fill(0);
    
36. total_array.push(total);
    
37. 
    
38. let series_zero = option.series[0];
    
39. let series_first = {};
    
40. let series_second = {};
    
41. let series_total = {};
    
42. Object.assign(series_first,series_zero);
    
43. Object.assign(series_second,series_zero);
    
44. Object.assign(series_total,series_zero);
    
45. series_zero.data = help;
    
46. series_first.data = positive;
    
47. series_second.data = negative;
    
48. series_total.data = total_array;
    
49. console.log(`total:${total_array}`);
    
50. option.xAxis.data.push({
    
51. value:"总计"});
    
52. series_zero.itemStyle = {
    
53.         normal: {
    
54.           barBorderColor: 'rgba(0,0,0,0)',
    
55.           color: 'rgba(0,0,0,0)'
    
56.         },
    
57.         emphasis: {
    
58.           barBorderColor: 'rgba(1,0,0,0)',
    
59.           color: 'rgba(0,0,0,0)'
    
60.         }
    
61.       };
    
62.       
    
63. series_first.itemStyle = {
    
64.         color: 'green'
    
65.       }
    
66. series_second.itemStyle = {
    
67.         color: 'red'
    
68.       }
    
69. series_total.itemStyle = {
    
70.         color: 'blue'
    
71.       }
    
72. series_zero.stack = 'all';
    
73. series_first.stack = 'all';
    
74. series_second.stack = 'all';
    
75. series_total.stack = 'all';
    
76. 
    
77. series_first.name = '上升';
    
78. series_second.name = '下降';
    
79. series_total.name = '总计';
    
80. option.legend.show = true;
    
81. option.legend.data = ["上升","下降","总计"]
    
82. option.series = [series_zero,series_first,series_second,series_total];
    
83. option.tooltip = {
    
84.         show: true
    
85. }
    
86. 
    
87. return option
    
88. 
    
89. 
    
90. 
    
91. 
    

复制代码

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

2024-6-24 12:04 上传

点击文件名下载附件
Wyn 版本 7.0.01237.0