反饋已提交

網絡繁忙

ECharts圖表實現堆積瀑布圖

1. 概述

1.1 版本

報表伺服器版本插件版本
11.01.0.5

1.2 應用場景

本文將使用 ECharts 圖表引用範本資料集製作一個堆積瀑布圖:

第一節點顯示年度,中間顯示每月變化,最終節點顯示合計值。效果如下圖所示:

2. 範例

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 效果預覽

運作效果如下圖所示:

3. 範本下載

點選下載範本:Echarts实现堆积瀑布图.cpt


附件列表


主題: 圖表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙