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 <sushuang0...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org