资讯专栏INFORMATION COLUMN

小程序中echarts+canvas 合成图片保存下载

neu / 2316人阅读

摘要:再网上参考了一篇文章小程序实现页面转化图片并保存到相册根据这篇文章的内容,修改源码,针对安卓机型写了兼容的配置,如果你的页面只有一个图表,就完全可以成功转换了,如果是多个请修改的源码,方法选择就可以了。

最近做的小程序项目在echarts合成图片的时候遇到了一些问题,综合了很多网友的经验,在此分享一下我的经历,如有错误,欢迎指正。

1.在小程序中引入echarts组件请参考 echarts-for-weixin
我的页面有多个图表,所以稍微改造了一下

index.wxml页面

</>复制代码

index.js 页面

</>复制代码

  1. var Chart1 = null;
  2. var Chart2 = null;
  3. Page({
  4. data: {
  5. ec1: {
  6. onInit: function (canvas, width, height) {
  7. Chart1 = echarts.init(canvas, null, {
  8. width: width,
  9. height: height
  10. });
  11. canvas.setChart(Chart1);
  12. return Chart1;
  13. }
  14. },
  15. ec2: {
  16. onInit: function (canvas, width, height) {
  17. Chart1 = echarts.init(canvas, null, {
  18. width: width,
  19. height: height
  20. });
  21. canvas.setChart(Chart1);
  22. return Chart1;
  23. }
  24. },
  25. },
  26. onLoad(){
  27. setTimeout(this.getData, 1000);
  28. },
  29. getData() {
  30. wx.showLoading({
  31. title: "加载中...",
  32. })
  33. Chart1.setOption({
  34. title: {
  35. text: "某站点用户访问来源",
  36. subtext: "纯属虚构",
  37. x: "center"
  38. },
  39. tooltip: {
  40. trigger: "item",
  41. formatter: "{a}
    {b} : {c} ({d}%)"
  42. },
  43. legend: {
  44. orient: "vertical",
  45. x: "left",
  46. data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
  47. },
  48. toolbox: {
  49. show: true,
  50. feature: {
  51. mark: {show: true},
  52. dataView: {show: true, readOnly: false},
  53. magicType: {
  54. show: true,
  55. type: ["pie", "funnel"],
  56. option: {
  57. funnel: {
  58. x: "25%",
  59. width: "50%",
  60. funnelAlign: "left",
  61. max: 1548
  62. }
  63. }
  64. },
  65. restore: {show: true},
  66. saveAsImage: {show: true}
  67. }
  68. },
  69. calculable: true,
  70. series: [
  71. {
  72. name: "访问来源",
  73. type: "pie",
  74. radius: "55%",
  75. center: ["50%", "60%"],
  76. data: [
  77. {value: 335, name: "直接访问"},
  78. {value: 310, name: "邮件营销"},
  79. {value: 234, name: "联盟广告"},
  80. {value: 135, name: "视频广告"},
  81. {value: 1548, name: "搜索引擎"}
  82. ]
  83. }
  84. ]
  85. });
  86. Chart2.setOption({
  87. title: {
  88. text: "某站点用户访问来源",
  89. subtext: "纯属虚构",
  90. x: "center"
  91. },
  92. tooltip: {
  93. trigger: "item",
  94. formatter: "{a}
    {b} : {c} ({d}%)"
  95. },
  96. legend: {
  97. orient: "vertical",
  98. x: "left",
  99. data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
  100. },
  101. toolbox: {
  102. show: true,
  103. feature: {
  104. mark: {show: true},
  105. dataView: {show: true, readOnly: false},
  106. magicType: {
  107. show: true,
  108. type: ["pie", "funnel"],
  109. option: {
  110. funnel: {
  111. x: "25%",
  112. width: "50%",
  113. funnelAlign: "left",
  114. max: 1548
  115. }
  116. }
  117. },
  118. restore: {show: true},
  119. saveAsImage: {show: true}
  120. }
  121. },
  122. calculable: true,
  123. series: [
  124. {
  125. name: "访问来源",
  126. type: "pie",
  127. radius: "55%",
  128. center: ["50%", "60%"],
  129. data: [
  130. {value: 335, name: "直接访问"},
  131. {value: 310, name: "邮件营销"},
  132. {value: 234, name: "联盟广告"},
  133. {value: 135, name: "视频广告"},
  134. {value: 1548, name: "搜索引擎"}
  135. ]
  136. }
  137. ]
  138. });
  139. wx.hideLoading();
  140. }
  141. })

2.把echarts图表转化成图片
小程序提供了一个 wx.canvasToTempFilePath 的接口,可以直接把canvas绘制成png的图片,现在问题就来了,苹果上绘制没问题,安卓手机大概率绘制失败,尤其是多个图表。再网上参考了一篇文章 小程序echarts+canvasdrawer实现页面转化图片并保存到相册

根据这篇文章的内容,修改//ec-canvas.js源码,针对安卓机型写了兼容的配置,如果你的页面只有一个echarts图表,就完全可以成功转换了,如果是多个echarts,请修改ec-canvas.js 的源码,draw方法选择false就可以了。

希望遇到坑的伙伴可以绕坑而行。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105762.html

相关文章

  • 程序echarts+canvasdrawer实现页面转化图片保存到相册

    摘要:小程序实现页面转化图片并保存到相册场景小程序测试活动,实现雷达图展示不同的结果微信头像二维码测试结果文字,最终绘制出一张图片用户保存相册。圆形头像建议切镂空图覆盖,,有很难实现效果建议查看微信小程序社区的帖子。 小程序echarts+canvasdrawer实现页面转化图片并保存到相册 场景:小程序测试活动,实现echarts雷达图展示不同的结果、微信头像、二维码、测试结果文字,最终绘...

    Doyle 评论0 收藏0
  • 微信程序 海报生成踩坑记

    摘要:最近有个需求是要生成分享海报,让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求,可是万万没想到,微信会这么坑。 最近有个需求是要生成分享海报,让用户可以将图片保存到本地然后分享到朋友圈。本来以为是一个很简单的需求,可是万万没想到,微信会这么坑。刚开始的思路是这样的: 后台根据小程序传过来的参数获取对应的小程序码,然后与背景图合成之后将base64格式的图片传给小程...

    lidashuang 评论0 收藏0

发表评论

0条评论

neu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<