如何使用node-canvas在服务器端实现echarts图表的渲染解析？

本文共计514个文字，预计阅读时间需要3分钟。

目录+走过了漫长的困境，总算是能站起来了+友情提示：进村请谨慎+在这个过程中，还有可能报错，比较常见的有这些+我只说说我试过的有用的方法+走过了漫长的困境，总算是能站起来了

目录

• 踩了很长时间的坑，总算是能跑起来了
• 友情提示：入坑请慎重
• 在这个过程中，还有可能报错，比较常见的有这些
• 我只说说我试过有用的办法

踩了很长时间的坑，总算是能跑起来了

但是如果要我给echarts的SSR一个评价，那就是不好用……可能是我太菜了。而且，因为我是Windows用户，这个过程对Windows极其不友好。

友情提示：入坑请慎重

在服务端渲染图表，绕不开的一个问题就是，没有DOM怎么绘图？这个主要有两种解决方案，一个是用那些headless的浏览器去渲染，然后进行截图；另一个就是在Node环境下模拟DOM元素，比如我在这里想用canvas，就得装个node-canvas；如果想用SVG，就得用JSDOM一类的库。我这里主要是用的canvas，所以就用node-canvas了。

首先，需要安装node-canvas和echarts。echarts不用多说，但是有一点，不建议使用官方推荐的node-echarts，版本陈旧，而且依赖的库新版本的Node（12.x）不支持。