You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2019/10/14 09:45:31 UTC
[incubator-echarts] branch fix-4856 created (now e50f049)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch fix-4856
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at e50f049 test(polar): add test for polar bars with roundCap
This branch includes the following new commits:
new cf414a2 feat: add sausage shape
new 6a7cbde feat(polar): support radius for polar bars
new e50f049 test(polar): add test for polar bars with roundCap
The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 02/03: feat(polar): support radius for polar
bars
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-4856
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 6a7cbdee42a9db0ed8bf38b9b9864a27c66808a3
Author: Ovilia <zw...@gmail.com>
AuthorDate: Mon Oct 14 17:37:35 2019 +0800
feat(polar): support radius for polar bars
---
src/chart/bar/BarSeries.js | 6 +++++-
src/chart/bar/BarView.js | 16 ++++++++++------
src/layout/barPolar.js | 5 +++--
src/util/graphic.js | 7 +++++--
src/util/symbol.js | 39 +++++++++++++++++++++++----------------
5 files changed, 46 insertions(+), 27 deletions(-)
diff --git a/src/chart/bar/BarSeries.js b/src/chart/bar/BarSeries.js
index 477a584..0f34f9c 100644
--- a/src/chart/bar/BarSeries.js
+++ b/src/chart/bar/BarSeries.js
@@ -53,6 +53,10 @@ export default BaseBarSeries.extend({
defaultOption: {
// If clipped
// Only available on cartesian2d
- clip: true
+ clip: true,
+
+ // If use caps on two sides of bars
+ // Only available on tangential polar bar
+ roundCap: false
}
});
diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js
index 310ddff..f15f9c4 100644
--- a/src/chart/bar/BarView.js
+++ b/src/chart/bar/BarView.js
@@ -97,6 +97,7 @@ export default echarts.extendChartView({
var coordSysClipArea = coord.getArea && coord.getArea();
var needsClip = seriesModel.get('clip', true);
+ var roundCap = seriesModel.get('roundCap', true);
// If there is clipPath created in large mode. Remove it.
group.removeClipPath();
@@ -123,7 +124,7 @@ export default echarts.extendChartView({
}
var el = elementCreator[coord.type](
- data, dataIndex, itemModel, layout, isHorizontalOrRadial, animationModel
+ dataIndex, layout, isHorizontalOrRadial, animationModel, false, roundCap
);
data.setItemGraphicEl(dataIndex, el);
group.add(el);
@@ -157,7 +158,7 @@ export default echarts.extendChartView({
}
else {
el = elementCreator[coord.type](
- data, newIndex, itemModel, layout, isHorizontalOrRadial, animationModel, true
+ newIndex, layout, isHorizontalOrRadial, animationModel, true, roundCap
);
}
@@ -281,7 +282,7 @@ var clip = {
var elementCreator = {
cartesian2d: function (
- data, dataIndex, itemModel, layout, isHorizontal,
+ dataIndex, layout, isHorizontal,
animationModel, isUpdate
) {
var rect = new graphic.Rect({shape: zrUtil.extend({}, layout)});
@@ -302,15 +303,18 @@ var elementCreator = {
},
polar: function (
- data, dataIndex, itemModel, layout, isRadial,
- animationModel, isUpdate
+ dataIndex, layout, isRadial,
+ animationModel, isUpdate, roundCap
) {
// Keep the same logic with bar in catesion: use end value to control
// direction. Notice that if clockwise is true (by default), the sector
// will always draw clockwisely, no matter whether endAngle is greater
// or less than startAngle.
var clockwise = layout.startAngle < layout.endAngle;
- var sector = new graphic.Sector({
+
+ var ShapeClass = (!isRadial && roundCap) ? graphic.Sausage : graphic.Sector;
+
+ var sector = new ShapeClass({
shape: zrUtil.defaults({clockwise: clockwise}, layout)
});
diff --git a/src/layout/barPolar.js b/src/layout/barPolar.js
index 88d7641..bcdc1a6 100644
--- a/src/layout/barPolar.js
+++ b/src/layout/barPolar.js
@@ -79,6 +79,8 @@ function barLayoutPolar(seriesType, ecModel, api) {
var valueDim = data.mapDimension(valueAxis.dim);
var baseDim = data.mapDimension(baseAxis.dim);
var stacked = isDimensionStacked(data, valueDim /*, baseDim*/);
+ var clampLayout = baseDim !== 'radius'
+ || !seriesModel.get('roundCap', true);
var valueAxisStart = valueAxis.getExtent()[0];
@@ -130,8 +132,7 @@ function barLayoutPolar(seriesType, ecModel, api) {
}
// tangential sector
else {
- // angleAxis must be clamped.
- var angleSpan = valueAxis.dataToAngle(value, true) - valueAxisStart;
+ var angleSpan = valueAxis.dataToAngle(value, clampLayout) - valueAxisStart;
var radius = baseAxis.dataToRadius(baseValue);
if (Math.abs(angleSpan) < barMinAngle) {
diff --git a/src/util/graphic.js b/src/util/graphic.js
index 1d09806..969b4e4 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -43,6 +43,7 @@ import BoundingRect from 'zrender/src/core/BoundingRect';
import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
import * as subPixelOptimizeUtil from 'zrender/src/graphic/helper/subPixelOptimize';
import fixPathClipWithShadow from 'zrender/src/graphic/helper/fixClipWithShadow';
+import {Sausage} from './symbol';
var mathMax = Math.max;
@@ -76,8 +77,8 @@ export function extendShape(opts) {
return Path.extend(opts);
}
-export function fixClipWithShadow() {
- return fixPathClipWithShadow(Path.prototype.brush);
+export function fixClipWithShadow(conditionCheck) {
+ return fixPathClipWithShadow(Path.prototype.brush, conditionCheck);
}
/**
@@ -1435,6 +1436,7 @@ function nearZero(val) {
// by users, although we do not recommend that.
registerShape('circle', Circle);
registerShape('sector', Sector);
+registerShape('sausage', Sausage);
registerShape('ring', Ring);
registerShape('polygon', Polygon);
registerShape('polyline', Polyline);
@@ -1449,6 +1451,7 @@ export {
Text,
Circle,
Sector,
+ Sausage,
Ring,
Polygon,
Polyline,
diff --git a/src/util/symbol.js b/src/util/symbol.js
index 99f4eec..8113258 100644
--- a/src/util/symbol.js
+++ b/src/util/symbol.js
@@ -133,7 +133,7 @@ var Pin = graphic.extendShape({
* Sausage: similar to sector, but have half circle on both sides
* @inner
*/
-var Sausage = graphic.extendShape({
+export var Sausage = graphic.extendShape({
type: 'sausage',
@@ -154,10 +154,11 @@ var Sausage = graphic.extendShape({
clockwise: true
},
- brush: graphic.fixClipWithShadow(),
+ brush: graphic.fixClipWithShadow(function () {
+ return this.startAngle === this.endAngle;
+ }),
buildPath: function (ctx, shape) {
-
var x = shape.cx;
var y = shape.cy;
var r0 = Math.max(shape.r0 || 0, 0);
@@ -168,27 +169,33 @@ var Sausage = graphic.extendShape({
var endAngle = shape.endAngle;
var clockwise = shape.clockwise;
- var unitX = Math.cos(startAngle);
- var unitY = Math.sin(startAngle);
+ var unitStartX = Math.cos(startAngle);
+ var unitStartY = Math.sin(startAngle);
+ var unitEndX = Math.cos(endAngle);
+ var unitEndY = Math.sin(endAngle);
+
+ var lessThanCircle = clockwise
+ ? endAngle - startAngle < Math.PI * 2
+ : startAngle - endAngle < Math.PI * 2;
- ctx.moveTo(unitX * r0 + x, unitY * r0 + y);
+ if (lessThanCircle) {
+ ctx.moveTo(unitStartX * r0 + x, unitStartY * r0 + y);
- ctx.arc(unitX * rCenter + x, unitY * rCenter + y, dr,
- Math.PI + startAngle, startAngle, !clockwise);
+ ctx.arc(unitStartX * rCenter + x, unitStartY * rCenter + y, dr,
+ -Math.PI + startAngle, startAngle, !clockwise);
+ }
ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
- ctx.arc(
- Math.cos(endAngle) * rCenter + x,
- Math.sin(endAngle) * rCenter + x,
- dr,
- endAngle,
- endAngle + Math.PI,
- !clockwise
- );
+ ctx.moveTo(unitEndX * r + x, unitEndY * r + y);
+
+ ctx.arc(unitEndX * rCenter + x, unitEndY * rCenter + y, dr,
+ endAngle - Math.PI * 2, endAngle - Math.PI, !clockwise);
if (r0 !== 0) {
ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
+
+ ctx.moveTo(unitStartX * r0 + x, unitEndY * r0 + y);
}
ctx.closePath();
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 03/03: test(polar): add test for polar bars
with roundCap
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-4856
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit e50f0498000bac05c95cf514bb10387f92630abd
Author: Ovilia <zw...@gmail.com>
AuthorDate: Mon Oct 14 17:43:55 2019 +0800
test(polar): add test for polar bars with roundCap
---
test/polar-rounded.html | 256 ++++++++++++++++++++++++++++++++
test/runTest/actions/__meta__.json | 3 +-
test/runTest/actions/polar-rounded.json | 1 +
3 files changed, 259 insertions(+), 1 deletion(-)
diff --git a/test/polar-rounded.html b/test/polar-rounded.html
new file mode 100644
index 0000000..53585a5
--- /dev/null
+++ b/test/polar-rounded.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ </style>
+
+
+
+ <div id="main0"></div>
+
+ <div id="main1"></div>
+
+ <div id="main2"></div>
+
+ <div id="main3"></div>
+
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ xAxis: {
+ type: 'category',
+ data: ['A'],
+ show: false
+ },
+ yAxis: {
+ show: false
+ },
+ series: {
+ type: 'line',
+ symbol: 'sausage',
+ symbolSize: 120,
+ data: [1]
+ },
+ animation: false
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Sausage shape'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ angleAxis: {
+ max: 2,
+ startAngle: 30,
+ splitLine: {
+ show: false
+ }
+ },
+ radiusAxis: {
+ type: 'category',
+ data: ['v', 'w', 'x', 'y', 'z'],
+ z: 10
+ },
+ polar: {
+ },
+ series: [{
+ type: 'bar',
+ data: [4, 3, 2, 1, 0],
+ coordinateSystem: 'polar',
+ name: 'Without Round Cap',
+ color: 'rgba(200, 0, 0, 0.5)',
+ itemStyle: {
+ borderColor: 'red',
+ borderWidth: 1
+ }
+ }, {
+ type: 'bar',
+ data: [4, 3, 2, 1, 0],
+ coordinateSystem: 'polar',
+ name: 'With Round Cap',
+ roundCap: true,
+ color: 'rgba(0, 200, 0, 0.5)',
+ itemStyle: {
+ borderColor: 'green',
+ borderWidth: 1
+ }
+ }],
+ legend: {
+ show: true,
+ data: ['Without Round Cap', 'With Round Cap']
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Polar bar with and without round cap on rotated axis'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var data1 = [];
+ var data2 = [];
+ for (var i = 1; i <= 6; ++i) {
+ data1.push(i);
+ data2.push(6 - i);
+ }
+
+ var option = {
+ angleAxis: {
+ max: 5
+ },
+ radiusAxis: {
+ type: 'category',
+ data: data1,
+ z: 10
+ },
+ polar: {
+ },
+ series: [{
+ type: 'bar',
+ data: data1,
+ coordinateSystem: 'polar',
+ name: 'A',
+ roundCap: true,
+ color: 'rgba(200, 0, 0, 0.5)',
+ itemStyle: {
+ borderColor: 'red',
+ borderWidth: 1
+ }
+ }, {
+ type: 'bar',
+ data: data2,
+ coordinateSystem: 'polar',
+ name: 'B',
+ roundCap: true,
+ color: 'rgba(0, 200, 0, 0.5)',
+ itemStyle: {
+ borderColor: 'green',
+ borderWidth: 1
+ }
+ }],
+ legend: {
+ show: true,
+ data: ['A', 'B']
+ },
+ tooltip: {
+ show: true
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'Polar bar with round cap'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ angleAxis: {
+ max: 5
+ },
+ radiusAxis: {
+ type: 'category',
+ data: ['-', 'a'],
+ z: 10
+ },
+ polar: {
+ },
+ series: [{
+ type: 'bar',
+ data: ['-', 1],
+ coordinateSystem: 'polar',
+ name: 'A',
+ roundCap: true,
+ color: 'rgba(200, 0, 0, 0.5)',
+ itemStyle: {
+ borderColor: 'red',
+ borderWidth: 1
+ }
+ }],
+ legend: {
+ show: true,
+ data: ['A']
+ },
+ tooltip: {
+ show: true
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'Click button and check animation',
+ 'Data add 3 by each click; data change to 1 when bigger than 10'
+ ],
+ option: option,
+ buttons: [{
+ text: 'Change data',
+ onclick: function () {
+ if (option.series[0].data[1] > 10) {
+ option.series[0].data[1] = 1;
+ }
+ else {
+ option.series[0].data[1] += 3;
+ }
+ chart.setOption(option);
+ }
+ }]
+ });
+ });
+ </script>
+
+ </body>
+</html>
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 723bed1..5a2dcc4 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -134,5 +134,6 @@
"dataZoom-scroll": 3,
"map-contour": 2,
"map-default": 1,
- "map-labels": 1
+ "map-labels": 1,
+ "polar-rounded": 1
}
\ No newline at end of file
diff --git a/test/runTest/actions/polar-rounded.json b/test/runTest/actions/polar-rounded.json
new file mode 100644
index 0000000..169b11b
--- /dev/null
+++ b/test/runTest/actions/polar-rounded.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousemove","time":409,"x":85,"y":209},{"type":"mousemove","time":618,"x":70,"y":180},{"type":"mousedown","time":737,"x":69,"y":180},{"type":"mousemove","time":843,"x":69,"y":180},{"type":"mouseup","time":860,"x":69,"y":180},{"time":861,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":1719,"x":69,"y":180},{"type":"mouseup","time":1837,"x":69,"y":180},{"time":1838,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":2790,"x":6 [...]
\ 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
[incubator-echarts] 01/03: feat: add sausage shape
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-4856
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit cf414a29fac6045b7c3fe154b297093e299ee358
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Oct 10 18:03:34 2019 +0800
feat: add sausage shape
---
src/util/graphic.js | 5 ++++
src/util/symbol.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 82 insertions(+)
diff --git a/src/util/graphic.js b/src/util/graphic.js
index 0ca633d..1d09806 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -42,6 +42,7 @@ import RadialGradient from 'zrender/src/graphic/RadialGradient';
import BoundingRect from 'zrender/src/core/BoundingRect';
import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
import * as subPixelOptimizeUtil from 'zrender/src/graphic/helper/subPixelOptimize';
+import fixPathClipWithShadow from 'zrender/src/graphic/helper/fixClipWithShadow';
var mathMax = Math.max;
@@ -75,6 +76,10 @@ export function extendShape(opts) {
return Path.extend(opts);
}
+export function fixClipWithShadow() {
+ return fixPathClipWithShadow(Path.prototype.brush);
+}
+
/**
* Extend path
*/
diff --git a/src/util/symbol.js b/src/util/symbol.js
index 602ebfb..99f4eec 100644
--- a/src/util/symbol.js
+++ b/src/util/symbol.js
@@ -130,6 +130,72 @@ var Pin = graphic.extendShape({
});
/**
+ * Sausage: similar to sector, but have half circle on both sides
+ * @inner
+ */
+var Sausage = graphic.extendShape({
+
+ type: 'sausage',
+
+ shape: {
+
+ cx: 0,
+
+ cy: 0,
+
+ r0: 0,
+
+ r: 0,
+
+ startAngle: 0,
+
+ endAngle: Math.PI * 2,
+
+ clockwise: true
+ },
+
+ brush: graphic.fixClipWithShadow(),
+
+ buildPath: function (ctx, shape) {
+
+ var x = shape.cx;
+ var y = shape.cy;
+ var r0 = Math.max(shape.r0 || 0, 0);
+ var r = Math.max(shape.r, 0);
+ var dr = (r - r0) * 0.5;
+ var rCenter = r0 + dr;
+ var startAngle = shape.startAngle;
+ var endAngle = shape.endAngle;
+ var clockwise = shape.clockwise;
+
+ var unitX = Math.cos(startAngle);
+ var unitY = Math.sin(startAngle);
+
+ ctx.moveTo(unitX * r0 + x, unitY * r0 + y);
+
+ ctx.arc(unitX * rCenter + x, unitY * rCenter + y, dr,
+ Math.PI + startAngle, startAngle, !clockwise);
+
+ ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
+
+ ctx.arc(
+ Math.cos(endAngle) * rCenter + x,
+ Math.sin(endAngle) * rCenter + x,
+ dr,
+ endAngle,
+ endAngle + Math.PI,
+ !clockwise
+ );
+
+ if (r0 !== 0) {
+ ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
+ }
+
+ ctx.closePath();
+ }
+});
+
+/**
* Arrow shape
* @inner
*/
@@ -179,6 +245,8 @@ var symbolCtors = {
pin: Pin,
+ sausage: Sausage,
+
arrow: Arrow,
triangle: Triangle
@@ -209,6 +277,15 @@ var symbolShapeMakers = {
shape.r = Math.min(w, h) / 4;
},
+ sausage: function (x, y, w, h, shape) {
+ shape.r = Math.min(w, h) / 2;
+ shape.r0 = shape.r / 2;
+ shape.cx = x + w / 2;
+ shape.cy = y + h / 2;
+ shape.startAngle = -Math.PI / 6;
+ shape.endAngle = Math.PI / 6 * 7;
+ },
+
square: function (x, y, w, h, shape) {
var size = Math.min(w, h);
shape.x = x;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org