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 2020/06/08 14:22:58 UTC
[incubator-echarts] 01/03: test: add test case for clip init.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch custom-series-enhance
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 2f5de4916dd0652f6fe1b3d5f75853e14c33dd19
Author: 100pah <su...@gmail.com>
AuthorDate: Fri Jun 5 10:21:58 2020 +0800
test: add test case for clip init.
---
src/chart/custom.ts | 4 +-
test/custom-feature.html | 126 ++++++++++++++++++++----------
test/custom-transition.html | 184 ++++++++++++++++++++++++++++++++------------
3 files changed, 221 insertions(+), 93 deletions(-)
diff --git a/src/chart/custom.ts b/src/chart/custom.ts
index cfd1a1f..b35f55b 100644
--- a/src/chart/custom.ts
+++ b/src/chart/custom.ts
@@ -221,13 +221,13 @@ interface CustomSeriesRenderItemCoordinateSystemAPI {
): number | number[];
}
interface CustomSeriesRenderItemParams {
- context: {};
+ context: Dictionary<unknown>;
seriesId: string;
seriesName: string;
seriesIndex: number;
coordSys: CustomSeriesRenderItemParamsCoordSys;
dataInsideLength: number;
- encode: ReturnType<typeof wrapEncodeDef>
+ encode: ReturnType<typeof wrapEncodeDef>;
}
type CustomSeriesRenderItem = (
params: CustomSeriesRenderItemParams,
diff --git a/test/custom-feature.html b/test/custom-feature.html
index cee7c53..be3f4e5 100644
--- a/test/custom-feature.html
+++ b/test/custom-feature.html
@@ -35,9 +35,10 @@ under the License.
</style>
- <div id="main0"></div>
- <div id="main2"></div>
- <div id="main3"></div>
+ <div id="main-eventful"></div>
+ <div id="main-clip-by-system"></div>
+ <div id="main-clip-by-self"></div>
+ <div id="main-SVG-Path"></div>
<script>
@@ -107,7 +108,7 @@ under the License.
}]
};
- var chart = testHelper.create(echarts, 'main0', {
+ var chart = testHelper.create(echarts, 'main-eventful', {
title: [
'Eventful: ',
'Only this el trigger events: **red circle** and **red rect** of **dataIndex: 1**',
@@ -138,8 +139,6 @@ under the License.
'echarts'/*, 'map/js/china' */
], function (echarts) {
- // deprecated: this case would be wrong.
-
var option = {
xAxis: {
min: 90,
@@ -151,13 +150,11 @@ under the License.
max: 500,
scale: true
},
- dataZoom: [{
- type: 'inside',
- filterMode: 'none'
- }, {
- type: 'slider',
- filterMode: 'none'
- }],
+ dataZoom: [
+ {type: 'inside', filterMode: 'none'},
+ {type: 'slider', filterMode: 'none'},
+ {type: 'slider', filterMode: 'none', orient: 'vertical'},
+ ],
series: [{
type: 'custom',
renderItem: function (params, api) {
@@ -173,24 +170,19 @@ under the License.
[90, 50]
]
},
- clip: {
- x: params.coordSys.x,
- y: params.coordSys.y,
- width: params.coordSys.width,
- height: params.coordSys.height
- },
style: {
fill: 'green'
}
}
},
+ clip: true,
data: [[100, 300]]
}]
};
- var chart = testHelper.create(echarts, 'main2', {
+ var chart = testHelper.create(echarts, 'main-clip-by-system', {
title: [
- 'The shape should be **clipped** by the grid. (TODO)',
+ 'The shape should be **clipped** by the grid (by series.clip).',
],
option: option
});
@@ -204,13 +196,82 @@ under the License.
-
<script>
require([
'echarts'/*, 'map/js/china' */
], function (echarts) {
+ var option = {
+ xAxis: {
+ min: 90,
+ max: 120,
+ scale: true
+ },
+ yAxis: {
+ min: 50,
+ max: 500,
+ scale: true
+ },
+ dataZoom: [
+ {type: 'inside', filterMode: 'none'},
+ {type: 'slider', filterMode: 'none'},
+ {type: 'slider', filterMode: 'none', orient: 'vertical'},
+ ],
+ series: [{
+ type: 'custom',
+ renderItem: function (params, api) {
+ return {
+ type: 'group',
+ children: [{
+ type: 'polygon',
+ position: api.coord([api.value(0), api.value(1)]),
+ shape: {
+ points: [
+ [0, 0],
+ [50, -50],
+ [90, -50],
+ [140, 0],
+ [90, 50]
+ ]
+ },
+ style: {
+ fill: 'blue'
+ }
+ }],
+ clipPath: {
+ type: 'rect',
+ shape: {
+ x: params.coordSys.x,
+ y: params.coordSys.y,
+ width: params.coordSys.width,
+ height: params.coordSys.height
+ }
+ }
+ }
+ },
+ data: [[100, 300]]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main-clip-by-self', {
+ title: [
+ 'The shape should be **clipped** by the grid (by custom clipPath).',
+ ],
+ option: option
+ });
+
+ });
+
+ </script>
+
+
+
+
+ <script>
+
+ require(['echarts'], function (echarts) {
+
// deprecated: this case would be wrong.
var data = [];
@@ -225,23 +286,6 @@ under the License.
},
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,
@@ -350,7 +394,7 @@ under the License.
};
}
- var chart = testHelper.create(echarts, 'main3', {
+ var chart = testHelper.create(echarts, 'main-SVG-Path', {
title: [
'Test SVG path data auto fit to rect: ',
'the y axis label (made by custom series) should be center',
@@ -367,5 +411,7 @@ under the License.
+
+
</body>
</html>
\ No newline at end of file
diff --git a/test/custom-transition.html b/test/custom-transition.html
index e1a22ff..2d0f762 100644
--- a/test/custom-transition.html
+++ b/test/custom-transition.html
@@ -42,6 +42,7 @@ under the License.
<div id="texture-bar-by-clipPath"></div>
<div id="enter-animation"></div>
<div id="enter-animation2"></div>
+ <div id="enter-animation-clipPath"></div>
<div id="style-animation"></div>
<div id="transform-animation"></div>
<div id="transform-animation-disabled"></div>
@@ -51,6 +52,61 @@ under the License.
+<!--
+ <script>
+ require(['echarts'], function (echarts) {
+ var chart = testHelper.create(echarts, 'texture-bar-texture-maker', {
+ title: [],
+ width: 200,
+ height: 200,
+ option: {},
+ buttons: [{
+ text: 'dataURL',
+ onclick: function () {
+ console.log(chart.getDataURL({
+ type: 'png',
+ backgroundColor: 'rgba(0,0,0,0)'
+ }));
+ }
+ }]
+ });
+ if (!chart) {
+ return;
+ }
+
+ var zr = chart.getZr();
+ var eles = [];
+ var extent = [0.0, 0.95];
+ var count = 200;
+ var unit = (extent[1] - extent[0]) / count;
+ var baseColor = 'rgb(0,0,255)';
+ for (var i = 0; i < count; i++) {
+ var oo = extent[0] + (count - i) * unit;
+ var color = echarts.color.modifyHSL(baseColor, null, null, oo);
+ var startAngle = 2 * Math.PI / count * i;
+ var endAngle = Math.min((2 * Math.PI / count * (i + 1) + 0.05), Math.PI * 2);
+ zr.add(new echarts.graphic.Sector({
+ type: 'sector',
+ shape: {
+ cx: 100,
+ cy: 100,
+ r: 100,
+ r0: 60,
+ startAngle: startAngle,
+ endAngle: endAngle
+ },
+ style: {
+ fill: color
+ }
+ }));
+ }
+ });
+ </script> -->
+
+
+
+
+
<script>
require([
'echarts'
@@ -726,57 +782,6 @@ under the License.
</script>
- <script>
- require(['echarts'], function (echarts) {
- var chart = testHelper.create(echarts, 'texture-bar-texture-maker', {
- title: [],
- width: 200,
- height: 200,
- option: {},
- buttons: [{
- text: 'dataURL',
- onclick: function () {
- console.log(chart.getDataURL({
- type: 'png',
- backgroundColor: 'rgba(0,0,0,0)'
- }));
- }
- }]
- });
- if (!chart) {
- return;
- }
-
- var zr = chart.getZr();
- var eles = [];
- var extent = [0.0, 0.95];
- var count = 200;
- var unit = (extent[1] - extent[0]) / count;
- var baseColor = 'rgb(0,0,255)';
- for (var i = 0; i < count; i++) {
- var oo = extent[0] + (count - i) * unit;
- var color = echarts.color.modifyHSL(baseColor, null, null, oo);
- var startAngle = 2 * Math.PI / count * i;
- var endAngle = Math.min((2 * Math.PI / count * (i + 1) + 0.05), Math.PI * 2);
- zr.add(new echarts.graphic.Sector({
- type: 'sector',
- shape: {
- cx: 100,
- cy: 100,
- r: 100,
- r0: 60,
- startAngle: startAngle,
- endAngle: endAngle
- },
- style: {
- fill: color
- }
- }));
- }
- });
- </script>
-
-
@@ -958,6 +963,83 @@ under the License.
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var animationDuration = 1000;
+ var animationDurationUpdate = 1000;
+ var option = {
+ animationDuration: animationDuration,
+ animationDurationUpdate: animationDurationUpdate,
+ animationEasing: 'linear',
+ xAxis: {
+ max: 500
+ },
+ yAxis: {
+ max: 300
+ },
+ series: [{
+ type: 'custom',
+ renderItem: function (params, api) {
+ var pos = api.coord([api.value(0), api.value(1)]);
+ return {
+ type: 'group',
+ children: [{
+ type: 'rect',
+ shape: {x: 0, y: 0, width: 2000, height: 2000},
+ style: {fill: 'orange'}
+ }, {
+ type: 'polygon',
+ x: pos[0],
+ y: pos[1],
+ shape: {
+ points: [
+ [0, 0],
+ [50, -50],
+ [90, -50],
+ [140, 0],
+ [90, 50]
+ ]
+ },
+ style: {
+ fill: 'green'
+ }
+ }],
+ clipPath: {
+ type: 'rect',
+ shape: {
+ x: params.coordSys.x,
+ y: params.coordSys.y,
+ width: params.coordSys.width,
+ height: params.coordSys.height,
+ $enterFrom: {width: 0}
+ }
+ }
+ };
+ },
+ data: [[71, 133], [159, 113]]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'enter-animation-clipPath', {
+ title: [
+ 'Ensure enter animation by clipPath play normal (from left to right).'
+ ],
+ height: 300,
+ option: option
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+
<script>
require(['echarts'], function (echarts) {
var weatherIcons = {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org