This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch remove-component in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 548bf37d8e7a598f17ec7dae026e3ec041a4892a Author: 100pah <sushuang0...@gmail.com> AuthorDate: Fri Jul 17 18:35:17 2020 +0800 add test case. --- test/option-replaceMerge2.html | 427 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 424 insertions(+), 3 deletions(-) diff --git a/test/option-replaceMerge2.html b/test/option-replaceMerge2.html index cd85164..7b7cf7f 100644 --- a/test/option-replaceMerge2.html +++ b/test/option-replaceMerge2.html @@ -40,6 +40,7 @@ under the License. <div id="transition_facet_cartesian"></div> <div id="notMerge_transition_replaceMerge_newView"></div> <div id="main_replaceMerge_keep_update"></div> + <div id="transition_dots"></div> @@ -411,12 +412,14 @@ under the License. color: '#881100', width: 5 }, - center: ['20%', 80], + center: ['20%', 120], radius: 40, data: [ {name: 'Mon', value: 100}, {name: 'Tue', value: 200}, - {name: 'Wed', value: 150} + {name: 'Wed', value: 150}, + {name: 'Thu', value: 350}, + {name: 'Fri', value: 180} ] }); @@ -430,7 +433,9 @@ under the License. type: 'category' }, yAxis: {}, - legend: {}, + legend: { + left: 20 + }, tooltip: {}, dataZoom: [{ type: 'slider' @@ -492,6 +497,422 @@ under the License. + + + + + + <script> + require(['echarts'], function (echarts) { + var rawData = [[161.2,51.6,0],[174,65.6,1],[167.5,59,0],[175.3,71.8,1],[159.5,49.2,0],[193.5,80.7,1],[157,63,0],[186.5,72.6,1],[155.8,53.6,0],[187.2,78.8,1],[170,59,0],[181.5,74.8,1],[159.1,47.6,0],[184,86.4,1],[166,69.8,0],[184.5,78.4,1],[176.2,66.8,0],[175,62,1],[160.2,75.2,0],[184,81.6,1],[172.5,55.2,0],[180,76.6,1],[170.9,54.2,0],[177.8,83.6,1],[172.9,62.5,0],[192,90,1],[153.4,42,0],[176,74.6,1],[160,50,0],[174,71,1],[147.2,49.8,0],[184,79.6,1],[168.2,49.2,0],[192.7,93.8, [...] + // var rawData = [[157.5,76.8,0]]; + + var FEMALE = 0; + var MALE = 1; + var DIMENSION_HEIGHT = 0; + var DIMENSION_WEIGHT = 1; + var DIMENSION_SEX = 2; + var SYMBOL_RADIUS = 6; + + var HEIGHT_RANGES = [ + { min: 140, max: 160 }, + { min: 160, max: 180 }, + { min: 180, max: 200 } + ]; + + var State = { + NONE: 0, + HEIGHT_WEIGHT_SINGLE: 1, + HEIGHT_WEIGHT_SEX_SEP: 2, + COUNT_BY_HEIGHT_RANGE: 3 + }; + + var currentState = State.NONE + var countBySexHeightRangeMax = 0; + + function renderItem(seriesInfo, params, api) { + if (currentState === State.NONE) { + return; + } + + var sex = api.value(DIMENSION_SEX) + var height = api.value(DIMENSION_HEIGHT); + var weight = api.value(DIMENSION_WEIGHT); + + if (seriesInfo.sex !== sex) { + return; + } + if (height < seriesInfo.heightRange.min || height >= seriesInfo.heightRange.max) { + return; + } + + var posX; + var posY; + if (currentState === State.COUNT_BY_HEIGHT_RANGE) { + var position = api.coord([sex, 0]); + posX = position[0]; + var yStart = position[1]; + position = api.coord([sex, seriesInfo.countBySexHeightRange]); + var yEnd = position[1]; + if (params.context.displayIdx == null) { + params.context.displayIdx = 0; + } + else { + params.context.displayIdx++; + } + if (seriesInfo.countBySexHeightRange === 1) { + posY = yEnd; + } + else { + posY = yStart + (yEnd - yStart) / (seriesInfo.countBySexHeightRange - 1) * params.context.displayIdx; + } + } + else { + var position = api.coord([height, weight]); + posX = position[0]; + posY = position[1]; + } + + var color = sex === FEMALE ? '#eb6134' : '#348feb'; // ? '#eb9934' : '#36b6d9'; + + return { + type: 'circle', + x: posX, + y: posY, + shape: { cx: 0, cy: 0, r: SYMBOL_RADIUS }, + style: { + fill: color, + opacity: 0.8 + // stroke: '#555', + // lineWidth: 1 + } + }; + } + + function animationDelayUpdate(idx) { + return idx; + } + + var baseOption = { + dataset: { + source: rawData + }, + title: { + text: 'Height and Weight' + }, + tooltip: { + }, + toolbox: { + feature: { + dataZoom: {}, + brush: { + type: ['rect', 'polygon', 'clear'] + } + } + }, + legend: { + }, + brush: { + }, + dataZoom: [{ + type: 'slider', + left: 50, + right: 50, + height: 20, + xAxisIndex: 'all' + }, { + type: 'inside', + xAxisIndex: 'all' + }], + series: [] + }; + + var seriesInfoList = []; + + for (var i = 0, seriesInfo; i < HEIGHT_RANGES.length; i++) { + seriesInfoList.push(seriesInfo = { + sex: FEMALE, + heightRange: HEIGHT_RANGES[i] + }); + baseOption.series.push({ + type: 'custom', + name: 'Female', + coordinateSystem: 'none', + animationDelayUpdate: animationDelayUpdate, + renderItem: echarts.util.curry(renderItem, seriesInfo) + }); + seriesInfoList.push(seriesInfo = { + sex: MALE, + heightRange: HEIGHT_RANGES[i] + }); + baseOption.series.push({ + type: 'custom', + name: 'Male', + coordinateSystem: 'none', + animationDelayUpdate: animationDelayUpdate, + renderItem: echarts.util.curry(renderItem, seriesInfo) + }); + } + + makeCountByHeightRange(rawData, seriesInfoList); + + function makeCountByHeightRange(rawData, seriesInfoList) { + for (var i = 0; i < rawData.length; i++) { + var rawDataItem = rawData[i]; + var val = rawDataItem[DIMENSION_HEIGHT]; + + for(var j = 0; j < seriesInfoList.length; j++) { + var seriesInfo = seriesInfoList[j]; + + if (seriesInfo.sex === rawDataItem[DIMENSION_SEX] + && seriesInfo.heightRange.min <= val + && val < seriesInfo.heightRange.max + ) { + if (seriesInfo.countBySexHeightRange == null) { + seriesInfo.countBySexHeightRange = 0; + } + seriesInfo.countBySexHeightRange++; + countBySexHeightRangeMax = Math.max( + countBySexHeightRangeMax, seriesInfo.countBySexHeightRange + ); + } + } + } + } + + var makeStateOption = {}; + + makeStateOption[State.HEIGHT_WEIGHT_SINGLE] = function () { + var option = { + dataZoom: [{ + xAxisIndex: 'all' + }, { + xAxisIndex: 'all' + }], + grid: [{ + bottom: 80 + }], + xAxis: [{ + scale: true, + axisLabel: { formatter: '{value} cm' }, + splitLine: { show: false } + }], + yAxis: [{ + scale: true, + axisLabel: { formatter: '{value} kg' }, + splitLine: { show: false } + }], + series: [] + }; + for (var i = 0; i < baseOption.series.length; i++) { + option.series.push({ + coordinateSystem: 'cartesian2d', + encode: { + x: DIMENSION_HEIGHT, + y: DIMENSION_WEIGHT, + label: [DIMENSION_HEIGHT, DIMENSION_WEIGHT] + }, + xAxisIndex: 0, + yAxisIndex: 0 + }); + } + return option; + }; + + makeStateOption[State.HEIGHT_WEIGHT_SEX_SEP] = function () { + var option = { + dataZoom: [{ + xAxisIndex: 'all' + }, { + xAxisIndex: 'all' + }], + grid: [{ + right: '55%', + bottom: 80, + }, { + left: '55%', + bottom: 80, + }], + xAxis: [{ + scale: true, + gridIndex: 0, + axisLabel: { formatter: '{value} cm' }, + splitLine: { show: false } + }, { + scale: true, + gridIndex: 1, + axisLabel: { formatter: '{value} cm' }, + splitLine: { show: false } + }], + yAxis: [{ + scale: true, + gridIndex: 0, + axisLabel: { formatter: '{value} kg' }, + splitLine: { show: false } + }, { + scale: true, + gridIndex: 1, + axisLabel: { formatter: '{value} kg' }, + splitLine: { show: false } + }], + series: [] + }; + for (var i = 0; i < baseOption.series.length; i++) { + var axisIndex = seriesInfoList[i].sex === FEMALE ? 0 : 1; + console.log(axisIndex, seriesInfoList[i]); + option.series.push({ + coordinateSystem: 'cartesian2d', + encode: { + x: DIMENSION_HEIGHT, + y: DIMENSION_WEIGHT, + label: [DIMENSION_HEIGHT, DIMENSION_WEIGHT] + }, + xAxisIndex: axisIndex, + yAxisIndex: axisIndex + }); + } + return option; + }; + + makeStateOption[State.COUNT_BY_HEIGHT_RANGE] = function () { + var yMax = Math.round(countBySexHeightRangeMax * 1.2); + + var option = { + dataZoom: [{ + xAxisIndex: 'none' + }, { + xAxisIndex: 'none' + }], + grid: [{ + left: '10%', + width: '20%', + top: 90, + bottom: 80, + }, { + left: '40%', + width: '20%', + top: 90, + bottom: 80, + }, { + left: '75%', + width: '20%', + top: 90, + bottom: 80, + }], + xAxis: [{ + type: 'category', + name: HEIGHT_RANGES[0].min + ' cm ~ ' + HEIGHT_RANGES[0].max + ' cm', + nameLocation: 'center', + nameGap: 20, + axisLabel: { show: false }, + axisTick: { show: false }, + gridIndex: 0, + splitLine: { show: false } + }, { + type: 'category', + name: HEIGHT_RANGES[1].min + ' cm ~ ' + HEIGHT_RANGES[1].max + ' cm', + nameLocation: 'center', + nameGap: 20, + axisLabel: { show: false }, + axisTick: { show: false }, + gridIndex: 1, + splitLine: { show: false } + }, { + type: 'category', + name: HEIGHT_RANGES[2].min + ' cm ~ ' + HEIGHT_RANGES[2].max + ' cm', + nameLocation: 'center', + nameGap: 20, + axisLabel: { show: false }, + axisTick: { show: false }, + gridIndex: 2, + splitLine: { show: false } + }], + yAxis: [{ + gridIndex: 0, + name: 'persons', + axisLabel: { formatter: '{value}' }, + max: yMax, + min: 0, + splitLine: { show: false } + }, { + gridIndex: 1, + name: 'persons', + axisLabel: { formatter: '{value}' }, + max: yMax, + min: 0, + splitLine: { show: false } + }, { + gridIndex: 2, + name: 'persons', + axisLabel: { formatter: '{value}' }, + max: yMax, + min: 0, + splitLine: { show: false } + }], + series: [] + }; + + for (var i = 0; i < baseOption.series.length; i++) { + var axisIndex = HEIGHT_RANGES.indexOf(seriesInfoList[i].heightRange); + option.series.push({ + coordinateSystem: 'cartesian2d', + encode: { + x: DIMENSION_SEX, + y: -1, + label: [DIMENSION_HEIGHT, DIMENSION_WEIGHT] + }, + xAxisIndex: axisIndex, + yAxisIndex: axisIndex + }); + } + + return option; + }; + + function changeState(state) { + currentState = state; + var option = makeStateOption[state](); + chart.setOption(option, { + replaceMerge: ['grid', 'xAxis', 'yAxis'] + }); + } + + var chart = testHelper.create(echarts, 'transition_dots', { + title: [ + 'Transition case:', + 'click btns one by one', + ], + option: baseOption, + lazyUpdate: true, + height: 600, + buttons: [{ + text: 'scatter by sex', + onclick: function () { + changeState(State.HEIGHT_WEIGHT_SEX_SEP); + } + }, { + text: 'count by height range', + onclick: function () { + changeState(State.COUNT_BY_HEIGHT_RANGE); + } + }, { + text: 'one grid', + onclick: function () { + changeState(State.HEIGHT_WEIGHT_SINGLE); + } + }] + }); + + changeState(State.HEIGHT_WEIGHT_SINGLE); + + }); + </script> + + + + + + </body> </html> --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org