在SpreadJS中集成Ecahrts中，怎样画一个treeMap 矩形树图的Echart 图？

请问：在SpreadJS中集成Ecahrts 中，怎么能够画一个treeMap 矩形树图的Echart 图？
这是treeMap 矩形树图的例子：



地址链接：https://echarts.apache.org/examp ... show-parent&lang=ts

spreedjs集成Echart demo 代码：

请参考附件demo



--------------------------
总结：
该问题可以参考上面的demo
如果发生切换sheet导致echart图片空白的问题，需要监听对应的sheet切换事件，在事件中重新生成图表

1. 
   
2. spread.bind(GC.Spread.Sheets.Events.SheetTabClick, function (e, info) {
   
3.                 setTimeout(() => {
   
4.                     initEchart();
   
5.                 }, 0);
   
6. });

复制代码

另外，对于客户的问题：
Q：我设置一个简单的DOM对象， 比如 "<div>1111</div>"，这个保存后，再刷新 或者 切换sheet还是存在的， 你们保存的逻辑是什么？


A：SpreadJS的浮动对象可以保存静态的HTML dom，但对于echart这种基于html dom基础上用JS渲染的组件无法做到序列化保存。所以需要在对应的事件监听中调用对应的代码进行图表的更新或重新生成。

您好，
您提供下完整链接，这边结合demo等调研下相应方案：

Lynn.Dou 发表于 2022-8-19 18:19
您好，
您提供下完整链接，这边结合demo等调研下相应方案：

https://echarts.apache.org/examples/zh/editor.html?c=treemap-show-parent&lang=ts

Lynn.Dou 发表于 2022-8-22 12:15
请参考附件demo

你好，使用这个demo, 切换sheet后，生成图表没了，看我发的gif

查看控制台， 切换后 canvas元素直接没了

问题已复现，已将此问题记录下来进一步调研原因，有进展贴中回复您。
本贴先做保留处理。

demo中请添加以下代码，通过事件监听重绘echart：

1. spread.bind(GC.Spread.Sheets.Events.SheetTabClick, function (e, info) {
   
2.                 setTimeout(() => {
   
3.                     initEchart();
   
4.                 }, 0);
   
5.             });

复制代码

Lynn.Dou 发表于 2022-9-20 10:28
demo中请添加以下代码，通过事件监听重绘echart：

重新绘制的话，按照我的理解，当我保存ssjson，这个echart不会保存到ssjson 对么？ 重新打开这个ssjson后，也要重新绘制？

是的，canvas中保存的只是数据模型，没有保存实际效果，所以在切换sheet或导入导出json后需要重新绘制。