From 17af058f589bc2245ca5fdf4feac62b14815e9e9 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Tue, 20 Mar 2018 18:51:23 +0800 Subject: [PATCH] feat: save canvas to temp file path #73 --- app.json | 3 +- ec-canvas/ec-canvas.js | 16 +++- ec-canvas/wx-canvas.js | 12 ++- pages/index/index.js | 3 + pages/saveCanvas/index.js | 144 ++++++++++++++++++++++++++++++++++++ pages/saveCanvas/index.json | 5 ++ pages/saveCanvas/index.wxml | 4 + pages/saveCanvas/index.wxss | 5 ++ 8 files changed, 187 insertions(+), 5 deletions(-) create mode 100644 pages/saveCanvas/index.js create mode 100644 pages/saveCanvas/index.json create mode 100644 pages/saveCanvas/index.wxml create mode 100644 pages/saveCanvas/index.wxss diff --git a/app.json b/app.json index 36b7419..8d2c885 100644 --- a/app.json +++ b/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", diff --git a/ec-canvas/ec-canvas.js b/ec-canvas/ec-canvas.js index 97d8a5a..44086f0 100644 --- a/ec-canvas/ec-canvas.js +++ b/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]; diff --git a/ec-canvas/wx-canvas.js b/ec-canvas/wx-canvas.js index 7d5364c..e2067f3 100644 --- a/ec-canvas/wx-canvas.js +++ b/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; } diff --git a/pages/index/index.js b/pages/index/index.js index 916b9f1..14c45a6 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -74,6 +74,9 @@ Page({ }, { id: 'move', name: '页面不阻塞滚动' + }, { + id: 'saveCanvas', + name: '保存 Canvas 到本地文件' }] }, diff --git a/pages/saveCanvas/index.js b/pages/saveCanvas/index.js new file mode 100644 index 0000000..594e8d4 --- /dev/null +++ b/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) + }); + } +}); diff --git a/pages/saveCanvas/index.json b/pages/saveCanvas/index.json new file mode 100644 index 0000000..070043f --- /dev/null +++ b/pages/saveCanvas/index.json @@ -0,0 +1,5 @@ +{ + "usingComponents": { + "ec-canvas": "../../ec-canvas/ec-canvas" + } +} diff --git a/pages/saveCanvas/index.wxml b/pages/saveCanvas/index.wxml new file mode 100644 index 0000000..15cce31 --- /dev/null +++ b/pages/saveCanvas/index.wxml @@ -0,0 +1,4 @@ + + + + diff --git a/pages/saveCanvas/index.wxss b/pages/saveCanvas/index.wxss new file mode 100644 index 0000000..e95d9e1 --- /dev/null +++ b/pages/saveCanvas/index.wxss @@ -0,0 +1,5 @@ +/**index.wxss**/ +ec-canvas { + width: 100%; + height: 100%; +}