Open limeigh opened 5 years ago
hello everybody! 如何将这个转换成mpvue的组件形式呢(不用mpvue-echarts) 自己尝试转了但是不行
报错如下:
组件代码如下:
<template> <canvas class="ec-canvas" :canvas-id="canvasId" @init="init" @touchstart="ec.disableTouch ? '' : 'touchStart'" @touchmove="ec.disableTouch ? '' : 'touchMove'" @touchend="ec.disableTouch ? '' : 'touchEnd'"></canvas> </template> <script> import WxCanvas from '@/utils/wx-canvas' import * as echarts from 'echarts/dist/echarts.simple.min' import wx from 'wx' let ctx export default { data () { return { } }, props: { canvasId: { type: String, default: 'ec-canvas' }, ec: { type: Object } }, created () { if (!this.data.ec) { console.warn('组件需绑定 ec 变量,例:<ec-canvas id="mychart-dom-bar" ' + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'); return; } if (!this.data.ec.lazyLoad) { this.init(); } }, methods: { init (callback) { const version = wx.version.version.split('.').map(n => parseInt(n, 10)); const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9) || (version[0] === 1 && version[1] === 9 && version[2] >= 91); if (!isValid) { console.error('微信基础库版本过低,需大于等于 1.9.91.' + '参见:https://github.com/ecomfe/echarts-for-weixin' + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82'); return; } ctx = wx.createCanvasContext(this.data.canvasId, this); const canvas = new WxCanvas(ctx, this.data.canvasId); echarts.setCanvasCreator(() => { return canvas; }); var query = wx.createSelectorQuery().in(this); query.select('.ec-canvas').boundingClientRect(res => { if (typeof callback === 'function') { this.chart = callback(canvas, res.width, res.height); } else if (this.data.ec && typeof this.data.ec.onInit === 'function') { this.chart = this.data.ec.onInit(canvas, res.width, res.height); } else { this.triggerEvent('init', { canvas: canvas, width: res.width, height: res.height }); } }).exec(); }, canvasToTempFilePath (opt) { if (!opt.canvasId) { opt.canvasId = this.data.canvasId; } ctx.draw(true, () => { wx.canvasToTempFilePath(opt, this); }); }, touchStart (e) { if (this.chart && e.touches.length > 0) { var touch = e.touches[0]; this.chart._zr.handler.dispatch('mousedown', { zrX: touch.x, zrY: touch.y }); this.chart._zr.handler.dispatch('mousemove', { zrX: touch.x, zrY: touch.y }); } }, touchMove (e) { if (this.chart && e.touches.length > 0) { var touch = e.touches[0]; this.chart._zr.handler.dispatch('mousemove', { zrX: touch.x, zrY: touch.y }); } }, touchEnd (e) { if (this.chart) { const touch = e.changedTouches ? e.changedTouches[0] : {}; this.chart._zr.handler.dispatch('mouseup', { zrX: touch.x, zrY: touch.y }); this.chart._zr.handler.dispatch('click', { zrX: touch.x, zrY: touch.y }); } } } } </script> <style scoped> .ec-canvas { width: 100%; height: 100%; } </style>
页面中使用如下:
thanks!
this.initChart 不要调用
this.initChart
ok thanks
this.initChart 不要调用 ok thanks
不调用如何初始化?
hello everybody! 如何将这个转换成mpvue的组件形式呢(不用mpvue-echarts) 自己尝试转了但是不行
报错如下:
组件代码如下:
页面中使用如下:
thanks!