From 763a17e43bf9c1d3df9032dec90aba21ab3402c2 Mon Sep 17 00:00:00 2001 From: taojunnan Date: Sun, 7 Apr 2024 16:23:48 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=85=BC=E5=AE=B9=E5=B0=8F=E7=A8=8B?= =?UTF-8?q?=E5=BA=8Fskyline=E6=B8=B2=E6=9F=93=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ec-canvas/ec-canvas.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/ec-canvas/ec-canvas.js b/ec-canvas/ec-canvas.js index 278f4a9..3f4e9b7 100644 --- a/ec-canvas/ec-canvas.js +++ b/ec-canvas/ec-canvas.js @@ -142,7 +142,7 @@ Component({ initByNewWay(callback) { // version >= 2.9.0：使用新的方式初始化 - const query = wx.createSelectorQuery().in(this) + const query = this.createSelectorQuery() query .select('.ec-canvas') .fields({ node: true, size: true }) @@ -218,15 +218,15 @@ Component({ var touch = e.touches[0]; var handler = this.chart.getZr().handler; handler.dispatch('mousedown', { - zrX: touch.x, - zrY: touch.y, + zrX: touch.x || touch.clientX, + zrY: touch.y || touch.clientY, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} }); handler.dispatch('mousemove', { - zrX: touch.x, - zrY: touch.y, + zrX: touch.x || touch.clientX, + zrY: touch.y || touch.clientY, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} @@ -240,8 +240,8 @@ Component({ var touch = e.touches[0]; var handler = this.chart.getZr().handler; handler.dispatch('mousemove', { - zrX: touch.x, - zrY: touch.y, + zrX: touch.x || touch.clientX, + zrY: touch.y || touch.clientY, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} @@ -255,15 +255,15 @@ Component({ const touch = e.changedTouches ? e.changedTouches[0] : {}; var handler = this.chart.getZr().handler; handler.dispatch('mouseup', { - zrX: touch.x, - zrY: touch.y, + zrX: touch.x || touch.clientX, + zrY: touch.y || touch.clientY, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} }); handler.dispatch('click', { - zrX: touch.x, - zrY: touch.y, + zrX: touch.x || touch.clientX, + zrY: touch.y || touch.clientY, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} @@ -277,8 +277,8 @@ Component({ 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; + touch.offsetX = touch.x || touch.clientX; + touch.offsetY = touch.y || touch.clientX; } return event; } From aed41527d8d8ee4e51ec7912714b26103980cf26 Mon Sep 17 00:00:00 2001 From: taojunnan Date: Wed, 10 Apr 2024 17:01:09 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=94=AF=E6=8C=81skyline?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E5=8F=8A=E4=BE=8B=E5=AD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 11 +++- ec-canvas/ec-canvas.js | 50 +++++++++++---- pages/index/index.js | 3 + pages/skyline/index.js | 133 +++++++++++++++++++++++++++++++++++++++ pages/skyline/index.json | 7 +++ pages/skyline/index.wxml | 6 ++ pages/skyline/index.wxss | 17 +++++ 7 files changed, 212 insertions(+), 15 deletions(-) create mode 100644 pages/skyline/index.js create mode 100644 pages/skyline/index.json create mode 100644 pages/skyline/index.wxml create mode 100644 pages/skyline/index.wxss diff --git a/app.json b/app.json index 7c896e6..9398aa7 100644 --- a/app.json +++ b/app.json @@ -24,7 +24,8 @@ "pages/multiCharts/index", "pages/move/index", "pages/saveCanvas/index", - "pages/loadImage/index" + "pages/loadImage/index", + "pages/skyline/index" ], "window": { "backgroundTextStyle": "light", @@ -33,5 +34,11 @@ "navigationBarTitleText": "ECharts 图表示例", "navigationBarTextStyle": "black" }, - "sitemapLocation": "sitemap.json" + "sitemapLocation": "sitemap.json", + "lazyCodeLoading": "requiredComponents", + "rendererOptions": { + "skyline": { + "defaultContentBox": true + } + } } \ No newline at end of file diff --git a/ec-canvas/ec-canvas.js b/ec-canvas/ec-canvas.js index 3f4e9b7..384cad4 100644 --- a/ec-canvas/ec-canvas.js +++ b/ec-canvas/ec-canvas.js @@ -2,6 +2,8 @@ import WxCanvas from './wx-canvas'; import * as echarts from './echarts'; let ctx; +// canvas 的位置信息 { top, left } +let canvasRect = { left: 0, top: 0 } function compareVersion(v1, v2) { v1 = v1.split('.') @@ -213,20 +215,42 @@ Component({ } }, - touchStart(e) { + // 计算获取 canvas 的位置信息 + calculateCanvasRect() { + const version = wx.getSystemInfoSync().SDKVersion; + // 3.4.1 后skyline canvas点击直接返回了x,y坐标，不需要计算 + // @see https://developers.weixin.qq.com/community/develop/doc/00068692e542f801935138cdb6b800?jumpto=comment&commentid=0002c0c26446e0519b51053ef6b0 + const needCalculate = compareVersion(version, '3.4.1') < 0 && this.renderer === 'skyline'; + if(!needCalculate) { + return + } + + return new Promise(resolve => { + const query = this.createSelectorQuery() + query.select('.ec-canvas').boundingClientRect(({ left, top }) => { + canvasRect = { left, top } + + resolve() + }).exec() + }) + }, + + async touchStart(e) { + await this.calculateCanvasRect() + if (this.chart && e.touches.length > 0) { var touch = e.touches[0]; var handler = this.chart.getZr().handler; handler.dispatch('mousedown', { - zrX: touch.x || touch.clientX, - zrY: touch.y || touch.clientY, + zrX: touch.x || touch.pageX - canvasRect.left, + zrY: touch.y || touch.pageY - canvasRect.top, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} }); handler.dispatch('mousemove', { - zrX: touch.x || touch.clientX, - zrY: touch.y || touch.clientY, + zrX: touch.x || touch.pageX - canvasRect.left, + zrY: touch.y || touch.pageY - canvasRect.top, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} @@ -240,8 +264,8 @@ Component({ var touch = e.touches[0]; var handler = this.chart.getZr().handler; handler.dispatch('mousemove', { - zrX: touch.x || touch.clientX, - zrY: touch.y || touch.clientY, + zrX: touch.x || touch.pageX - canvasRect.left, + zrY: touch.y || touch.pageY - canvasRect.top, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} @@ -255,15 +279,15 @@ Component({ const touch = e.changedTouches ? e.changedTouches[0] : {}; var handler = this.chart.getZr().handler; handler.dispatch('mouseup', { - zrX: touch.x || touch.clientX, - zrY: touch.y || touch.clientY, + zrX: touch.x || touch.pageX - canvasRect.left, + zrY: touch.y || touch.pageY - canvasRect.top, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} }); handler.dispatch('click', { - zrX: touch.x || touch.clientX, - zrY: touch.y || touch.clientY, + zrX: touch.x || touch.pageX - canvasRect.left, + zrY: touch.y || touch.pageY - canvasRect.top, preventDefault: () => {}, stopImmediatePropagation: () => {}, stopPropagation: () => {} @@ -277,8 +301,8 @@ Component({ function wrapTouch(event) { for (let i = 0; i < event.touches.length; ++i) { const touch = event.touches[i]; - touch.offsetX = touch.x || touch.clientX; - touch.offsetY = touch.y || touch.clientX; + touch.offsetX = touch.x || touch.pageX - canvasRect.left; + touch.offsetY = touch.y || touch.pageY - canvasRect.top; } return event; } diff --git a/pages/index/index.js b/pages/index/index.js index 97909c3..f36d978 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -80,6 +80,9 @@ Page({ }, { id: 'loadImage', name: '加载图片' + },{ + id: 'skyline', + name: 'skyline渲染' }] }, diff --git a/pages/skyline/index.js b/pages/skyline/index.js new file mode 100644 index 0000000..2e39b5d --- /dev/null +++ b/pages/skyline/index.js @@ -0,0 +1,133 @@ +import * as echarts from '../../ec-canvas/echarts'; + +const app = getApp(); + +function initChart(canvas, width, height, dpr) { + const chart = echarts.init(canvas, null, { + width: width, + height: height, + devicePixelRatio: dpr // new + }); + canvas.setChart(chart); + + var option = { + tooltip: { + trigger: 'axis', + axisPointer: { // 坐标轴指示器，坐标轴触发有效 + type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' + }, + confine: true + }, + 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() { + } +}); diff --git a/pages/skyline/index.json b/pages/skyline/index.json new file mode 100644 index 0000000..f5102e3 --- /dev/null +++ b/pages/skyline/index.json @@ -0,0 +1,7 @@ +{ + "usingComponents": { + "ec-canvas": "../../ec-canvas/ec-canvas" + }, + "renderer": "skyline", + "componentFramework": "glass-easel" +} \ No newline at end of file diff --git a/pages/skyline/index.wxml b/pages/skyline/index.wxml new file mode 100644 index 0000000..5e0219f --- /dev/null +++ b/pages/skyline/index.wxml @@ -0,0 +1,6 @@ + + + 占位内容，往上滑动↑ + + + diff --git a/pages/skyline/index.wxss b/pages/skyline/index.wxss new file mode 100644 index 0000000..f2f0902 --- /dev/null +++ b/pages/skyline/index.wxss @@ -0,0 +1,17 @@ +/**index.wxss**/ +ec-canvas { + width: 100%; + height: 100%; +} + +.warp { + height: 100vh; +} + +.gap { + height: 600px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #817d7d; +} \ No newline at end of file