echarts 占用内存过高，如何解决？

[suifengfengye]

问题描述：在公司的 app 端，入口处用一个 UIWebview，webview 里面就是各个业务线的展示内容。我负责的业务线是 echarts+数据，绘制图表。近一个月，app （主要是 iphone6、iphone6s ）闪退比较严重，经过性能分析，发现是我们业务线的内容，只要启用，内存暴增 30-40M。（流泪~~~） 经过分析，是 echarts 本身引入之后，就会导致 20+M 的内存增长。再加上一些业务代码，30M 轻轻松松就上去了。

所以，在这里问问，大家有没有遇到过类似的问题，有什么解决方案？

目前考虑到的方案是： 1、替换 echarts，不过业务上为配合数据+echarts，有一些转换代码，成本较高；再者要考虑的是，什么图表框架是轻量、不占用太多内存的。

2、在服务端用数据+图表框架生成图片，然后前端直接调用图片显示即可（不过没有落地的方案）。 这个方案具体的问题：（ 1 ）、什么图表框架是支持服务端生成图片的？（ 2 ）、即使可行，每天几百万的 PV，这个服务端能不能扛得住？

[Torpedo]

你们是不是用了 echarts 里的 webgl 绘制 3d ？
换成 wkwebview 会好一些。
或者不用 3d
退后台的时候停止绘制

[suifengfengye]

@Torpedo 没有使用 3D

const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar')

测试时用 echarts 的核心库+bar 图，用的官网的 demo，内存就增上去了。

[learnshare]

ECharts 太大，不适合移动端
基本的 bar 图自己写一个就好了，第三方库都不需要

[suifengfengye]

@learnshare 我测试的时候只用了 bar 图。实际上业务的图表很多~~~

[learnshare]

@suifengfengye 移动端尽量只做基本的展示吧，图表交互什么的都是多余，也比较难操作
有精力投入的话，可以拿 D3 写几个

[Torpedo]

@suifengfengye 那就不清楚了。上述我说的如果没有 3d 的话，就剩下 wkwebview 可能有效了

[suifengfengye]

这里统一回复下。
最终结果选择了方案 2，并且找到了落地方案。服务端使用 node 工程，结合 github 项目｀ node-echarts ｀进行图片渲染（根据这个项目的代码，并根据自己的业务需求做了一定的修改）。每次前端请求过来，服务端对数据进行处理，使用 node-echarts 生成 charts 图表实例（定义为 chart ），使用 chart.getDataURL 拿到 base64 编码，返回给前端展现；同时将 chart 生成图片上传到图片服务器保存起来（同一个的图表再次请求生成图片时，就返回一个 url 地址即可，避免重复生成图表，造成服务端压力过大）。

遇到的坑
1、node-echarts 项目依赖于 node-prebuilt 项目，在 linux 服务器上，如果没有安装中文字体，echarts 图表转成图片自后就会出现中文乱码。怎么解决？最简单的就是，在 linux 服务器上安装中文字体。这里是安装字体的链接： http://blog.csdn.net/wlwlwlwl015/article/details/51482065
（因为 node-prebuilt 暂时没有提供注册字体的功能，只能这样处理，如果后续版本支持，就调用 node-prebuilt 的注册字体功能即可）

2、node-echarts 生成的图片，在移动端显示很模糊。
这里，做前端的同学自然会想到 2x 图。所以这里就是将画布以及 echarts 的字体、间距等等都调为原来的 2 倍，这样渲染出来的图片在移动端显示出来就非常清晰。（注意 chart.getDataURL 这个方法的参数 piexlRatio,将其调为 2 并没有什么卵用）。