反饋已提交
網絡繁忙
本文將使用 ECharts 圖表引用範本資料集製作一個旭日圖:
第一層為地區、第二層為銷售員、第三層節點名為産品型別,值為銷量。
最外層值大於 1000 時顯示為紅色。
最外層標簽居外顯示、其他標簽居內顯示。
預期效果如下圖所示。
點選下載插件:ECharts圖表整合。
伺服器安裝插件方法請參見:A11-18 伺服器-插件管理。
點選設計器左上角【檔案】→【建立普通報表】,建立資料庫查詢 ds1,SQL 查詢語句為:【SELECT * FROM 銷量 】。
插入圖表:選中一片儲存格區域,合併儲存格後,再點選插入圖表,選擇【ECharts圖表】。如下圖1所示。
新增資料結構:
選中圖表,點選右側【儲存格元素】→【配置】,新增一個【樹形結構】。
資料集選擇 ds1,新增三個節點,第一層為【地區】,第二層為【銷售員】,第三層為【産品型别】。前兩層不設定數值,第三層設定數值為【銷量】彙總方式為【求和】,那麼前兩層的值由第三層級的值彙總得來。如下圖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節中預期效果所示。
注:不支援行動端。
點選下載範本:ECharts圖表實現旭日圖.cpt。
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉