Echarts 怎么等比例放大画布

2023-02-07 21:59:36 +08:00
 qsnow6
我用 Echarts 画了一个 500x500 的 canvas,希望能导出为一张 2000x2000 像素的图片。
为了达到这个目标,我把 canvas 的尺寸改成了 2000x2000 ,但是画布上的字就变得非常小了。
怎么在放大的时候让 Echarts 自动适配画布,等比例放大页面上的元素?


原 canvas



修改后(字变得很小)

819 次点击
所在节点    问与答
7 条回复
christin
2023-02-07 22:05:47 +08:00
在最外层指定字号大小
kaifeiji
2023-02-07 22:06:08 +08:00
toolbox.feature.saveAsImage.pixelRatio
liyang5945
2023-02-07 22:09:21 +08:00
渲染方式使用 svg (放大不会糊),外面的容器 css 添加 transform: scale(4);
示例代码:
this.lineChart = echarts.init(this.$refs.phoneChart, null, {
renderer: 'svg'
})
liyang5945
2023-02-07 22:23:19 +08:00
刚试了一下这种方式也可以,画出来后直接在 canvas 右键另存图片就行
this.lineChart = echarts.init(this.$refs.phoneChart, null, {
renderer: 'canvas',
devicePixelRatio:4
})
qsnow6
2023-02-07 22:25:49 +08:00
@liyang5945 #3 非常感谢,改成 svg 后解决了。🙌
qsnow6
2023-02-07 22:28:49 +08:00
@liyang5945 #4 修改 devicePixelRatio 参数更简单,牛逼
mynameislihua
2023-02-08 10:23:38 +08:00
学到了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/914078

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX