<!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="./custom-transition-texture.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>


        <!-- <div id="texture-bar-texture-maker"></div> -->

        <div id="spiral-fixed-extent"></div>
        <div id="spiral-dynamic-extent"></div>
        <div id="texture-bar-by-clipPath"></div>
        <div id="no-animation"></div>
        <div id="enter-animation-and-merge"></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>
        <div id="leave-animation"></div>


<!--
        <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'
            ], function (echarts) {
                var _animationDuration = 5000;
                var _animationDurationUpdate = 7000;
                var _animationEasingUpdate = 'elasticOut';
                var _angleLabel = ['Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', 'Libra', 'Scorpius', 'Sagittarius', 'Capricornus', 'Aquarius', 'Pisces'];
                var _valOnRoundAngle = _angleLabel.length;
                var _valOnAngleStep = _valOnRoundAngle / 90;
                var _barWidthValue = 0.4;
                var _valOnRadiusStep = 4;

                var _colors = [
                    { border: 'green', inner: 'rgba(0,152,0,0.6)' },
                    { border: 'red', inner: 'rgba(152,0,0,0.6)' },
                    { border: 'blue', inner: 'rgba(0,0, 152,0.6)' },
                ];
                var _currentDataIndex = 0;
                var _datasourceList = [
                    [[3, 6, 9]],
                    [[12, 16, 14]],
                    [[17, 22, 19]],
                ];
                var _barValOnRadiusList = [1, 2, 3];

                function getMaxRadius() {
                    var radius = 0;
                    for (var k = 0; k < _barValOnRadiusList.length; k++) {
                        for (var i = 0; i < _datasourceList.length; i++) {
                            var row = _datasourceList[i][0];
                            for (var j = 0; j < row.length; j++) {
                                var valOnAngle = row[j];
                                radius = Math.max(
                                    radius,
                                    getSpiralValueOnRadius(_barValOnRadiusList[k], valOnAngle)
                                );
                            }
                        }
                    }
                    return Math.ceil(radius * 1.2);
                }

                function getSpiralValueOnRadius(valOnRadius, valOnAngle) {
                    return valOnRadius + _valOnRadiusStep * (valOnAngle / _valOnRoundAngle);
                }

                function renderItem(params, api) {
                    var children = [];

                    addShapes(api, children, _barValOnRadiusList[0], api.value(0), _colors[0]);
                    addShapes(api, children, _barValOnRadiusList[1], api.value(1), _colors[1]);
                    addShapes(api, children, _barValOnRadiusList[2], api.value(2), _colors[2]);

                    return {
                        type: 'group',
                        children: children
                    };
                }

                function addShapes(api, children, valOnRadius, valOnAngle, color) {
                    addPolygon(api, children, valOnRadius, valOnAngle, color);
                    addLabel(api, children, valOnRadius, valOnAngle, color);
                }

                function addPolygon(api, children, valOnRadius, valOnAngle, color) {
                    children.push({
                        type: 'polygon',
                        shape: {
                            points: makeShapePoints(api, valOnRadius, valOnAngle)
                        },
                        extra: {
                            valOnAngle: valOnAngle,
                            transition: 'valOnAngle'
                        },
                        style: {
                            lineWidth: 1,
                            fill: color.inner,
                            stroke: color.border
                        },
                        during: function (apiDuring) {
                            apiDuring.setShape('points', makeShapePoints(
                                api, valOnRadius, apiDuring.getExtra('valOnAngle')
                            ));
                        }
                    });
                }

                function makeShapePoints(api, valOnRadius, valOnAngle) {
                    var points = [];
                    for (var iAngleVal = 0, end = valOnAngle + _valOnAngleStep; iAngleVal < end; iAngleVal += _valOnAngleStep) {
                        iAngleVal > valOnAngle && (iAngleVal = valOnAngle);
                        var iRadiusVal = getSpiralValueOnRadius(valOnRadius - _barWidthValue, iAngleVal);
                        var point = api.coord([iRadiusVal, iAngleVal]).slice(0, 2);
                        points.push(point);
                    }
                    for (var iAngleVal = valOnAngle; iAngleVal > -_valOnAngleStep; iAngleVal -= _valOnAngleStep) {
                        iAngleVal < 0 && (iAngleVal = 0);
                        var iRadiusVal = getSpiralValueOnRadius(valOnRadius + _barWidthValue, iAngleVal);
                        var point = api.coord([iRadiusVal, iAngleVal]).slice(0, 2);
                        points.push(point);
                    }
                    return points;
                }

                function addLabel(api, children, valOnRadius, valOnAngle, color) {
                    var point = makeLabelPosition(api, valOnRadius, valOnAngle);
                    children.push({
                        type: 'text',
                        x: point[0],
                        y: point[1],
                        transition: [],
                        extra: {
                            valOnAngle: valOnAngle,
                            transition: 'valOnAngle'
                        },
                        style: {
                            text: getText(valOnAngle),
                            fill: color.inner,
                            stroke: '#fff',
                            lineWidth: 3,
                            fontSize: 16,
                            align: 'center',
                            verticalAlign: 'middle'
                        },
                        z2: 50,
                        during: function (apiDuring) {
                            var iValOnAngle = apiDuring.getExtra('valOnAngle');
                            var point = makeLabelPosition(api, valOnRadius, iValOnAngle);
                            apiDuring.setTransform('x', point[0]).setTransform('y', point[1]);
                            apiDuring.setStyle('text', getText(iValOnAngle));
                        }
                    });

                    function getText(iValOnAngle) {
                        return (iValOnAngle / _valOnRoundAngle * 100).toFixed(0) + '%'
                    }
                }

                function makeLabelPosition(api, valOnRadius, valOnAngle) {
                    var iRadiusVal = getSpiralValueOnRadius(valOnRadius, valOnAngle);
                    return api.coord([iRadiusVal, valOnAngle + 1 / iRadiusVal / (2 * Math.PI) * _valOnRoundAngle]);
                }

                var option = {
                    // animation: false,
                    animationDuration: _animationDuration,
                    animationDurationUpdate: _animationDurationUpdate,
                    animationEasingUpdate: _animationEasingUpdate,
                    dataset: {
                        source: _datasourceList[_currentDataIndex]
                    },
                    angleAxis: {
                        type: 'value',
                        // splitLine: { show: false },
                        splitArea: {show: true},
                        axisLabel: {
                            formatter: function(val) {
                                return _angleLabel[val];
                            },
                            color: 'rgba(0,0,0,0.2)'
                        },
                        axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
                        min: 0,
                        max: _valOnRoundAngle
                    },
                    radiusAxis: {
                        type: 'value',
                        splitLine: { show: false },
                        axisLabel: { color: 'rgba(0,0,0,0.2)' },
                        axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
                        min: 0,
                        max: getMaxRadius()
                    },
                    polar: {},
                    series: [{
                        type: 'custom',
                        coordinateSystem: 'polar',
                        renderItem: renderItem
                    }]
                };

                var chart = testHelper.create(echarts, 'spiral-fixed-extent', {
                    title: [
                        'Spiral race with fixed radius extent.',
                        'Click **next**, polygon animation should be corrent.',
                    ],
                    option: option,
                    buttons: [{
                        text: 'next',
                        onclick: function () {
                            _currentDataIndex++;
                            _currentDataIndex >= _datasourceList.length && (_currentDataIndex = 0);
                            chart.setOption({
                                dataset: {
                                    source: _datasourceList[_currentDataIndex]
                                }
                            });
                        }
                    }, {
                        text: 'enable animation',
                        onclick: function () {
                            chart.setOption({ animation: true });
                        }
                    }, {
                        text: 'disable animation',
                        onclick: function () {
                            chart.setOption({ animation: false });
                        }
                    }]
                });
            });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var _animationDuration = 5000;
                var _animationDurationUpdate = 7000;
                // var _animationEasingUpdate = 'elasticOut';
                var _animationEasingUpdate = 'quadraticOut';
                var _radianLabels = ['Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', 'Libra', 'Scorpius', 'Sagittarius', 'Capricornus', 'Aquarius', 'Pisces'];
                var _valOnRoundRadian = _radianLabels.length;
                var _radianStep = Math.PI / 45;
                var _barWidthValue = 0.4;
                var _valOnRadiusStep = 4;
                // angleAxis.startAngle is 90 by default.
                var _startRadian = Math.PI / 2;

                var _colors = [
                    { border: 'green', inner: 'rgba(0,152,0,0.6)' },
                    { border: 'red', inner: 'rgba(152,0,0,0.6)' },
                    { border: 'blue', inner: 'rgba(0,0, 152,0.6)' },
                ];
                var _currentDataIndex = 0;
                var _datasourceList = [
                    [ [1, 3], [2, 6], [3, 9] ], // datasource 0
                    [ [1, 12], [2, 16], [3, 14] ], // datasource 1
                    [ [1, 17], [2, 22], [3, 19] ],  // datasource 2
                    [ [1, 19], [2, 33], [3, 24] ],
                    [ [1, 24], [2, 42], [3, 29] ],
                    [ [1, 27], [2, 47], [3, 41] ],
                    [ [1, 36], [2, 52], [3, 52] ],
                    [ [1, 46], [2, 59], [3, 63] ],
                    [ [1, 60], [2, 63], [3, 69] ],
                ];
                var _barNamesByOrdinal = {1: 'A', 2: 'B', 3: 'C'};

                function getMaxRadius() {
                    var radius = 0;
                    var datasource = _datasourceList[_currentDataIndex];
                    for (var j = 0; j < datasource.length; j++) {
                        var dataItem = datasource[j];
                        radius = Math.max(radius, getSpiralValueOnRadius(dataItem[0], dataItem[1]));
                    }
                    return Math.ceil(radius * 1.2);
                }

                function getSpiralValueOnRadius(valOnStartRadius, valOnEndAngle) {
                    return valOnStartRadius + _valOnRadiusStep * (valOnEndAngle / _valOnRoundRadian);
                }
                function getSpiralRadius(startRadius, endRadian, radiusStep) {
                    return startRadius + radiusStep * ((_startRadian - endRadian) / (Math.PI * 2));
                }

                function renderItem(params, api) {
                    var children = [];
                    var dataIdx = params.dataIndex;
                    addShapes(params, api, children, api.value(0), api.value(1), _colors[dataIdx]);

                    return {
                        type: 'group',
                        children: children
                    };
                }

                function addShapes(params, api, children, valOnStartRadius, valOnEndRadian, color) {
                    var coords = api.coord([valOnStartRadius, valOnEndRadian]);
                    var startRadius = coords[2];
                    var endRadian = coords[3];
                    var widthRadius = api.coord([_barWidthValue, 0])[2];
                    addPolygon(params, children, widthRadius, startRadius, endRadian, color);
                    addLabel(params, children, widthRadius, startRadius, endRadian, color);
                }

                function addPolygon(params, children, widthRadius, startRadius, endRadian, color) {
                    children.push({
                        type: 'polygon',
                        shape: {
                            points: makeShapePoints(params, widthRadius, startRadius, endRadian)
                        },
                        extra: {
                            widthRadius: widthRadius,
                            startRadius: startRadius,
                            endRadian: endRadian,
                            transition: ['widthRadius', 'startRadius', 'endRadian']
                        },
                        style: {
                            lineWidth: 1,
                            fill: color.inner,
                            stroke: color.border
                        },
                        during: function (apiDuring) {
                            apiDuring.setShape('points', makeShapePoints(
                                params,
                                apiDuring.getExtra('widthRadius'),
                                apiDuring.getExtra('startRadius'),
                                apiDuring.getExtra('endRadian')
                            ));
                        }
                    });
                }

                function makeShapePoints(params, widthRadius, startRadius, endRadian) {
                    var points = [];
                    var radiusStep = getRadiusStepByWidth(widthRadius);
                    // angleAxis.clockwise is true by default. So when rotate clickwisely, radian decreases.
                    for (
                        var iRadian = _startRadian, end = endRadian - _radianStep;
                        iRadian > end;
                        iRadian -= _radianStep
                    ) {
                        iRadian < endRadian && (iRadian = endRadian);
                        var iRadius = getSpiralRadius(startRadius - widthRadius, iRadian, radiusStep);
                        points.push(convertToPolarPoint(params, iRadius, iRadian));
                    }
                    for (
                        var iRadian = endRadian;
                        iRadian < _startRadian + _radianStep;
                        iRadian += _radianStep
                    ) {
                        iRadian > _startRadian && (iRadian = _startRadian);
                        var iRadius = getSpiralRadius(startRadius + widthRadius, iRadian, radiusStep);
                        points.push(convertToPolarPoint(params, iRadius, iRadian));
                    }
                    return points;
                }

                function getRadiusStepByWidth(widthRadius) {
                    return widthRadius / _barWidthValue * _valOnRadiusStep;
                }

                function addLabel(params, children, widthRadius, startRadius, endRadian, color) {
                    var point = makeLabelPosition(params, widthRadius, startRadius, endRadian);
                    children.push({
                        type: 'text',
                        x: point[0],
                        y: point[1],
                        transition: [],
                        extra: {
                            startRadius: startRadius,
                            endRadian: endRadian,
                            widthRadius: widthRadius,
                            transition: ['startRadius', 'endRadian', 'widthRadius']
                        },
                        style: {
                            text: makeText(endRadian),
                            fill: color.inner,
                            stroke: '#fff',
                            lineWidth: 3,
                            fontSize: 12,
                            align: 'center',
                            verticalAlign: 'middle',
                            rich: {
                                round: { fontSize: 16 },
                                percent: { fontSize: 14 }
                            }
                        },
                        z2: 50,
                        during: function (apiDuring) {
                            var endRadian = apiDuring.getExtra('endRadian');
                            var point = makeLabelPosition(
                                params,
                                apiDuring.getExtra('widthRadius'),
                                apiDuring.getExtra('startRadius'),
                                endRadian
                            );
                            apiDuring.setTransform('x', point[0]).setTransform('y', point[1]);
                            apiDuring.setStyle('text', makeText(endRadian));
                        }
                    });

                    function makeText(endRadian) {
                        var radian = _startRadian - endRadian;
                        var PI2 = Math.PI * 2;
                        var round = Math.floor(radian / PI2);
                        var percent = (((radian / PI2) % 1) * 100).toFixed(1) + '%';
                        return 'Round {round|' + round + '}\n{percent|' + percent + '}';
                    }
                }

                function makeLabelPosition(params, widthRadius, startRadius, endRadian) {
                    var radiusStep = getRadiusStepByWidth(widthRadius);
                    var iRadius = getSpiralRadius(startRadius, endRadian, radiusStep);
                    return convertToPolarPoint(params, iRadius, endRadian - 10 / iRadius);
                }

                function convertToPolarPoint(renderItemParams, radius, radian) {
                    return [
                        Math.cos(radian) * radius + renderItemParams.coordSys.cx,
                        -Math.sin(radian) * radius + renderItemParams.coordSys.cy
                    ];
                }

                var option = {
                    animationDuration: _animationDuration,
                    animationDurationUpdate: _animationDurationUpdate,
                    animationEasingUpdate: _animationEasingUpdate,
                    dataset: {
                        source: _datasourceList[_currentDataIndex]
                    },
                    tooltip: {},
                    angleAxis: {
                        type: 'value',
                        splitArea: { show: true },
                        axisLabel: {
                            formatter: function(val) {
                                return _radianLabels[val];
                            },
                            color: 'rgba(0,0,0,0.2)'
                        },
                        axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
                        min: 0,
                        max: _valOnRoundRadian
                    },
                    radiusAxis: {
                        type: 'value',
                        interval: 1,
                        splitLine: { show: false },
                        axisLabel: {
                            color: 'rgba(0,0,0,0.6)',
                            formatter: function (value) {
                                return _barNamesByOrdinal[value] || '';
                            }
                        },
                        axisTick: { show: false },
                        axisLine: { lineStyle: { color: 'rgba(0,0,0,0.2)' } },
                        min: 0,
                        max: getMaxRadius()
                    },
                    polar: {},
                    series: [{
                        type: 'custom',
                        coordinateSystem: 'polar',
                        renderItem: renderItem
                    }]
                };

                var chart = testHelper.create(echarts, 'spiral-dynamic-extent', {
                    title: [
                        'Spiral race with dynamic radius extent.',
                        'Click **next**. Polygon animation should be corrent.',
                    ],
                    option: option,
                    buttons: [{
                        text: 'next',
                        onclick: function () {
                            _currentDataIndex++;
                            _currentDataIndex >= _datasourceList.length && (_currentDataIndex = 0);
                            chart.setOption({
                                dataset: {
                                    source: _datasourceList[_currentDataIndex]
                                },
                                radiusAxis: {
                                    max: getMaxRadius()
                                }
                            });
                        }
                    }, {
                        text: 'enable animation',
                        onclick: function () {
                            chart.setOption({ animation: true });
                        }
                    }, {
                        text: 'disable animation',
                        onclick: function () {
                            chart.setOption({ animation: false });
                        }
                    }]
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {
                var _animationDuration = 1000;
                var _animationDurationUpdate = 1000;
                var _animationEasingUpdate = 'elasticOut';
                var _datasourceList = [
                    [[1, 156]],
                    [[1, 54]],
                    [[1, 131]],
                    [[1, 32]],
                    [[1, 103]],
                    [[1, 66]],
                ];
                var _valOnRadianMax = 200;
                var _outerRadius = 100;
                var _innerRadius = 85;
                var _pointerInnerRadius = 40;
                var _insidePanelRadius = 65;
                var _currentDataIndex = 0;

                function renderItem(params, api) {
                    var children = [];
                    var dataIdx = params.dataIndex;
                    var valOnRadian = api.value(1);
                    var coords = api.coord([api.value(0), valOnRadian]);
                    var polarEndRadian = coords[3];
                    var imageStyle = {
                        image: window.BAR_ROUND_GRADIENT_TEXTURE,
                        x: params.coordSys.cx - _outerRadius,
                        y: params.coordSys.cy - _outerRadius,
                        width: _outerRadius * 2,
                        height: _outerRadius * 2
                    };

                    return {
                        type: 'group',
                        children: [{
                            type: 'image',
                            style: imageStyle,
                            clipPath: {
                                type: 'sector',
                                shape: {
                                    cx: params.coordSys.cx,
                                    cy: params.coordSys.cy,
                                    r: _outerRadius,
                                    r0: _innerRadius,
                                    startAngle: 0,
                                    // polor: anticlockwise-positive radian
                                    // sector: clockwise-positive radian
                                    endAngle: -polarEndRadian,
                                    transition: 'endAngle',
                                    enterFrom: { endAngle: 0 }
                                }
                            }
                        }, {
                            type: 'image',
                            style: imageStyle,
                            clipPath: {
                                type: 'polygon',
                                shape: {
                                    points: makePionterPoints(params, polarEndRadian),
                                },
                                extra: {
                                    polarEndRadian: polarEndRadian,
                                    transition: 'polarEndRadian',
                                    enterFrom: { polarEndRadian: 0 }
                                },
                                during: function (apiDuring) {
                                    apiDuring.setShape(
                                        'points',
                                        makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
                                    );
                                }
                            },
                        }, {
                            type: 'circle',
                            shape: {
                                cx: params.coordSys.cx,
                                cy: params.coordSys.cy,
                                r: _insidePanelRadius
                            },
                            style: {
                                fill: '#fff',
                                shadowBlur: 25,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowColor: 'rgb(0,0,50)'
                            }
                        }, {
                            type: 'text',
                            extra: {
                                valOnRadian: valOnRadian,
                                transition: 'valOnRadian',
                                enterFrom: { valOnRadian: 0 }
                            },
                            style: {
                                text: makeText(valOnRadian),
                                fontSize: 40,
                                x: params.coordSys.cx,
                                y: params.coordSys.cy,
                                fill: 'rgb(0,50,190)',
                                align: 'center',
                                verticalAlign: 'middle',
                                enterFrom: { opacity: 0 }
                            },
                            during: function (apiDuring) {
                                apiDuring.setStyle('text', makeText(apiDuring.getExtra('valOnRadian')));
                            }
                        }]
                    };
                }

                function convertToPolarPoint(renderItemParams, radius, radian) {
                    return [
                        Math.cos(radian) * radius + renderItemParams.coordSys.cx,
                        -Math.sin(radian) * radius + renderItemParams.coordSys.cy
                    ];
                }

                function makePionterPoints(renderItemParams, polarEndRadian) {
                    return [
                        convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
                        convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian + Math.PI * 0.03),
                        convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
                    ];
                }

                function makeText(valOnRadian) {
                    // Validate additive animation calc.
                    if (valOnRadian < -10) {
                        alert('illegal during val: ' + valOnRadian);
                    }
                    return (valOnRadian / _valOnRadianMax * 100).toFixed(0) + '%'
                }

                var option = {
                    animationEasing: _animationEasingUpdate,
                    animationDuration: _animationDuration,
                    animationDurationUpdate: _animationDurationUpdate,
                    animationEasingUpdate: _animationEasingUpdate,
                    dataset: {
                        source: _datasourceList[_currentDataIndex]
                    },
                    tooltip: {},
                    angleAxis: {
                        type: 'value',
                        startAngle: 0,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { show: false },
                        splitLine: { show: false },
                        min: 0,
                        max: _valOnRadianMax
                    },
                    radiusAxis: {
                        type: 'value',
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { show: false },
                        splitLine: { show: false }
                    },
                    polar: {},
                    series: [{
                        type: 'custom',
                        coordinateSystem: 'polar',
                        renderItem: renderItem
                    }]
                };

                var chart = testHelper.create(echarts, 'texture-bar-by-clipPath', {
                    title: [
                        'Angle gradient | clipPath animation',
                        'click **next** to check the transition animation in both bar and text.'
                    ],
                    option: option,
                    height: 300,
                    buttons: [{
                        text: 'next',
                        onclick: function () {
                            _currentDataIndex++;
                            _currentDataIndex >= _datasourceList.length && (_currentDataIndex = 0);
                            chart.setOption({
                                dataset: {
                                    source: _datasourceList[_currentDataIndex]
                                }
                            });
                        }
                    }]
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {

                var option = {
                    animation: false,
                    xAxis: {
                        max: 600,
                    },
                    yAxis: {
                    },
                    dataZoom: [
                        { type: 'slider', start: 10, end: 60 },
                        { type: 'inside', start: 10, end: 60 }
                    ],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            var pos = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: 'group',
                                x: pos[0],
                                y: pos[1],
                                children: [{
                                    type: 'rect',
                                    shape: {
                                        x: -50,
                                        y: 50,
                                        width: 100,
                                        height: 50,
                                        r: 10
                                    },
                                    style: {
                                        fill: 'blue',
                                    }
                                }, {
                                    type: 'circle',
                                    shape: {
                                        cx: -50,
                                        cy: 50,
                                        r: 30
                                    },
                                    style: {
                                        fill: 'green',
                                    },
                                    textConfig: {
                                        position: 'bottom'
                                    },
                                    textContent: {
                                        style: {
                                            text: 'xxxx',
                                            fill: 'black',
                                        }
                                    }
                                }]
                            };
                        },
                        data: [[221, 333], [129, 312]]
                    }]
                };

                var chart = testHelper.create(echarts, 'no-animation', {
                    title: [
                        'No-animation',
                        '(1) Move dataZoom, position should have no transition animation but move normally.',
                        '(2) Use dataZoom hide a data item, and then show it.',
                        '(3) click button to setOption merge: ',
                        '   circle **disappears** and rect become **red border black bg**',
                        '(4) **Repeat (2)** after merged, should be correct.'
                    ],
                    height: 300,
                    option: option,
                    buttons: [{
                        text: 'go',
                        onclick: function () {
                            chart.dispatchAction({type: 'dataZoom', start: 10, end: 60});
                        }
                    }, {
                        text: 'click me to merge children',
                        onclick: function () {
                            chart.setOption({
                                series: {
                                    type: 'custom',
                                    renderItem: function (params, api) {
                                        var pos = api.coord([api.value(0), api.value(1)]);
                                        return {
                                            type: 'group',
                                            x: pos[0],
                                            y: pos[1],
                                            children: [{
                                                type: 'rect',
                                                shape: {
                                                    x: -50,
                                                    y: 50,
                                                    width: 100,
                                                    height: 50,
                                                    r: 10
                                                },
                                                style: {
                                                    stroke: 'red',
                                                    lineWidth: 5
                                                }
                                            }]
                                        };
                                    }
                                }
                            });
                        }
                    }]
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {

                var animationDuration = 5000;
                var animationDurationUpdate = 4000;
                var option = {
                    animationDuration: animationDuration,
                    animationDurationUpdate: animationDurationUpdate,
                    xAxis: {
                        max: 600
                    },
                    yAxis: {
                    },
                    dataZoom: [
                        { type: 'slider', start: 10, end: 60 },
                        { type: 'inside', start: 10, end: 60 }
                    ],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            var pos = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: 'group',
                                x: pos[0],
                                y: pos[1],
                                children: [{
                                    type: 'rect',
                                    shape: {
                                        x: -50,
                                        y: 50,
                                        width: 100,
                                        height: 50,
                                        r: 10
                                    },
                                    style: {
                                        fill: 'blue',
                                        // enterFrom: { opacity: 0 }
                                    }
                                }, {
                                    type: 'circle',
                                    shape: {
                                        cx: -50,
                                        cy: 50,
                                        r: 30
                                    },
                                    style: {
                                        fill: 'green',
                                        // enterFrom: { opacity: 0 }
                                    },
                                    textConfig: {
                                        position: 'bottom'
                                    },
                                    textContent: {
                                        style: {
                                            text: 'xxxx',
                                            fill: 'black',
                                            // enterFrom: { opacity: 0 }
                                        }
                                    }
                                }]
                            };
                        },
                        data: [[221, 333], [129, 312]]
                    }]
                };

                var chart = testHelper.create(echarts, 'enter-animation-and-merge', {
                    title: [
                        'Transition animation:',
                        '(1) Move dataZoom, position should have transition animation.',
                        '(2) Use dataZoom hide a data item, and then show it, ensure the **fade in** animation not be interupted.',
                        '(3) click button to setOption merge: ',
                        '   circle **disappears** and rect become **red border black bg**',
                        '(4) **Repeat (2)** after merged, should be correct.'
                    ],
                    height: 300,
                    option: option,
                    buttons: [{
                        text: 'click me to merge children',
                        onclick: function () {
                            chart.setOption({
                                series: {
                                    type: 'custom',
                                    renderItem: function (params, api) {
                                        var pos = api.coord([api.value(0), api.value(1)]);
                                        return {
                                            type: 'group',
                                            x: pos[0],
                                            y: pos[1],
                                            children: [{
                                                type: 'rect',
                                                shape: {
                                                    x: -50,
                                                    y: 50,
                                                    width: 100,
                                                    height: 50,
                                                    r: 10
                                                },
                                                style: {
                                                    stroke: 'red',
                                                    lineWidth: 5
                                                }
                                            }]
                                        };
                                    }
                                }
                            });
                        }
                    }]
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {
                var weatherIcons = {
                    'Sunny': './data/weather/sunny_128.png',
                    'Cloudy': './data/weather/cloudy_128.png',
                    'Showers': './data/weather/showers_128.png'
                };

                var animationDuration = 5000;
                var animationDurationUpdate = 4000;
                var option = {
                    animationDuration: animationDuration,
                    animationDurationUpdate: animationDurationUpdate,
                    xAxis: {
                        max: 500
                    },
                    yAxis: {
                    },
                    dataZoom: [
                        { type: 'slider', end: 60 },
                        { type: 'inside', end: 60 }
                    ],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            var pos = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: 'group',
                                x: pos[0],
                                y: pos[1],
                                enterFrom: {
                                    y: 0
                                },
                                children: [{
                                    type: 'image',
                                    style: {
                                        image: weatherIcons.Cloudy,
                                        height: 50
                                    }
                                }]
                            };
                        },
                        data: [[121, 133], [129, 312]]
                    }]
                };

                var chart = testHelper.create(echarts, 'enter-animation2', {
                    title: [
                        '(1) Move dataZoom, position should have transition animation.',
                        '(2) Use dataZoom hide a data item, and then show it, ensure the **drop** animation not be interupted.',
                    ],
                    height: 300,
                    option: option
                });
            });
        </script>


        <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 = {
                    'Sunny': './data/weather/sunny_128.png',
                    'Cloudy': './data/weather/cloudy_128.png',
                    'Showers': './data/weather/showers_128.png'
                };

                var animationDuration = 2000;
                var animationDurationUpdate = 1000;
                var option = {
                    animationDuration: animationDuration,
                    animationDurationUpdate: animationDurationUpdate,
                    xAxis: {
                        max: 10000
                    },
                    yAxis: {
                    },
                    dataZoom: [
                        { type: 'slider', start: 20, end: 50 },
                        { type: 'inside', start: 20, end: 50 }
                    ],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            var pos = api.coord([api.value(0), api.value(1)]);
                             var width = Math.abs(pos[0] % 200 - 100) + 20;
                            return {
                                type: 'image',
                                x: pos[0],
                                y: pos[1],
                                style: {
                                    image: weatherIcons.Showers,
                                    width: width,
                                    transition: 'width'
                                }
                            };
                        },
                        data: [[3321, 333], [4129, 312]]
                    }]
                };

                var chart = testHelper.create(echarts, 'style-animation', {
                    title: [
                        'Move dataZoom, make sure the "raining-cloud" size animation smooth.',
                    ],
                    height: 300,
                    option: option
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {

                var animationDuration = 4000;
                var animationDurationUpdate = 1000;
                var option = {
                    animationDuration: animationDuration,
                    animationDurationUpdate: animationDurationUpdate,
                    xAxis: {
                        min: -200,
                        max: 400
                    },
                    yAxis: {
                    },
                    dataZoom: [
                        { type: 'slider', start: 20, end: 70 },
                        { type: 'inside', start: 20, end: 70 }
                    ],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            var pos = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: 'group',
                                x: pos[0],
                                y: pos[1],
                                rotation: pos[0] / 500 * Math.PI,
                                transition: ['rotation'],
                                originX: -50,
                                originY: 50,
                                children: [{
                                    type: 'rect',
                                    shape: {
                                        x: -50,
                                        y: 50,
                                        width: 100,
                                        height: 50,
                                        r: 10
                                    },
                                    style: {
                                        fill: 'green',
                                        enterFrom: { opacity: 0 }
                                    }
                                }, {
                                    type: 'circle',
                                    shape: {
                                        cx: -50,
                                        cy: 50,
                                        r: 30
                                    },
                                    style: {
                                        fill: 'blue',
                                        enterFrom: { opacity: 0 }
                                    },
                                    textConfig: {
                                        position: 'bottom'
                                    },
                                    textContent: {
                                        style: {
                                            text: 'xxxx',
                                            fill: 'black',
                                            enterFrom: { opacity: 0 }
                                        }
                                    }
                                }]
                            };
                        },
                        data: [[121, 333], [29, 333]]
                    }]
                };

                var chart = testHelper.create(echarts, 'transform-animation', {
                    height: 300,
                    title: [
                        'Move dataZoom:',
                        'position should **no** transition animation.',
                        'rotatino should **has** transition animation.',
                    ],
                    option: option
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {

                var animationDuration = 4000;
                var animationDurationUpdate = 1000;
                var option = {
                    animationDuration: animationDuration,
                    animationDurationUpdate: animationDurationUpdate,
                    xAxis: {
                        min: -200,
                        max: 400
                    },
                    yAxis: {
                    },
                    dataZoom: [
                        { type: 'slider', start: 20, end: 70 },
                        { type: 'inside', start: 20, end: 70 }
                    ],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            var pos = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: 'rect',
                                position: pos,
                                transition: [],
                                shape: {
                                    x: -50,
                                    y: 50,
                                    width: 100,
                                    height: 50,
                                    r: 10
                                },
                                style: {
                                    fill: 'green',
                                    enterFrom: { opacity: 0 }
                                }
                            };
                        },
                        data: [[121, 333], [29, 333]]
                    }]
                };

                var chart = testHelper.create(echarts, 'transform-animation-disabled', {
                    height: 230,
                    title: [
                        'Move dataZoom:',
                        'transform animation should has been **disabled**.',
                    ],
                    option: option
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {

                var animationDuration = 4000;
                var animationDurationUpdate = 1000;
                var option = {
                    animationDuration: animationDuration,
                    animationDurationUpdate: animationDurationUpdate,
                    xAxis: {
                        min: -200,
                        max: 400
                    },
                    yAxis: {
                    },
                    dataZoom: [
                        { type: 'slider', start: 20, end: 70 },
                        { type: 'inside', start: 20, end: 70 }
                    ],
                    series: [{
                        type: 'custom',
                        renderItem: function (params, api) {
                            var pos = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: 'group',
                                x: pos[0],
                                y: pos[1],
                                rotation: pos[0] / 500 * Math.PI,
                                transition: ['x', 'y', 'rotation'],
                                originX: -50,
                                originY: 50,
                                leaveTo: {scaleX: 0, scaleY: 0},
                                children: [{
                                    type: 'rect',
                                    shape: {
                                        x: -50,
                                        y: 50,
                                        width: 100,
                                        height: 50,
                                        r: 10
                                    },
                                    style: {
                                        fill: 'green',
                                        enterFrom: { opacity: 0 }
                                    }
                                }, {
                                    type: 'circle',
                                    shape: {
                                        cx: -50,
                                        cy: 50,
                                        r: 30
                                    },
                                    style: {
                                        fill: 'blue',
                                        enterFrom: { opacity: 0 }
                                    },
                                    textConfig: {
                                        position: 'bottom'
                                    },
                                    textContent: {
                                        style: {
                                            text: 'xxxx',
                                            fill: 'black',
                                            enterFrom: { opacity: 0 }
                                        }
                                    }
                                }]
                            };
                        },
                        data: [[121, 333], [29, 333]]
                    }]
                };

                var chart = testHelper.create(echarts, 'leave-animation', {
                    height: 300,
                    title: [
                        'Move dataZoom to "out" a item:',
                        '**Leave animation** on scale should be performed on rect and circle, but not on text.',
                        'The item should **finally be removed**.',
                    ],
                    option: option
                });
            });
        </script>


    </body>
</html>