【踩坑日记】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
})}