V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  suifengfengye  ›  全部回复第 1 页 / 共 1 页
回复总数  3
2018-01-27 00:31:08 +08:00
回复了 suifengfengye 创建的主题 前端优化 echarts 占用内存过高,如何解决?
这里统一回复下。
最终结果选择了方案 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 并没有什么卵用)。
2018-01-11 14:23:22 +08:00
回复了 suifengfengye 创建的主题 前端优化 echarts 占用内存过高,如何解决?
@learnshare 我测试的时候只用了 bar 图。实际上业务的图表很多~~~
2018-01-11 13:33:50 +08:00
回复了 suifengfengye 创建的主题 前端优化 echarts 占用内存过高,如何解决?
@Torpedo 没有使用 3D

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

测试时用 echarts 的核心库+bar 图,用的官网的 demo,内存就增上去了。
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   936 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 10ms · UTC 22:10 · PVG 06:10 · LAX 14:10 · JFK 17:10
Developed with CodeLauncher
♥ Do have faith in what you're doing.