【踩坑日記】echarts桑基圖超出畫布不顯示

問題描述

用echarts用得正嗨皮，某天，產品經理來了個句，來來來，給改下這個桑基圖，增加按值得大小排下序（此前賦相同默認值）。於是乎問題出現了，地兒只給這么大，圖片不聽話，頭頭給超出畫布，不見了，像下面這樣：

 

 

 

翻遍官方文檔與github issue，沒有解決方法，得，去提個issue吧，不知道pending到什么時候發版解決。

詳見github提的issue：https://github.com/apache/incubator-echarts/issues/13796

說說暫時規避方法

百度不到解決方法，看看文檔，翻翻源碼找找怎么入手。思路是：圖是可拖拽的，官方文檔中又給了我們dispatchAction方法，那找找源碼，手動dispatch一個拖拽方法

源碼的代碼：

 

 將參數都console出來看看是什么，再模仿寫一個action：

let dataIndex = 0
let seriesModel = this.sanChart.getModel().getSeriesByIndex(dataIndex) // 由於只有一個圖，所以序列index是0 let nodeData = seriesModel.getData() let shape = nodeData._graphicEls[dataIndex].shape // 我要拖動的節點是我數據的第一個，所以index也是0

// 造成超出畫布的原因就是計算坐標時，高度為負數，導致位置計算時y坐標為負

if (shape.height < 0) { 

// 此處最好以shape的高度來計算派發的action的y坐標。不可以畫布一般的高度來使節點移動到y的一半（會導致可能又超出畫布），具體等空閑研究下桑基圖坐標計算的過程再來細說

const halfd = shape.height * 0.7 
this.sanChart.dispatchAction({ 
 type: 'dragNode',
 seriesId: seriesModel.id,
 dataIndex: 0,
 localX: shape.x / shape.width,
 localY: halfd / shape.height
})}