add test case.

548bf37d · 100pah · 7606cb72 · 548bf37d
隐藏空白更改
内联并排

Showing with 424 addition and 3 deletion

test/option-replaceMerge2.html test/option-replaceMerge2.html +424 -3

未找到文件。
--- 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,1],[175,73.2,0],[171.5,70,1],[157,47.8,0],[173,72.4,1],[167.6,68.8,0],[176,85.9,1],[159.5,50.6,0],[176,78.8,1],[175,82.5,0],[180.5,77.8,1],[166.8,57.2,0],[172.7,66.2,1],[176.5,87.8,0],[176,86.4,1],[170.2,72.8,0],[173.5,81.8,1],[174,54.5,0],[178,89.6,1],[173,59.8,0],[180.3,82.8,1],[179.9,67.3,0],[180.3,76.4,1],[170.5,67.8,0],[164.5,63.2,1],[160,47,0],[173,60.9,1],[154.4,46.2,0],[183.5,74.8,1],[162,55,0],[175.5,70,1],[176.5,83,0],[188,72.4,1],[160,54.4,0],[189.2,84.1,1],[152,45.8,0],[172.8,69.1,1],[162.1,53.6,0],[170,59.5,1],[170,73.2,0],[182,67.2,1],[160.2,52.1,0],[170,61.3,1],[161.3,67.9,0],[177.8,68.6,1],[166.4,56.6,0],[184.2,80.1,1],[168.9,62.3,0],[186.7,87.8,1],[163.8,58.5,0],[171.4,84.7,1],[167.6,54.5,0],[172.7,73.4,1],[160,50.2,0],[175.3,72.1,1],[161.3,60.3,0],[180.3,82.6,1],[167.6,58.3,0],[182.9,88.7,1],[165.1,56.2,0],[188,84.1,1],[160,50.2,0],[177.2,94.1,1],[170,72.9,0],[172.1,74.9,1],[157.5,59.8,0],[167,59.1,1],[167.6,61,0],[169.5,75.6,1],[160.7,69.1,0],[174,86.2,1],[163.2,55.9,0],[172.7,75.3,1],[152.4,46.5,0],[182.2,87.1,1],[157.5,54.3,0],[164.1,55.2,1],[168.3,54.8,0],[163,57,1],[180.3,60.7,0],[171.5,61.4,1],[165.5,60,0],[184.2,76.8,1],[165,62,0],[174,86.8,1],[164.5,60.3,0],[174,72.2,1],[156,52.7,0],[177,71.6,1],[160,74.3,0],[186,84.8,1],[163,62,0],[167,68.2,1],[165.7,73.1,0],[171.8,66.1,1],[161,80,0],[182,72,1],[162,54.7,0],[167,64.6,1],[166,53.2,0],[177.8,74.8,1],[174,75.7,0],[164.5,70,1],[172.7,61.1,0],[192,101.6,1],[167.6,55.7,0],[175.5,63.2,1],[151.1,48.7,0],[171.2,79.1,1],[164.5,52.3,0],[181.6,78.9,1],[163.5,50,0],[167.4,67.7,1],[152,59.3,0],[181.1,66,1],[169,62.5,0],[177,68.2,1],[164,55.7,0],[174.5,63.9,1],[161.2,54.8,0],[177.5,72,1],[155,45.9,0],[170.5,56.8,1],[170,70.6,0],[182.4,74.5,1],[176.2,67.2,0],[197.1,90.9,1],[170,69.4,0],[180.1,93,1],[162.5,58.2,0],[175.5,80.9,1],[170.3,64.8,0],[180.6,72.7,1],[164.1,71.6,0],[184.4,68,1],[169.5,52.8,0],[175.5,70.9,1],[163.2,59.8,0],[180.6,72.5,1],[154.5,49,0],[177,72.5,1],[159.8,50,0],[177.1,83.4,1],[173.2,69.2,0],[181.6,75.5,1],[170,55.9,0],[176.5,73,1],[161.4,63.4,0],[175,70.2,1],[169,58.2,0],[174,73.4,1],[166.2,58.6,0],[165.1,70.5,1],[159.4,45.7,0],[177,68.9,1],[162.5,52.2,0],[192,102.3,1],[159,48.6,0],[176.5,68.4,1],[162.8,57.8,0],[169.4,65.9,1],[159,55.6,0],[182.1,75.7,1],[179.8,66.8,0],[179.8,84.5,1],[162.9,59.4,0],[175.3,87.7,1],[161,53.6,0],[184.9,86.4,1],[151.1,73.2,0],[177.3,73.2,1],[168.2,53.4,0],[167.4,53.9,1],[168.9,69,0],[178.1,72,1],[173.2,58.4,0],[168.9,55.5,1],[171.8,56.2,0],[157.2,58.4,1],[178,70.6,0],[180.3,83.2,1],[164.3,59.8,0],[170.2,72.7,1],[163,72,0],[177.8,64.1,1],[168.5,65.2,0],[172.7,72.3,1],[166.8,56.6,0],[165.1,65,1],[172.7,105.2,0],[186.7,86.4,1],[163.5,51.8,0],[165.1,65,1],[169.4,63.4,0],[174,88.6,1],[167.8,59,0],[175.3,84.1,1],[159.5,47.6,0],[185.4,66.8,1],[167.6,63,0],[177.8,75.5,1],[161.2,55.2,0],[180.3,93.2,1],[160,45,0],[180.3,82.7,1],[163.2,54,0],[177.8,58,1],[162.2,50.2,0],[177.8,79.5,1],[161.3,60.2,0],[177.8,78.6,1],[149.5,44.8,0],[177.8,71.8,1],[157.5,58.8,0],[177.8,116.4,1],[163.2,56.4,0],[163.8,72.2,1],[172.7,62,0],[188,83.6,1],[155,49.2,0],[198.1,85.5,1],[156.5,67.2,0],[175.3,90.9,1],[164,53.8,0],[166.4,85.9,1],[160.9,54.4,0],[190.5,89.1,1],[162.8,58,0],[166.4,75,1],[167,59.8,0],[177.8,77.7,1],[160,54.8,0],[179.7,86.4,1],[160,43.2,0],[172.7,90.9,1],[168.9,60.5,0],[190.5,73.6,1],[158.2,46.4,0],[185.4,76.4,1],[156,64.4,0],[168.9,69.1,1],[160,48.8,0],[167.6,84.5,1],[167.1,62.2,0],[175.3,64.5,1],[158,55.5,0],[170.2,69.1,1],[167.6,57.8,0],[190.5,108.6,1],[156,54.6,0],[177.8,86.4,1],[162.1,59.2,0],[190.5,80.9,1],[173.4,52.7,0],[177.8,87.7,1],[159.8,53.2,0],[184.2,94.5,1],[170.5,64.5,0],[176.5,80.2,1],[159.2,51.8,0],[177.8,72,1],[157.5,56,0],[180.3,71.4,1],[161.3,63.6,0],[171.4,72.7,1],[162.6,63.2,0],[172.7,84.1,1],[160,59.5,0],[172.7,76.8,1],[168.9,56.8,0],[177.8,63.6,1],[165.1,64.1,0],[177.8,80.9,1],[162.6,50,0],[182.9,80.9,1],[165.1,72.3,0],[170.2,85.5,1],[166.4,55,0],[167.6,68.6,1],[160,55.9,0],[175.3,67.7,1],[152.4,60.4,0],[165.1,66.4,1],[170.2,69.1,0],[185.4,102.3,1],[162.6,84.5,0],[181.6,70.5,1],[170.2,55.9,0],[172.7,95.9,1],[158.8,55.5,0],[190.5,84.1,1],[172.7,69.5,0],[179.1,87.3,1],[167.6,76.4,0],[175.3,71.8,1],[162.6,61.4,0],[170.2,65.9,1],[167.6,65.9,0],[193,95.9,1],[156.2,58.6,0],[171.4,91.4,1],[175.2,66.8,0],[177.8,81.8,1],[172.1,56.6,0],[177.8,96.8,1],[162.6,58.6,0],[167.6,69.1,1],[160,55.9,0],[167.6,82.7,1],[165.1,59.1,0],[180.3,75.5,1],[182.9,81.8,0],[182.9,79.5,1],[166.4,70.7,0],[176.5,73.6,1],[165.1,56.8,0],[186.7,91.8,1],[177.8,60,0],[188,84.1,1],[165.1,58.2,0],[188,85.9,1],[175.3,72.7,0],[177.8,81.8,1],[154.9,54.1,0],[174,82.5,1],[158.8,49.1,0],[177.8,80.5,1],[172.7,75.9,0],[171.4,70,1],[168.9,55,0],[185.4,81.8,1],[161.3,57.3,0],[185.4,84.1,1],[167.6,55,0],[188,90.5,1],[165.1,65.5,0],[188,91.4,1],[175.3,65.5,0],[182.9,89.1,1],[157.5,48.6,0],[176.5,85,1],[163.8,58.6,0],[175.3,69.1,1],[167.6,63.6,0],[175.3,73.6,1],[165.1,55.2,0],[188,80.5,1],[165.1,62.7,0],[188,82.7,1],[168.9,56.6,0],[175.3,86.4,1],[162.6,53.9,0],[170.5,67.7,1],[164.5,63.2,0],[179.1,92.7,1],[176.5,73.6,0],[177.8,93.6,1],[168.9,62,0],[175.3,70.9,1],[175.3,63.6,0],[182.9,75,1],[159.4,53.2,0],[170.8,93.2,1],[160,53.4,0],[188,93.2,1],[170.2,55,0],[180.3,77.7,1],[162.6,70.5,0],[177.8,61.4,1],[167.6,54.5,0],[185.4,94.1,1],[162.6,54.5,0],[168.9,75,1],[160.7,55.9,0],[185.4,83.6,1],[160,59,0],[180.3,85.5,1],[157.5,63.6,0],[174,73.9,1],[162.6,54.5,0],[167.6,66.8,1],[152.4,47.3,0],[182.9,87.3,1],[170.2,67.7,0],[160,72.3,1],[165.1,80.9,0],[180.3,88.6,1],[172.7,70.5,0],[167.6,75.5,1],[165.1,60.9,0],[186.7,101.4,1],[170.2,63.6,0],[175.3,91.1,1],[170.2,54.5,0],[175.3,67.3,1],[170.2,59.1,0],[175.9,77.7,1],[161.3,70.5,0],[175.3,81.8,1],[167.6,52.7,0],[179.1,75.5,1],[167.6,62.7,0],[181.6,84.5,1],[165.1,86.3,0],[177.8,76.6,1],[162.6,66.4,0],[182.9,85,1],[152.4,67.3,0],[177.8,102.5,1],[168.9,63,0],[184.2,77.3,1],[170.2,73.6,0],[179.1,71.8,1],[175.2,62.3,0],[176.5,87.9,1],[175.2,57.7,0],[188,94.3,1],[160,55.4,0],[174,70.9,1],[165.1,104.1,0],[167.6,64.5,1],[174,55.5,0],[170.2,77.3,1],[170.2,77.3,0],[167.6,72.3,1],[160,80.5,0],[188,87.3,1],[167.6,64.5,0],[174,80,1],[167.6,72.3,0],[176.5,82.3,1],[167.6,61.4,0],[180.3,73.6,1],[154.9,58.2,0],[167.6,74.1,1],[162.6,81.8,0],[188,85.9,1],[175.3,63.6,0],[180.3,73.2,1],[171.4,53.4,0],[167.6,76.3,1],[157.5,54.5,0],[183,65.9,1],[165.1,53.6,0],[183,90.9,1],[160,60,0],[179.1,89.1,1],[174,73.6,0],[170.2,62.3,1],[162.6,61.4,0],[177.8,82.7,1],[174,55.5,0],[179.1,79.1,1],[162.6,63.6,0],[190.5,98.2,1],[161.3,60.9,0],[177.8,84.1,1],[156.2,60,0],[180.3,83.2,1],[149.9,46.8,0],[180.3,83.2,1],[169.5,57.3,0],[160,64.1,0],[175.3,63.6,0],[169.5,67.3,0],[160,75.5,0],[172.7,68.2,0],[162.6,61.4,0],[157.5,76.8,0],[176.5,71.8,0],[164.4,55.5,0],[160.7,48.6,0],[174,66.4,0],[163.8,67.3,0]];
+            // 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>