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