如何用node-canvas在服务器端实现echarts图表的长尾词渲染？

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

目录+误入长期困境，总结可行出路+友情提示：入坑请慎重+过程中可能报错，常见如这些+我说说试用过的有效方法+误入长期困境，大致是能跑起来的

目录

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

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

但是如果要我给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）不支持。

node-canvas安装请参考官方文档，因为安装流程比较复杂，尤其是Windows用户：github.com/Automattic/node-canvas/wiki/Installation:-Windows

当然，因为众所周知的原因，最后一步用npm install安装node-canvas是个问题，因为它预编译的安装包好像是在AWS上，大概率会卡在这里：

node-pre-gyp WARN Using request for node-pre-gyp github.com/Automattic/node-canvas/issues/1468#issuecomment-522961098

github.com/mapbox/node-pre-gyp/issues/477#issuecomment-534231739