feat: save canvas to temp file path

#73

Author: Ovilia

app.json

@@ -22,7 +22,8 @@
     "pages/themeRiver/index",
     "pages/lazyLoad/index",
     "pages/multiCharts/index",
-    "pages/move/index"
+    "pages/move/index",
+    "pages/saveCanvas/index"
   ],
   "window":{
     "backgroundTextStyle":"light",

ec-canvas/ec-canvas.js

@@ -1,6 +1,8 @@
 import WxCanvas from './wx-canvas';
 import * as echarts from './echarts';
 
+let ctx;
+
 Component({
   properties: {
     canvasId: {
@@ -41,9 +43,9 @@ Component({
         return;
       }
 
-      const ctx = wx.createCanvasContext(this.data.canvasId, this);
+      ctx = wx.createCanvasContext(this.data.canvasId, this);
 
-      const canvas = new WxCanvas(ctx);
+      const canvas = new WxCanvas(ctx, this.data.canvasId);
 
       echarts.setCanvasCreator(() => {
         return canvas;
@@ -60,6 +62,16 @@ Component({
       }).exec();
     },
 
+    canvasToTempFilePath(opt) {
+      if (!opt.canvasId) {
+        opt.canvasId = this.data.canvasId;
+      }
+      
+      ctx.draw(true, () => {
+        wx.canvasToTempFilePath(opt, this);
+      });
+    },
+
     touchStart(e) {
       if (!this.data.ec.disableTouch && this.chart && e.touches.length > 0) {
         var touch = e.touches[0];

ec-canvas/wx-canvas.js

@@ -1,7 +1,7 @@
 export default class WxCanvas {
-  constructor(ctx, domId, opts) {
+  constructor(ctx, canvasId) {
     this.ctx = ctx;
-    this.opts = opts || {};
+    this.canvasId = canvasId;
     this.chart = null;
 
     // this._initCanvas(zrender, ctx);
@@ -15,6 +15,14 @@ export default class WxCanvas {
     }
   }
 
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
   setChart(chart) {
     this.chart = chart;
   }

pages/index/index.js

@@ -74,6 +74,9 @@ Page({
     }, {
       id: 'move',
       name: '页面不阻塞滚动'
+    }, {
+      id: 'saveCanvas',
+      name: '保存 Canvas 到本地文件'
     }]
   },
 

pages/saveCanvas/index.js

@@ -0,0 +1,144 @@
+import * as echarts from '../../ec-canvas/echarts';
+
+let chart = null;
+
+function initChart(canvas, width, height) {
+  chart = echarts.init(canvas, null, {
+    width: width,
+    height: height
+  });
+  canvas.setChart(chart);
+
+  var option = {
+    color: ['#37a2da', '#32c5e9', '#67e0e3'],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+      }
+    },
+    legend: {
+      data: ['热度', '正面', '负面']
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: 15,
+      top: 40,
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'value',
+        axisLine: {
+          lineStyle: {
+            color: '#999'
+          }
+        },
+        axisLabel: {
+          color: '#666'
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        axisTick: { show: false },
+        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
+        axisLine: {
+          lineStyle: {
+            color: '#999'
+          }
+        },
+        axisLabel: {
+          color: '#666'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '热度',
+        type: 'bar',
+        label: {
+          normal: {
+            show: true,
+            position: 'inside'
+          }
+        },
+        data: [300, 270, 340, 344, 300, 320, 310],
+        itemStyle: {
+          // emphasis: {
+          //   color: '#37a2da'
+          // }
+        }
+      },
+      {
+        name: '正面',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true
+          }
+        },
+        data: [120, 102, 141, 174, 190, 250, 220],
+        itemStyle: {
+          // emphasis: {
+          //   color: '#32c5e9'
+          // }
+        }
+      },
+      {
+        name: '负面',
+        type: 'bar',
+        stack: '总量',
+        label: {
+          normal: {
+            show: true,
+            position: 'left'
+          }
+        },
+        data: [-20, -32, -21, -34, -90, -130, -110],
+        itemStyle: {
+          // emphasis: {
+          //   color: '#67e0e3'
+          // }
+        }
+      }
+    ]
+  };
+
+  chart.setOption(option);
+  return chart;
+}
+
+Page({
+  onShareAppMessage: function (res) {
+    return {
+      title: 'ECharts 可以在微信小程序中使用啦！',
+      path: '/pages/index/index',
+      success: function () { },
+      fail: function () { }
+    }
+  },
+  data: {
+    ec: {
+      onInit: initChart
+    }
+  },
+
+  onReady() {
+    setTimeout(() => {
+      this.save();
+    });
+  },
+
+  save() {
+    // 保存图片到临时的本地文件
+    const ecComponent = this.selectComponent('#mychart-dom-save');
+    ecComponent.canvasToTempFilePath({
+      success: res => console.log(res.tempFilePath),
+      fail: res => console.log(res)
+    });
+  }
+});

pages/saveCanvas/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
+}

pages/saveCanvas/index.wxml

@@ -0,0 +1,4 @@
+<!--index.wxml-->
+<view class="container">
+  <ec-canvas id="mychart-dom-save" canvas-id="mychart-save" ec="{{ ec }}"></ec-canvas>
+</view>

pages/saveCanvas/index.wxss

@@ -0,0 +1,5 @@
+/**index.wxss**/
+ec-canvas {
+  width: 100%;
+  height: 100%;
+}