You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2018/09/10 16:46:34 UTC
[incubator-echarts] branch release updated: support custom series
path cover.
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 <su...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org