SVG文件动态绘制echarts图表

最近接到一个需求，WEB加载SVG时动态绘制echartsl图表。

上网查了许多案列，都没有现成的思路。

SVG是失量图，在上面绘制图表，如果一个点一个点的绘制，需要画很多时间，还达不到echarts的效果。费力不说还很LOW。肯定不会这样干的。

于是换个思路，当画定区域后，我在相应区域贴一个DIV，这样DIV上什么都能画。负责人和我觉得这个思路可以，

开始干

干的过程中根据矩形区域，贴DIV，一次加载SVG贴缝还不错。当放大，缩小SVG时，DIV区域越偏越远。离（0，0）越远的位置，偏离越远。试了很多方法都贴不好。

这样怎么行，换别的方法吧。

在SVG 中<g>节点插入<svg>子节点，把echarts的图按SVG方式渲染，保存为SVG，加入大图。这种方式静态的试了一次效果还不错。缩放没有问题。但是我们还需要在区域中展示视频。用这种方式肯定不行。

后来继续上网查SVG的属性，功能不负有心人，

 SVG有个foreignObject节点，在这个节点中插入DIV

DIV上想绘制什么绘制什么。

不好的地方就是，之前已经封装好的VUE组件不能用，得一个一个拼字段