ECharts圖表實現旭日圖

1.1 版本

1.2 應用場景

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

• 第一層為地區、第二層為銷售員、第三層節點名為產品類型，值為銷量。

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

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

預期效果如下圖所示：

2.1 準備資料

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

2.2 設計報表

2.2.1 插入圖表

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

2.2.2 新增資料結構

選中圖表，點選右側「儲存格元素>配置」，新增一個「樹形結構」。

資料集選擇 ds1，新增三個節點，第一層為「地區」，第二層為「銷售員」，第三層為「產品類型」。前兩層不設定數值，第三層設定數值為「銷量」匯總方式為「求和」，那麼前兩層的值由第三層級的值匯總得來。如下圖所示：

2.2.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,
        }
      }
    ]
  }
};
显示代码

效果如下圖所示：

2.3 效果預覽

儲存報表，點選「分頁預覽」，效果如 1.2 節中預期效果所示。

注：不支援行動端。

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