ECharts圖表實現旭日圖

1

版本。

2

應用場景。

1. 本文將使用 ECharts 圖表引用範本資料集製作一個旭日圖：

       第一層為【地區】、第二層為【銷售員】、第三層節點名為【産品型別】，值為【銷量】。

       最外層值大於 1000 時顯示為【紅色】。

       最外層標簽居外顯示、其他標簽居內顯示。

2. 預期效果如下圖所示。

3

安裝插件。

1. 點選下載插件：ECharts圖表集成。

2. 伺服器安裝插件方法請參見：伺服器插件管理。

3. 設計器安裝插件方法請參見：設計器插件管理。

1

準備資料。

1. 點選設計器左上角【檔案】→【建立普通報表】，建立資料庫查詢 ds1，SQL 查詢語句為：【SELECT * FROM 銷量 】。

2

報表設計。

1. 插入圖表：選中一片儲存格區域，合併儲存格後，再點選【插入圖表】，選擇【ECharts圖表】。如下圖1所示。

2. 新增資料結構：

   選中圖表，點選右側【儲存格元素】→【設定】，新增一個【樹形結構】。

3. 資料集選擇 ds1，新增三個節點，第一層為【地區】，第二層為【銷售員】，第三層為【産品型别】。前兩層不設定數值，第三層設定數值為【銷量】彙總方式為【求和】，那麼前兩層的值由第三層級的值彙總得來。如下圖2所示。

4. 編輯代碼：點選【代碼編輯器】，輸入代碼；效果如下圖3所示。

   var TABLE_DATA = getData("data1");
function setCustomStyle(datas) {
  datas.forEach(function (item) {
    // 可以在這裏做一些個性化樣式配置（即條件顯示）
    // 比如最外層值大於1000時顔色爲紅色
    if (item.value > 1000 && !item.children) {
      item.itemStyle = {
        color: "red",
      }
    }
    
    if (item.children) {
      setCustomStyle(item.children);
    }
  })
}
setCustomStyle(TABLE_DATA);

option = {
  series: {
    type: 'sunburst',
    data: TABLE_DATA,
    radius: [30, '80%'],
    itemStyle: {
      borderRadius: 7,
      borderWidth: 2
    },
    label: {
      show: true
    },
    levels: [
      {},
      {},
      {},
      // 最外層標簽居外
      {
        label: {
          position: 'outside',
          padding: 3,
        }
      }
    ]
  }
};
   

3

效果預覽。

1. 儲存報表，點選【分頁預覽】，效果如 第一章第2節中預期效果所示。

注：不支援行動端。

1. 點選下載範本：ECharts圖表實現旭日圖.cpt。