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


        <div id="Legacy_compat_test"></div>
        <div id="insideFill_Stroke_auto_test"></div>
        <div id="textConfig_other_feature_test"></div>
        <div id="insideFill_Stroke_hover_test"></div>
        <div id="z_order_test"></div>
        <div id="hover_style_disable"></div>
        <div id="hover_style_remove"></div>


        <!-- Utils ----------------------------------------------- -->
        <script>
            function createMaker(opt) {
                opt = opt || {};
                var xStart = opt.xCurr || 80;
                var xCurr = xStart;
                var yStart = opt.yCurr || 20;
                var yCurr = yStart;
                var xStep = opt.xStep || 100;
                var yStep = opt.yStep || 65;
                var colCount = 0;
                var yMax = 0;
                var maxCol = opt.maxCol || Infinity;
                var children = [];

                function createRectShape(width, height) {
                    width = width || 20;
                    height = height || 30;
                    return {x: -width / 2, y: 0, width: width, height: height};
                }

                function makeGraphic(text, creators) {
                    var y = yCurr;
                    children.push({
                        type: 'text', x: xCurr, y: y,
                        style: {text: text, fill: '#900', align: 'center', fontSize: 10}
                    });
                    y += yStep;
                    for (var i = 0; i < creators.length; i++) {
                        children.push(creators[i](xCurr, y));
                        y += yStep;
                    }
                    xCurr += xStep;

                    yMax = Math.max(y, yMax);

                    colCount++;
                    if (colCount >= maxCol) {
                        colCount = 0;
                        xCurr = xStart;
                        yCurr = yMax + yStep * 0.7;
                    }
                }

                return {
                    makeGraphic: makeGraphic,
                    createRectShape: createRectShape,
                    children: children
                };
            }

            // opt: {globalColor, backgroundColor}
            function createOption(renderItem, opt) {
                return {
                    animation: false,
                    backgroundColor: opt && opt.backgroundColor,
                    color: opt && opt.globalColor,
                    xAxis: {axisLine: {lineStyle: {color: 'rgba(0,0,0,0.2)'}}, axisLabel: {show: false}, splitLine: {show: false}},
                    yAxis: {axisLine: {lineStyle: {color: 'rgba(0,0,0,0.2)'}}, axisLabel: {show: false}, splitLine: {show: false}},
                    grid: {left: 30},
                    series: {
                        type: 'custom',
                        renderItem: renderItem,
                        data: [[1, 1]]
                    }
                };
            }
        </script>
        <!-- --------------------------------------------------- -->


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

            function renderItem(params, api) {
                var maker = createMaker({xStep: 120, yStep: 60, maxCol: 5});
                var makeGraphic = maker.makeGraphic;
                var createRectShape = maker.createRectShape;

                makeGraphic([
                    'normal: green rect', 'inside orange'
                ].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: {
                                // textPosition not set but by default 'inside'
                                text: 'legacy1', fill: 'green', textFill: 'orange'
                            }
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {style: {text: 'ec5_api', fill: 'orange'}},
                            textConfig: {position: 'inside'}
                        };
                    }
                ]);

                makeGraphic([
                    'normal: green rect', 'inside orange', 'text is number 0', 'should be displayed'
                ].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: {
                                // text is number 0, can be displayed
                                text: 0, fill: 'green', textFill: 'orange'
                            }
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {style: {text: 0, fill: 'orange'}},
                            textConfig: {position: 'inside'}
                        };
                    }
                ]);

                makeGraphic([
                    'normal: green rect', 'inside white/bordered', 'hover: red rect', 'inside white/bordered'
                ].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: api.style({text: 'legacy0'}),
                            styleEmphasis: {fill: 'red'}
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: {
                                text: 'legacy1', fill: 'green', textPosition: 'inside',
                                textFill: '#fff', textStroke: 'green', textStrokeWidth: 2
                            },
                            styleEmphasis: {fill: 'red'}
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {style: {text: 'ec5_api'}},
                            textConfig: {position: 'inside'},
                            emphasis: {style: {fill: 'red'}}
                        };
                    }
                ]);

                makeGraphic([
                    'normal: green rect', 'bottom green', 'hover: red rect', 'bottom green'
                ].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: api.style({text: 'legacy0', textPosition: 'bottom'}),
                            styleEmphasis: {fill: 'red'}
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {style: {text: 'ec5_api'}},
                            textConfig: {position: 'bottom', outsideFill: 'green'},
                            emphasis: {style: {fill: 'red'}}
                        };
                    }
                ]);

                makeGraphic([
                    'green rect', 'normal: inside white/bordered', 'hover: inside red'
                ].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: api.style({text: 'legacy0'}),
                            styleEmphasis: {textFill: 'red'}
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: {
                                text: 'legacy1', fill: 'green', textPosition: 'inside',
                                textFill: '#fff', textStroke: 'green', textStrokeWidth: 2
                            },
                            styleEmphasis: {textFill: 'red'}
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {
                                style: {text: 'ec5_api'},
                                emphasis: {style: {fill: 'red', stroke: 'green', lineWidth: 2}}
                            },
                            textConfig: {position: 'inside'}
                        };
                    }
                ]);

                makeGraphic([
                    'green rect', 'normal: bottom red', 'hover: bottom blue'
                ].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: api.style({text: 'legacy0', textPosition: 'bottom', textFill: 'red'}),
                            styleEmphasis: {textFill: 'blue'}
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {
                                style: {text: 'ec5_api', fill: 'red'},
                                emphasis: {style: {fill: 'blue'}}
                            },
                            textConfig: {position: 'bottom'}
                        };
                    }
                ]);

                makeGraphic(['green rect', 'normal: inside white/borded', 'hover: bottom'].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: api.style({text: 'legacy0'}),
                            // Hover not compat to ec4 (to complicated)
                            styleEmphasis: {textPosition: 'bottom'}
                        };
                    }
                ]);

                makeGraphic(['green rect', 'normal: inside red', 'hover: bottom red'].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: api.style({text: 'legacy0', textFill: 'red'}),
                            styleEmphasis: {textPosition: 'bottom'}
                        };
                    }
                ]);

                makeGraphic(['green rect', 'normal: inside white', 'hover: bottom red'].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: api.style({text: 'legacy0', textFill: 'white'}),
                            styleEmphasis: {textFill: 'red', textPosition: 'bottom'}
                        };
                    }
                ]);

                makeGraphic(['green rect', 'normal: inside white/bordered', 'hover: auto lift'].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: api.style({text: 'legacy0'})
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {style: {text: 'ec5_api'}},
                            textConfig: {position: 'inside'}
                        };
                    }
                ]);

                makeGraphic(['green rect', 'normal: bottom green', 'hover: auto lift'].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', position: [x, y], shape: createRectShape(),
                            style: api.style({text: 'legacy0', textPosition: 'bottom'})
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {style: {text: 'ec5_api', fill: 'green'}},
                            textConfig: {position: 'bottom'}
                        };
                    }
                ]);

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

            var chart = testHelper.create(echarts, 'Legacy_compat_test', {
                title: [
                    'Legacy compat test',
                    'Each column rects are the same effect implemented by',
                    'legacy API and corresponding new API.',
                    'So **each column** must be **the same result**',
                    '(except text string and some ec5 enhancement).',
                    '**Hover** also needs to be tested'
                ],
                height: 550,
                option: createOption(renderItem, {globalColor: ['green']})
            });
        });
        </script>


        <script>
        require(['echarts'], function (echarts) {
            function renderItem() {
                var maker = createMaker({maxCol: 5});
                var makeGraphic = maker.makeGraphic;
                var createRectShape = maker.createRectShape;

                // opt for example:
                // opt.type
                // opt.shape
                // opt.textConfig: {},
                // opt.textContent: {}, if rich: textContent.style: {rich: {i: xxx}}
                // opt.emphasis: {}
                // opt.extraTitle: string[]
                function makeTest(opt) {
                    var isRich = opt.textContent.style.rich;
                    var type = opt.type || 'rect';
                    var shape = opt.shape || createRectShape(40, 120);
                    var title = ['green rect', (isRich ? 'rich text' : 'plain text')];
                    opt.extraTitle && (title = title.concat(opt.extraTitle));
                    makeGraphic(title.join('\n'), [
                        function (x, y) {
                            var result = {
                                type: type, x: x, y: y, shape: shape, style: {fill: 'green'},
                                textConfig: opt.textConfig,
                                textContent: opt.textContent
                            }
                            if (opt.emphasis) {
                                result.emphasis = opt.emphasis;
                            }
                            return result;
                        }
                    ]);
                }

                makeTest({
                    textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI},
                    textContent: {style: {
                        text: '90 rotated text align with:\nv: top h: middle\ndefault distance',
                        align: 'left', verticalAlign: 'middle'
                    }}
                });

                makeTest({
                    textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI, distance: 0},
                    textContent: {style: {
                        text: '90 rotated text align with:\n v: top h: middle\nno distance',
                        align: 'left', verticalAlign: 'middle'
                    }}
                });

                makeTest({
                    textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI, distance: 0, offset: [0, -25]},
                    textContent: {style: {
                        text: '90 rotated text outside right rect\nalign top',
                        fill: '#700',
                        align: 'left', verticalAlign: 'bottom'
                    }}
                });

                makeTest({
                    textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI},
                    textContent: {style: {
                        text: '90 rotated text align with:\n{i|v: top h: middle}\n{a|align right}',
                        align: 'left', verticalAlign: 'middle',
                        rich: {
                            i: {fontSize: 20, fill: 'orange'},
                            a: {align: 'right'}
                        }
                    }}
                });

                makeTest({
                    extraTitle: ['emphasis:\nalign/verticalAlign rollback'],
                    textConfig: {position: 'left'},
                    textContent: {
                        style: {
                            text: '--------\nalign\nright\n----',
                            fill: '#700'
                        }
                    },
                    emphasis: {
                        textConfig: {position: null}
                    }
                });

                makeTest({
                    type: 'circle',
                    shape: {cx: 0, cy: 20, r: 30},
                    textConfig: {
                        position: 'right',
                    },
                    textContent: {
                        rotation: -0.3 * Math.PI,
                        originX: -35,
                        style: {
                            text: 'Rotate, outside, origin is center',
                            fontSize: 20,
                            fill: '#700',
                            align: 'left',
                            verticalAlign: 'middle'
                        }
                    }
                });

                makeTest({
                    type: 'circle',
                    shape: {cx: 0, cy: 20, r: 30},
                    textConfig: {
                        position: 'inside', offset: [35, 0]
                    },
                    textContent: {
                        rotation: -0.3 * Math.PI,
                        style: {
                            text: 'Rotate, outside, origin is center',
                            fontSize: 20,
                            fill: '#700',
                            align: 'left',
                            verticalAlign: 'middle'
                        }
                    }
                });

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

            var chart = testHelper.create(echarts, 'textConfig_other_feature_test', {
                title: [
                    'textConfig other feature test'
                ],
                option: createOption(renderItem),
                // recordCanvas: true,
                height: 800
            });
        });
        </script>


        <script>
        require(['echarts'], function (echarts) {
            function renderItem() {
                var maker = createMaker({maxCol: 6});
                var makeGraphic = maker.makeGraphic;
                var createRectShape = maker.createRectShape;

                // opt for example:
                // opt.textConfig: {},
                // opt.textContentStyle: {}, if rich: textContentStyle: {rich: {i: xxx}}
                // opt.expect: [ {fill: 'white', stroke: 'green'},  {fill: 'white', stroke: 'green'} ]
                function makeTest(opt) {
                    var expect0 = opt.expect[0];
                    var expect1 = opt.expect[1];
                    var isRich = opt.textContentStyle.rich;
                    makeGraphic(['green rect', (isRich ? 'rich text' : 'plain text')].join('\n'), [
                        function (x, y) {
                            var text = [
                                isRich ? '{i|inside}' : 'inside',
                                'fill: ' + expect0.fill,
                                'stroke: ' + expect0.stroke
                            ].join('\n');
                            return {
                                type: 'rect', x: x, y: y, shape: createRectShape(), style: {fill: 'green'},
                                textConfig: echarts.util.extend({position: 'inside'}, opt.textConfig),
                                textContent: {
                                    style: echarts.util.extend({text: text}, opt.textContentStyle)
                                }
                            }
                        },
                        function (x, y) {
                            var text = [
                                isRich ? '{i|bottom}' : 'bottom',
                                'fill: ' + expect1.fill,
                                'stroke: ' + expect1.stroke
                            ].join('\n');
                            return {
                                type: 'rect', x: x, y: y, shape: createRectShape(), style: {fill: 'green'},
                                textConfig: echarts.util.extend({position: 'bottom'}, opt.textConfig),
                                textContent: {
                                    style: echarts.util.extend({text: text}, opt.textContentStyle)
                                }
                            }
                        }
                    ]);
                }

                makeTest({
                    textConfig: {},
                    textContentStyle: {},
                    expect: [
                        {fill: 'white', stroke: 'green'},
                        {fill: 'black', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {},
                    textContentStyle: {backgroundColor: '#aaa'},
                    expect: [
                        {fill: 'white', stroke: 'none'},
                        {fill: 'black', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {},
                    textContentStyle: {borderColor: '#aaa', borderWidth: 2, padding: 5},
                    expect: [
                        {fill: 'white', stroke: 'none'},
                        {fill: 'black', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {},
                    textContentStyle: {rich: {i: {fontSize: 30}}},
                    expect: [
                        {fill: 'white', stroke: 'green'},
                        {fill: 'black', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {},
                    textContentStyle: {rich: {i: {backgroundColor: '#aaa'}}},
                    expect: [
                        {fill: 'white', stroke: 'none'},
                        {fill: 'black', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {},
                    textContentStyle: {rich: {i: {borderColor: '#aaa', borderWidth: 2, fontSize: 20}}},
                    expect: [
                        {fill: 'white', stroke: 'none'},
                        {fill: 'black', stroke: 'green'}
                    ]
                });

                makeTest({
                    textConfig: {},
                    textContentStyle: {fill: 'orange'},
                    expect: [
                        {fill: 'orange', stroke: 'none'},
                        {fill: 'orange', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {},
                    textContentStyle: {fill: 'orange', stroke: 'blue', lineWidth: 2},
                    expect: [
                        {fill: 'orange', stroke: 'blue'},
                        {fill: 'orange', stroke: 'blue'}
                    ]
                });

                makeTest({
                    textConfig: {},
                    textContentStyle: {stroke: 'blue', lineWidth: 2},
                    expect: [
                        {fill: 'white', stroke: 'blue'},
                        {fill: 'black', stroke: 'blue'}
                    ]
                });

                makeTest({
                    textConfig: {insideFill: 'yellow'},
                    textContentStyle: {},
                    expect: [
                        {fill: 'yellow', stroke: 'green'},
                        {fill: 'black', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {insideFill: 'yellow'},
                    textContentStyle: {fill: 'orange'},
                    expect: [
                        {fill: 'orange', stroke: 'none'},
                        {fill: 'orange', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {insideFill: 'yellow', insideStroke: 'blue'},
                    textContentStyle: {},
                    expect: [
                        {fill: 'yellow', stroke: 'blue'},
                        {fill: 'black', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {insideFill: 'yellow', insideStroke: 'blue'},
                    textContentStyle: {fill: 'pink'},
                    expect: [
                        {fill: 'pink', stroke: 'blue'},
                        {fill: 'pink', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {insideStroke: 'blue'},
                    textContentStyle: {},
                    expect: [
                        {fill: 'white', stroke: 'blue'},
                        {fill: 'black', stroke: 'none'}
                    ]
                });

                makeTest({
                    textConfig: {outsideFill: 'blue', outsideStroke: 'red'},
                    textContentStyle: {},
                    expect: [
                        {fill: 'white', stroke: 'green'},
                        {fill: 'blue', stroke: 'red'}
                    ]
                });
                makeTest({
                    textConfig: {outsideFill: 'blue', outsideStroke: 'red'},
                    textContentStyle: {fill: 'pink'},
                    expect: [
                        {fill: 'pink', stroke: 'none'},
                        {fill: 'pink', stroke: 'red'}
                    ]
                });

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

            var chart = testHelper.create(echarts, 'insideFill_Stroke_auto_test', {
                title: [
                    'insideFill/insideStroke outsideFill/outsideStroke auto rule test'
                ],
                option: createOption(renderItem, {backgroundColor: '#ddd'}),
                height: 800
            });
        });
        </script>


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

            function renderItem(params, api) {
                var maker = createMaker({xCurr: 150, xStep: 150, yStep: 90});
                var makeGraphic = maker.makeGraphic;
                var createRectShape = maker.createRectShape;

                makeGraphic(['insideFill/Stroke not set', 'normal: white/bordered'].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {
                                type: 'text', silent: true, style: {
                                    text: 'if hover,\ntop black'
                                }
                            },
                            textConfig: {position: 'inside'},
                            emphasis: {
                                textConfig: {position: 'top'}
                            }
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {type: 'text', silent: true, style: {text: 'if hover,\nright green'}},
                            textConfig: {
                                position: 'inside', outsideFill: 'green'
                            },
                            emphasis: {
                                textConfig: {position: 'right'}
                            }
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {
                                silent: true, style: {text: 'if hover,\nbottom\nlarge bordered red'},
                                emphasis: {style: {fontSize: 20}}
                            },
                            textConfig: {
                                position: 'inside', outsideFill: 'green', outsideStroke: 'red'
                            },
                            emphasis: {
                                textConfig: {position: 'bottom'}
                            }
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {
                                silent: true,
                                style: {
                                    text: 'rich text\nif hover,\nbottom black\n{r|normal orange\nhover red}',
                                    rich: {r: {fontSize: 16, fill: 'orange'}},
                                },
                                emphasis: {
                                    style: {
                                        rich: {r: {fill: 'red'}}
                                    }
                                }
                            },
                            textConfig: {position: 'inside'},
                            emphasis: {
                                textConfig: {position: 'bottom'}
                            }
                        };
                    }
                ]);

                makeGraphic(['green rect'].join('\n'), [
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {silent: true, style: {
                                text: 'normal:\ninside yellow/bordered\nhover:\ntop black'
                            }},
                            textConfig: {position: 'inside', insideFill: 'yellow'},
                            emphasis: {
                                textConfig: {position: 'top'}
                            }
                        };
                    },
                    function (x, y) {
                        return {
                            type: 'rect', x: x, y: y, shape: createRectShape(),
                            style: {fill: 'green'},
                            textContent: {
                                silent: true,
                                style: {text: 'normal:\ninside white/bordered\nhover:\nright green'}
                            },
                            textConfig: {
                                position: 'inside', outsideFill: 'green'
                            },
                            emphasis: {
                                textConfig: {position: 'right'}
                            }
                        };
                    }
                ]);

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

            var chart = testHelper.create(echarts, 'insideFill_Stroke_hover_test', {
                title: [
                    'insideFill/Stroke & hover test. Please **hover any of them**'
                ],
                option: createOption(renderItem),
                height: 600
            });
        });
        </script>


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

            function renderItem(params, api) {
                return {
                    type: 'group',
                    children: [{
                        type: 'circle',
                        shape: {cx: 100, cy: 100, r: 50},
                        style: {fill: 'red'},
                        z2: 100,
                        // textContent do not set z2, but auto follow the circle z2.
                        textContent: {
                            type: 'text',
                            style: {
                                text: 'normal: {red|red} is over {green|green}.\nHover me',
                                // stroke: '#fff', lineWidth: 2,
                                rich: {
                                    red: {fill: 'red', stroke: '#fff', lineWidth: 2, fontSize: 20},
                                    green: {fill: 'green', stroke: '#fff', lineWidth: 2, fontSize: 20}
                                },
                            },
                            silent: true,
                            emphasis: {
                                style: {
                                    text: 'emphasis: {green|green} over {red|red}\nText {below|below} green',
                                    rich: {
                                        below: {fontSize: 40}
                                    }
                                }
                            }
                        },
                        textConfig: {
                            position: 'inside'
                        }
                    }, {
                        type: 'circle',
                        shape: {cx: 100, cy: 140, r: 40},
                        style: {fill: 'green'},
                        // textContent do not set z2, but auto follow the circle z2.
                        textContent: {
                            type: 'text',
                            style: {
                                text: 'text should be always\n{over|over} all circles.',
                                rich: {over: {fontSize: 30}}
                            },
                            silent: true
                        },
                        textConfig: {
                            position: 'inside'
                        },
                        z2: 80,
                        emphasis: {
                            z2: 110
                        }

                    }, {
                        type: 'circle',
                        shape: {cx: 300, cy: 100, r: 50},
                        style: {fill: 'red'},
                        z2: 100,
                        // textContent do not set z2, but auto follow the circle z2.
                        textContent: {
                            type: 'text',
                            style: {
                                text: 'normal: {red|red} is over {green|green}.\nHover me',
                                // stroke: '#fff', lineWidth: 2,
                                rich: {
                                    red: {fill: 'red', stroke: '#fff', lineWidth: 2, fontSize: 20},
                                    green: {fill: 'green', stroke: '#fff', lineWidth: 2, fontSize: 20}
                                },
                            },
                            silent: true,
                            emphasis: {
                                style: {
                                    text: 'emphasis: {red|red} over {green|green}\nText {below|over} green',
                                    rich: {
                                        below: {fontSize: 40}
                                    }
                                }
                            }
                        },
                        textConfig: {
                            position: 'inside'
                        }
                    }, {
                        type: 'circle',
                        shape: {cx: 300, cy: 140, r: 40},
                        style: {fill: 'green'},
                        // textContent do not set z2, but auto follow the circle z2.
                        textContent: {
                            type: 'text',
                            style: {
                                text: 'text should be always\n{over|over} all circles.',
                                rich: {over: {fontSize: 30}}
                            },
                            silent: true,
                            emphasis: {
                                z2: 110
                            }
                        },
                        textConfig: {
                            position: 'inside'
                        },
                        z2: 80

                    }]
                };
            }

            var chart = testHelper.create(echarts, 'z_order_test', {
                title: [
                    'z order test. Please **hover any of them**.'
                ],
                option: createOption(renderItem)
            });
        });
        </script>


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

            var option = {
                xAxis: {scale: true, min: 0.75, max: 3},
                yAxis: {},
                series: [{
                    type: 'custom',
                    renderItem: function (params, api) {
                        var shape0 = {x: 0, y: 30, width: 100, height: 50};
                        var shape1 = {x: 30, y: 50, width: 100, height: 50};
                        var shape2 = {x: 60, y: 70, width: 100, height: 50};
                        var position = api.coord([api.value(0), api.value(1)]);
                        var name = api.value(2);

                        var map = {
                            legacy: {
                                type: 'group',
                                x: position[0],
                                y: position[1],
                                children: [{
                                    type: 'rect',
                                    shape: shape0,
                                    style: {fill: '#333'}
                                }, {
                                    type: 'rect',
                                    shape: shape1,
                                    style: {
                                        fill: '#555',
                                        text: 'has inner text',
                                        textFill: 'white',
                                        textPostion: 'insideTop'
                                    },
                                    styleEmphasis: {textFill: 'yellow'}
                                }, {
                                    type: 'rect',
                                    shape: shape2,
                                    style: {fill: '#500'},
                                    styleEmphasis: false
                                }]
                            },
                            ec5: {
                                type: 'group',
                                x: position[0],
                                y: position[1],
                                children: [{
                                    type: 'rect',
                                    shape: shape0,
                                    style: {fill: '#333'},
                                }, {
                                    type: 'rect',
                                    shape: shape1,
                                    style: {fill: '#555', text: 'has inner text'},
                                    textContent: {
                                        style: {fill: 'white'},
                                        emphasis: {style: {fill: 'yellow'}}
                                    },
                                    textConfig: {position: 'insideTop'}
                                }, {
                                    type: 'rect',
                                    shape: shape2,
                                    style: {fill: '#500'},
                                    emphasis: {
                                        // set false to disable lift color and z2.
                                        style: false
                                    }
                                }]
                            }
                        };

                        return map[name];
                    },
                    data: [[1, 1, 'legacy'], [2, 1, 'ec5']]
                }]
            };

            var chart = testHelper.create(echarts, 'hover_style_disable', {
                title: [
                    'Hover style disable: hover each group of elements,',
                    'all of the elements should lift color and z2 **except the red rect**'
                ],
                height: 300,
                option: option
            });
        });
        </script>


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

            var option = {
                xAxis: {scale: true, min: 0.75, max: 3},
                yAxis: {},
                series: [{
                    type: 'custom',
                    renderItem: function (params, api) {
                        var shape0 = {x: 00, y: 30, width: 100, height: 50};
                        var shape1 = {x: 30, y: 50, width: 100, height: 50};
                        var shape2 = {x: 60, y: 70, width: 100, height: 50};
                        var position = api.coord([api.value(0), api.value(1)]);
                        var name = api.value(2);
                        var useHover = !!api.value(3);
                        var map = {
                            legacy: {
                                type: 'group',
                                x: position[0],
                                y: position[1],
                                children: [{
                                    type: 'rect',
                                    shape: shape0,
                                    style: api.style({fill: '#222', text: 'legacy'}),
                                    styleEmphasis: useHover ? {fill: 'red', textFill: 'yellow'} : false
                                }]
                            },
                            ec5: {
                                type: 'group',
                                x: position[0],
                                y: position[1],
                                children: [{
                                    type: 'rect',
                                    shape: shape0,
                                    style: {fill: '#222'},
                                    textContent: {
                                        style: {text: 'ec5_api'},
                                        emphasis: {style: useHover ? {fill: 'yellow'} : false}
                                    },
                                    textConfig: {position: 'inside'},
                                    emphasis: {style: useHover ? {fill: 'red'} : false}
                                }]
                            }
                        };

                        return map[name];
                    },
                    data: [[1, 1, 'legacy', 1], [2, 1, 'ec5', 1]]
                }]
            };

            var chart = testHelper.create(echarts, 'hover_style_remove', {
                title: [
                    'Hover style remove test: ',
                    '(1) Hover each: become **red rect, yellow text**',
                    '(2) Click "disable hover style", elements should more to right a bit.',
                    '(3) Hover each again: should no hover style',
                    '(4) Click "enable hover style", elements should more to left a bit.',
                    '(5) Check whether resume to (1)',
                ],
                height: 300,
                option: option,
                buttons: [{
                    text: 'disable hover style',
                    onclick: function () {
                        chart.setOption({
                            xAxis: {scale: true, min: 0.75, max: 7},
                            series: {
                                type: 'custom',
                                data: [[3, 1, 'legacy', 0], [6, 1, 'ec5', 0]]
                            }
                        })
                    }
                }, {
                    text: 'enable hover style',
                    onclick: function () {
                        chart.setOption({
                            xAxis: {scale: true, min: 0.75, max: 3},
                            series: {
                                type: 'custom',
                                data: [[1, 1, 'legacy', 1], [2, 1, 'ec5', 1]]
                            }
                        })
                    }
                }]
            });
        });
        </script>


    </body>
</html>