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

收藏

请问：在SpreadJS中集成Ecahrts 中，怎么能够画一个treeMap 矩形树图的Echart 图？ image.png60635985.png

这是treeMap 矩形树图的例子：
image.png251034545.png

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

spreedjs集成Echart demo 代码：
image.png797667541.png

Lynn.Dou · Lynn.Dou

本帖最后由 Clark.Pan 于 2022-10-26 00:00 编辑

请参考附件demo

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

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

复制代码

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

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

Lynn.Dou · Lynn.Dou

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

Anne01 · Anne01

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

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

eyAndrew · eyAndrew

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

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

eyAndrew · eyAndrew

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

Lynn.Dou · Lynn.Dou

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

Lynn.Dou · Lynn.Dou

本帖最后由 Lynn.Dou 于 2022-9-20 10:29 编辑

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

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

复制代码

eyAndrew · eyAndrew

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

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

Lynn.Dou · Lynn.Dou

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

		自动登录	找回密码
密码			立即注册

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

11 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人