This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch release in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/release by this push: new 8af075c support custom series path cover. 8af075c is described below commit 8af075c014e7d01be4d21512aa8bc4d4645854e0 Author: sushuang <sushuang0...@gmail.com> AuthorDate: Tue Sep 11 00:46:13 2018 +0800 support custom series path cover. --- src/chart/custom.js | 21 +++--- src/util/graphic.js | 4 +- test/custom-feature.html | 176 ++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 186 insertions(+), 15 deletions(-) diff --git a/src/chart/custom.js b/src/chart/custom.js index 32863c8..3544316 100644 --- a/src/chart/custom.js +++ b/src/chart/custom.js @@ -213,18 +213,19 @@ function createEl(elOption) { if (graphicType === 'path') { var shape = elOption.shape; - el = graphicUtil.makePath( - shape.pathData, - null, - { + // Using pathRect brings convenience to users sacle svg path. + var pathRect = (shape.width != null && shape.height != null) + ? { x: shape.x || 0, y: shape.y || 0, - width: shape.width || 0, - height: shape.height || 0 - }, - 'center' - ); - el.__customPathData = elOption.pathData; + width: shape.width, + height: shape.height + } + : null; + var pathData = shape.pathData || shape.d; + // Path is also used for icon, so layout 'center' by default. + el = graphicUtil.makePath(pathData, null, pathRect, shape.layout || 'center'); + el.__customPathData = pathData; } else if (graphicType === 'image') { el = new graphicUtil.Image({}); diff --git a/src/util/graphic.js b/src/util/graphic.js index 20beb9c..2f73fd2 100644 --- a/src/util/graphic.js +++ b/src/util/graphic.js @@ -72,12 +72,10 @@ export function extendPath(pathData, opts) { */ export function makePath(pathData, opts, rect, layout) { var path = pathTool.createFromString(pathData, opts); - var boundingRect = path.getBoundingRect(); if (rect) { if (layout === 'center') { - rect = centerGraphic(rect, boundingRect); + rect = centerGraphic(rect, path.getBoundingRect()); } - resizePath(path, rect); } return path; diff --git a/test/custom-feature.html b/test/custom-feature.html index ed6dba5..ab75569 100644 --- a/test/custom-feature.html +++ b/test/custom-feature.html @@ -39,8 +39,9 @@ under the License. </style> - <div id="main0"></div> - <div id="main2"></div> + <!-- <div id="main0"></div> + <div id="main2"></div> --> + <div id="main3"></div> <!-- <div id="main1"></div> --> @@ -281,5 +282,176 @@ under the License. + + + + <script> + + require([ + 'echarts'/*, 'map/js/china' */ + ], function (echarts) { + + // deprecated: this case would be wrong. + + var data = []; + var data0 = []; + for (var i = 0; i < 100; i++) { + data.push(i); + data0.push([i, 10]); + } + + var option = { + tooltip: { + }, + dataZoom: [{ + type: 'slider', + xAxisIndex: 0, + filterMode: 'weakFilter', + height: 20, + bottom: 0, + start: -26, + end: 26, + showDetail: false + }, { + type: 'inside', + xAxisIndex: 0, + filterMode: 'weakFilter', + start: -26, + end: 26, + zoomOnMouseWheel: false, + moveOnMouseMove: true + }, { + type: 'slider', + yAxisIndex: 0, + zoomLock: true, + width: 10, + right: 10, + top: 70, + bottom: 20, + start: 94, + end: 100, + handleSize: 0, + showDetail: false, + }, { + type: 'inside', + yAxisIndex: 0, + start: 94, + end: 100, + zoomOnMouseWheel: false, + moveOnMouseMove: true, + moveOnMouseWheel: true + }], + grid: { + show: true, + top: 70, + bottom: 20, + left: 100, + right: 20, + backgroundColor: '#fff', + borderWidth: 0 + }, + xAxis: { + type: 'time', + position: 'top', + splitLine: { + lineStyle: { + color: ['#E9EDFF'] + } + }, + axisLine: { + show: false + }, + axisTick: { + lineStyle: { + color: '#929ABA' + } + }, + axisLabel: { + color: '#929ABA', + inside: false, + align: 'center' + } + }, + yAxis: { + }, + series: [{ + type: 'scatter', + data: data0, + encode: {x: 1, y: 0} + }, { + type: 'custom', + renderItem: renderAxisLabelItem, + encode: { + x: -1, // Then this series will not controlled by x. + y: 0 + }, + data: data + }] + }; + + function renderAxisLabelItem(params, api) { + // Get the heigth corresponds to length 1 on y axis. + var x0 = 0; + var x1 = 30; + var x3 = 90; + var blockHeight = api.size([0, 1])[1] - 26; + + return { + type: 'group', + position: [ + 10, + api.coord([0, api.value(0)])[1] + // blockHeight + ], + children: [{ + type: 'path', + shape: { + d: 'M0,0 L0,-20 L30,-20 C40,-20 40,-1 50,-1 L90,-1 L90,0 Z', + x: 0, + y: -blockHeight, + width: 90, + height: blockHeight, + layout: 'cover' + }, + style: { + fill: '#03b292' + } + }, { + type: 'text', + style: { + x: (x0 + x1) / 2, + y: -blockHeight / 2, + text: api.value(1), + textFill: '#fff' + } + // }, { + // type: 'text', + // style: { + // x: x3 - 5, + // y: -blockHeight, + // textAlign: 'right', + // textVerticalAlign: 'bottom', + // text: api.value(0), + // textFill: '#000' + // } + }] + }; + } + + var chart = testHelper.create(echarts, 'main3', { + title: [ + 'Test SVG path data auto fit to rect: ', + 'the y axis label (made by custom series) should be align with axis tick', + ], + option: option + }); + + }); + + </script> + + + + </body> </html> \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org