ECharts图表实现堆积瀑布图

1.1 版本

1.2 应用场景

本文将使用 ECharts 图表引用模板数据集制作一个堆积瀑布图：

第一节点显示年初，中间显示每月变化，最终节点显示合计值。效果如下图所示：

2.1 新建模板

1）新建普通报表。

2）准备数据：本示例使用测试数据，仅展示数据结构，具体可以自己实现。

3）插入图表：选中A1单元格，调整宽高。点击插入图表，选择「ECharts图表」。

2.2 编辑代码

选中图表，点击「单元格元素>配置>代码编辑器」，输入代码。

代码如下所示：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    data: ['确定性投资', '潜在性投资','调整']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    splitLine: {
            show: false
        },
  },
  xAxis: {
    type: 'category',
    data: ['年度', '1', '2', '3', '4', '5', '6','7','8','9','10','11','12','合计'],
    splitLine: {
            show: false
        },
// 坐标轴刻度
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: '占位',
      //图表类型为柱形
      type: 'bar',
      // 堆积为total
      stack: 'total',
      itemStyle: {
                normal: {
                // 透明设置
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                }
            },
      label: {
        show: false
      },
      emphasis: {
        focus: 'series',
        itemStyle:{
            barBorderColor:"rgba(0,0,0,0)",
        }
      },
      data: [0,29585,29585,29585,31234,32141,33181,34002,34002,34002,34002,34002,34002,0]
    },
    {
      name: '确定性投资',
      type: 'bar',
       // 堆积为total
      stack: 'total',
      itemStyle: {
                normal: {
                    barBorderColor: '#0075be',
                    color: '#0075be'
                },
                emphasis: {
                    barBorderColor: '#0075be',
                    color: '#0075be'
                }
            },
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [9983,,,,,,,,,,,,,16467]
    },
    {
      name: '潜在性投资',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      itemStyle: {
                normal: {
                    barBorderColor: '#71af3a',
                    color: '#71af3a'
                },
                emphasis: {
                    barBorderColor: '#71af3a',
                    color: '#71af3a'
                }
            },
      emphasis: {
        focus: 'series'
      },
      data: [19602,,,,,,,,,,,,,16066]
    },
    {
      name: '调整',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'top'
      },
      itemStyle: {
                normal: {
                    barBorderColor: '#87cfe6',
                    color: '#87cfe6'
                },
                emphasis: {
                    barBorderColor: '#87cfe6',
                    color: '#87cfe6'
                }
            },
      emphasis: {
        focus: 'series'
      },
      data: [,,,1649,907,1040,821,,,,,,,]
    }
  ]
};

2.3 效果预览

运行效果如下图所示：

点击下载模板：Echarts实现堆积瀑布图.cpt