From d4859665d14b2fea5a10213c248183ffa46e3e57 Mon Sep 17 00:00:00 2001 From: xiaowen <372193233@qq.com> Date: Wed, 27 Jul 2022 18:43:18 +0800 Subject: [PATCH] cxw-010203 --- components/option/stackingLineOption.js | 2 +- ec-canvas/ec-canvas.js | 427 ++++++++++++------------ ec-canvas/wx-canvas.js | 3 - 3 files changed, 217 insertions(+), 215 deletions(-) diff --git a/components/option/stackingLineOption.js b/components/option/stackingLineOption.js index 860ca1b..14abca3 100644 --- a/components/option/stackingLineOption.js +++ b/components/option/stackingLineOption.js @@ -10,7 +10,7 @@ export default function brokenLines(dName = [], dValue = [], dColor = [], dx = [ color: "#fff", //设置文字颜色 }, extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;", - confine: true + confine: true, }, legend: { icon: 'rectangle', //data图标样式 diff --git a/ec-canvas/ec-canvas.js b/ec-canvas/ec-canvas.js index a308340..e81a215 100644 --- a/ec-canvas/ec-canvas.js +++ b/ec-canvas/ec-canvas.js @@ -4,262 +4,267 @@ import * as echarts from './echarts'; let ctx; function compareVersion(v1, v2) { - v1 = v1.split('.') - v2 = v2.split('.') - const len = Math.max(v1.length, v2.length) + v1 = v1.split('.') + v2 = v2.split('.') + const len = Math.max(v1.length, v2.length) - while (v1.length < len) { - v1.push('0') - } - while (v2.length < len) { - v2.push('0') - } + while (v1.length < len) { + v1.push('0') + } + while (v2.length < len) { + v2.push('0') + } - for (let i = 0; i < len; i++) { - const num1 = parseInt(v1[i]) - const num2 = parseInt(v2[i]) + for (let i = 0; i < len; i++) { + const num1 = parseInt(v1[i]) + const num2 = parseInt(v2[i]) - if (num1 > num2) { - return 1 - } else if (num1 < num2) { - return -1 + if (num1 > num2) { + return 1 + } else if (num1 < num2) { + return -1 + } } - } - return 0 + return 0 } Component({ - properties: { - canvasId: { - type: String, - value: 'ec-canvas' - }, + properties: { + canvasId: { + type: String, + value: 'ec-canvas' + }, + + ec: { + type: Object + }, - ec: { - type: Object + forceUseOldCanvas: { + type: Boolean, + value: false + } }, - forceUseOldCanvas: { - type: Boolean, - value: false - } - }, + data: { + isUseNewCanvas: false, + isEnd: false, + }, - data: { - isUseNewCanvas: false - }, + ready: function () { + // Disable prograssive because drawImage doesn't support DOM as parameter + // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html + echarts.registerPreprocessor(option => { + if (option && option.series) { + if (option.series.length > 0) { + option.series.forEach(series => { + series.progressive = 0; + }); + } else if (typeof option.series === 'object') { + option.series.progressive = 0; + } + } + }); - ready: function () { - // Disable prograssive because drawImage doesn't support DOM as parameter - // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html - echarts.registerPreprocessor(option => { - if (option && option.series) { - if (option.series.length > 0) { - option.series.forEach(series => { - series.progressive = 0; - }); - } - else if (typeof option.series === 'object') { - option.series.progressive = 0; + if (!this.data.ec) { + console.warn('组件需绑定 ec 变量，例：'); + return; } - } - }); - if (!this.data.ec) { - console.warn('组件需绑定 ec 变量，例：'); - return; - } - - if (!this.data.ec.lazyLoad) { - this.init(); - } - }, + if (!this.data.ec.lazyLoad) { + this.init(); + } +}, - methods: { +methods: { init: function (callback) { - const version = wx.getSystemInfoSync().SDKVersion - - const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0; - const forceUseOldCanvas = this.data.forceUseOldCanvas; - const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas; - this.setData({ isUseNewCanvas }); + const version = wx.getSystemInfoSync().SDKVersion + const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0; + const forceUseOldCanvas = this.data.forceUseOldCanvas; + const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas; + this.setData({ + isUseNewCanvas + }); - if (forceUseOldCanvas && canUseNewCanvas) { - console.warn('开发者强制使用旧canvas,建议关闭'); - } + if (forceUseOldCanvas && canUseNewCanvas) { + console.warn('开发者强制使用旧canvas,建议关闭'); + } - if (isUseNewCanvas) { - // console.log('微信基础库版本大于2.9.0，开始使用'); - // 2.9.0 可以使用 - this.initByNewWay(callback); - } else { - const isValid = compareVersion(version, '1.9.91') >= 0 - 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; + if (isUseNewCanvas) { + // console.log('微信基础库版本大于2.9.0，开始使用'); + // 2.9.0 可以使用 + this.initByNewWay(callback); } else { - console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能'); - this.initByOldWay(callback); + const isValid = compareVersion(version, '1.9.91') >= 0 + 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; + } else { + console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能'); + this.initByOldWay(callback); + } } - } }, initByOldWay(callback) { - // 1.9.91 <= version < 2.9.0：原来的方式初始化 - ctx = wx.createCanvasContext(this.data.canvasId, this); - const canvas = new WxCanvas(ctx, this.data.canvasId, false); + // 1.9.91 <= version < 2.9.0：原来的方式初始化 + ctx = wx.createCanvasContext(this.data.canvasId, this); + const canvas = new WxCanvas(ctx, this.data.canvasId, false); - echarts.setCanvasCreator(() => { - return canvas; - }); - // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr - const canvasDpr = 1 - var query = wx.createSelectorQuery().in(this); - query.select('.ec-canvas').boundingClientRect(res => { - if (typeof callback === 'function') { - this.chart = callback(canvas, res.width, res.height, canvasDpr); - } - else if (this.data.ec && typeof this.data.ec.onInit === 'function') { - this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr); - } - else { - this.triggerEvent('init', { - canvas: canvas, - width: res.width, - height: res.height, - canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init - }); - } - }).exec(); + echarts.setCanvasCreator(() => { + return canvas; + }); + // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr + const canvasDpr = 1 + var query = wx.createSelectorQuery().in(this); + query.select('.ec-canvas').boundingClientRect(res => { + if (typeof callback === 'function') { + this.chart = callback(canvas, res.width, res.height, canvasDpr); + } else if (this.data.ec && typeof this.data.ec.onInit === 'function') { + this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr); + } else { + this.triggerEvent('init', { + canvas: canvas, + width: res.width, + height: res.height, + canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init + }); + } + }).exec(); }, initByNewWay(callback) { - // version >= 2.9.0：使用新的方式初始化 - const query = wx.createSelectorQuery().in(this) - query - .select('.ec-canvas') - .fields({ node: true, size: true }) - .exec(res => { - const canvasNode = res[0].node - this.canvasNode = canvasNode + // version >= 2.9.0：使用新的方式初始化 + const query = wx.createSelectorQuery().in(this) + query + .select('.ec-canvas') + .fields({ + node: true, + size: true + }) + .exec(res => { + const canvasNode = res[0].node + this.canvasNode = canvasNode - const canvasDpr = wx.getSystemInfoSync().pixelRatio - const canvasWidth = res[0].width - const canvasHeight = res[0].height + const canvasDpr = wx.getSystemInfoSync().pixelRatio + const canvasWidth = res[0].width + const canvasHeight = res[0].height - const ctx = canvasNode.getContext('2d') + const ctx = canvasNode.getContext('2d') - const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode) - echarts.setCanvasCreator(() => { - return canvas - }) + const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode) + echarts.setCanvasCreator(() => { + return canvas + }) - if (typeof callback === 'function') { - this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr) - } else if (this.data.ec && typeof this.data.ec.onInit === 'function') { - this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr) - } else { - this.triggerEvent('init', { - canvas: canvas, - width: canvasWidth, - height: canvasHeight, - dpr: canvasDpr + if (typeof callback === 'function') { + this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr) + } else if (this.data.ec && typeof this.data.ec.onInit === 'function') { + this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr) + } else { + this.triggerEvent('init', { + canvas: canvas, + width: canvasWidth, + height: canvasHeight, + dpr: canvasDpr + }) + } }) - } - }) }, canvasToTempFilePath(opt) { - if (this.data.isUseNewCanvas) { - // 新版 - const query = wx.createSelectorQuery().in(this) - query - .select('.ec-canvas') - .fields({ node: true, size: true }) - .exec(res => { - const canvasNode = res[0].node - opt.canvas = canvasNode - wx.canvasToTempFilePath(opt) - }) - } else { - // 旧的 - if (!opt.canvasId) { - opt.canvasId = this.data.canvasId; + if (this.data.isUseNewCanvas) { + // 新版 + const query = wx.createSelectorQuery().in(this) + query + .select('.ec-canvas') + .fields({ + node: true, + size: true + }) + .exec(res => { + const canvasNode = res[0].node + opt.canvas = canvasNode + wx.canvasToTempFilePath(opt) + }) + } else { + // 旧的 + if (!opt.canvasId) { + opt.canvasId = this.data.canvasId; + } + ctx.draw(true, () => { + wx.canvasToTempFilePath(opt, this); + }); } - ctx.draw(true, () => { - wx.canvasToTempFilePath(opt, this); - }); - } }, touchStart(e) { - if (this.chart && e.touches.length > 0) { - var touch = e.touches[0]; - var handler = this.chart.getZr().handler; - handler.dispatch('mousedown', { - zrX: touch.x, - zrY: touch.y, - preventDefault: () => {}, - stopImmediatePropagation: () => {}, - stopPropagation: () => {} - }); - handler.dispatch('mousemove', { - zrX: touch.x, - zrY: touch.y, - preventDefault: () => {}, - stopImmediatePropagation: () => {}, - stopPropagation: () => {} - }); - handler.processGesture(wrapTouch(e), 'start'); - } + if (this.chart && e.touches.length > 0) { + var touch = e.touches[0]; + var handler = this.chart.getZr().handler; + handler.dispatch('mousedown', { + zrX: touch.x, + zrY: touch.y, + preventDefault: () => {}, + stopImmediatePropagation: () => {}, + stopPropagation: () => {} + }); + handler.dispatch('mousemove', { + zrX: touch.x, + zrY: touch.y, + preventDefault: () => {}, + stopImmediatePropagation: () => {}, + stopPropagation: () => {} + }); + handler.processGesture(wrapTouch(e), 'start'); + } }, touchMove(e) { - if (this.chart && e.touches.length > 0) { - var touch = e.touches[0]; - var handler = this.chart.getZr().handler; - handler.dispatch('mousemove', { - zrX: touch.x, - zrY: touch.y, - preventDefault: () => {}, - stopImmediatePropagation: () => {}, - stopPropagation: () => {} - }); - handler.processGesture(wrapTouch(e), 'change'); - } + if (this.chart && e.touches.length > 0) { + var touch = e.touches[0]; + var handler = this.chart.getZr().handler; + handler.dispatch('mousemove', { + zrX: touch.x, + zrY: touch.y, + preventDefault: () => {}, + stopImmediatePropagation: () => {}, + stopPropagation: () => {} + }); + handler.processGesture(wrapTouch(e), 'change'); + } }, touchEnd(e) { - if (this.chart) { - const touch = e.changedTouches ? e.changedTouches[0] : {}; - var handler = this.chart.getZr().handler; - handler.dispatch('mouseup', { - zrX: touch.x, - zrY: touch.y, - preventDefault: () => {}, - stopImmediatePropagation: () => {}, - stopPropagation: () => {} - }); - handler.dispatch('click', { - zrX: touch.x, - zrY: touch.y, - preventDefault: () => {}, - stopImmediatePropagation: () => {}, - stopPropagation: () => {} - }); - handler.processGesture(wrapTouch(e), 'end'); - } + if (this.chart) { + const touch = e.changedTouches ? e.changedTouches[0] : {}; + var handler = this.chart.getZr().handler; + handler.dispatch('mouseup', { + zrX: touch.x, + zrY: touch.y, + preventDefault: () => {}, + stopImmediatePropagation: () => {}, + stopPropagation: () => {} + }); + handler.dispatch('click', { + zrX: touch.x, + zrY: touch.y, + preventDefault: () => {}, + stopImmediatePropagation: () => {}, + stopPropagation: () => {} + }); + handler.processGesture(wrapTouch(e), 'end'); + } } - } +} }); function wrapTouch(event) { - for (let i = 0; i < event.touches.length; ++i) { - const touch = event.touches[i]; - touch.offsetX = touch.x; - touch.offsetY = touch.y; - } - return event; -} + for (let i = 0; i < event.touches.length; ++i) { + const touch = event.touches[i]; + touch.offsetX = touch.x; + touch.offsetY = touch.y; + } + return event; +} \ No newline at end of file diff --git a/ec-canvas/wx-canvas.js b/ec-canvas/wx-canvas.js index 6c7c90b..45de331 100644 --- a/ec-canvas/wx-canvas.js +++ b/ec-canvas/wx-canvas.js @@ -10,9 +10,7 @@ export default class WxCanvas { else { this._initStyle(ctx); } - // this._initCanvas(zrender, ctx); - this._initEvent(); } @@ -49,7 +47,6 @@ export default class WxCanvas { zrender.util.getContext = function () { return ctx; }; - zrender.util.$override('measureText', function (text, font) { ctx.font = font || '12px sans-serif'; return ctx.measureText(text);