<!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">
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/testHelper.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            .test-title {
                background: rgb(182, 120, 7);
                color: #fff;
            }
            .test-chart {
                height: 250px;
            }
        </style>


        <div id="layout0"></div>
        <div id="layout1"></div>
        <div id="layout2"></div>
        <div id="layout3"></div>
        <div id="layout4"></div>
        <div id="layout5"></div>
        <div id="layout6"></div>
        <div id="layout7"></div>
        <div id="layout7.5"></div>
        <div id="layout8"></div>
        <div id="layout9"></div>
        <div id="layout10"></div>
        <div id="layout11"></div>
        <div id="layout12"></div>


        <script>
            var arrayRows0 = [
                ['product', '2015', '2016', '2017'],
                ['Matcha Latte', 43.3, 85.8, 93.7],
                ['Milk Tea', 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 86.4, 65.2, 82.5],
                ['Walnut Brownie', 72.4, 53.9, 39.1]
            ];

            var arrayRows1 = [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ];

            var arrayRowsNoColumnHeader = [
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ];

            var arrayRowsNoRowHeader = [
                ['2012', '2013', '2014', '2015', '2016', '2017'],
                [41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                [86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                [24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                [55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ];

            var arrayRowsPairValueColumns = [
                ['2012', null, '2013', null, '2014', 'amount'],
                [41.1, 2585, 30.4, 2473, 65.1, 3418],
                [86.5, 2316, 92.1, 3255, 85.7, 2485],
                [24.1, 1532, 67.2, 1452, 79.5, 4689],
                [55.2, 5312, 67.1, 3266, 69.2, 1354]
            ];

            var errorData = [
                ['name', 'Price', 'Prime cost', 'Prime cost min', 'Prime cost max', 'Price min', 'Price max'],
                ['Blouse "Blue Viola"', 101.88, 99.75, 76.75, 116.75, 69.88, 119.88],
                ['Dress "Daisy"', 155.8, 144.03, 126.03, 156.03, 129.8, 188.8],
                ['Trousers "Cutesy Classic"', 203.25, 173.56, 151.56, 187.56, 183.25, 249.25],
                ['Dress "Morning Dew"', 256, 120.5, 98.5, 136.5, 236, 279],
                ['Turtleneck "Dark Chocolate"', 408.89, 294.75, 276.75, 316.75, 385.89, 427.89],
                ['Jumper "Early Spring"', 427.36, 430.24, 407.24, 452.24, 399.36, 461.36],
                ['Breeches "Summer Mood"', 356, 135.5, 123.5, 151.5, 333, 387],
                ['Dress "Mauve Chamomile"', 406, 95.5, 73.5, 111.5, 366, 429],
                ['Dress "Flying Tits"', 527.36, 503.24, 488.24, 525.24, 485.36, 551.36],
                ['Dress "Singing Nightingales"', 587.36, 543.24, 518.24, 555.24, 559.36, 624.36],
                ['Sundress "Cloudy weather"', 603.36, 407.24, 392.24, 419.24, 581.36, 627.36],
                ['Sundress "East motives"', 633.36, 477.24, 445.24, 487.24, 594.36, 652.36],
                ['Sweater "Cold morning"', 517.36, 437.24, 416.24, 454.24, 488.36, 565.36],
                ['Trousers "Lavender Fields"', 443.36, 387.24, 370.24, 413.24, 412.36, 484.36],
                ['Jumper "Coffee with Milk"', 543.36, 307.24, 288.24, 317.24, 509.36, 574.36],
                ['Blouse "Blooming Cactus"', 790.36, 277.24, 254.24, 295.24, 764.36, 818.36],
                ['Sweater "Fluffy Comfort"', 790.34, 678.34, 660.34, 690.34, 762.34, 824.34]
            ];

            // No 北京 上海 江苏
            var nameValueGeo0 = [
                {name: '天津', value: 514},
                {name: '上海', value: 863},
                {name: '重庆', value: 224},
                {name: '河北', value: 671},
                {name: '河南', value: 888},
                {name: '云南', value: 992},
                {name: '辽宁', value: 136},
                {name: '黑龙江', value: 406},
                {name: '湖南', value: 101},
                {name: '安徽', value: 885},
                {name: '新疆', value: 187},
                {name: '浙江', value: 1},
                {name: '江西', value: 138},
                {name: '湖北', value: 337},
                {name: '广西', value: 410},
                {name: '甘肃', value: 22},
                {name: '山西', value: 814},
                {name: '内蒙古', value: 449},
                {name: '陕西', value: 324},
                {name: '吉林', value: 429},
                {name: '福建', value: 377},
                {name: '贵州', value: 811},
                {name: '广东', value: 954},
                {name: '青海', value: 653},
                {name: '西藏', value: 297},
                {name: '四川', value: 981},
                {name: '宁夏', value: 66},
                {name: '海南', value: 667},
                {name: '台湾', value: 345},
                {name: '香港', value: 970},
                {name: '澳门', value: 683}
            ];

            var nameValueGeo1 = [
                {name: '北京', value: 507},
                {name: '天津', value: 263},
                {name: '上海', value: 732},
                {name: '重庆', value: 976},
                {name: '河北', value: 299},
                {name: '安徽', value: 465},
                {name: '新疆', value: 259},
                {name: '浙江', value: 822},
                {name: '江西', value: 922},
                {name: '山西', value: 379},
                {name: '内蒙古', value: 544},
                {name: '吉林', value: 190},
                {name: '福建', value: 66},
                {name: '广东', value: 842},
                {name: '西藏', value: 827},
                {name: '四川', value: 71},
                {name: '宁夏', value: 428},
                {name: '香港', value: 466},
                {name: '澳门', value: 119}
            ]

        </script>


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

                var option = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: arrayRows0
                    },
                    series: [
                        {type: 'pie', id: 'pie'}
                    ]
                };

                testHelper.create(echarts, 'layout0', {
                    title: 'pie, default encoding, legend',
                    option: option
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {
                var encode = {
                    value: '2016',
                    itemName: 'product'
                };

                var option = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: arrayRows0
                    },
                    series: [
                        {type: 'pie', id: 'pie', encode: encode}
                    ]
                };

                testHelper.create(echarts, 'layout1', {
                    title: 'pie, give encoding, default legend',
                    option: option,
                    dataTable: arrayRows0,
                    infoKey: 'encode',
                    info: encode
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {
                var option = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: arrayRows0
                    },
                    series: [
                        {
                            type: 'pie',
                            id: 'pie',
                            seriesLayoutBy: 'row',
                            encode: {
                                value: 'Milk Tea',
                                itemName: 'product',
                                tooltip: 'Milk Tea'
                            }
                        }
                    ]
                };

                testHelper.create(echarts, 'layout2', {
                    title: 'pie, give encoding, default legend',
                    option: option,
                    dataTable: arrayRows0,
                    info: {
                        legend: '<default>',
                        series: option.series
                    }
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {
                var option = {
                    legend: {},
                    tooltip: {},
                    dataset: [{
                        source: arrayRowsNoColumnHeader
                    }, {
                        source: arrayRowsNoRowHeader
                    }],
                    series: [{
                        type: 'pie',
                        radius: 50,
                        center: ['25%', '25%'],
                        sourceHeader: false
                    }, {
                        type: 'pie',
                        radius: 50,
                        center: ['50%', '25%']
                    }, {
                        type: 'pie',
                        radius: 50,
                        center: ['75%', '25%'],
                        sourceHeader: true
                    }, {
                        type: 'pie',
                        radius: 50,
                        center: ['25%', '75%'],
                        seriesLayoutBy: 'row',
                        sourceHeader: false,
                        datasetIndex: 1
                    }, {
                        type: 'pie',
                        radius: 50,
                        center: ['50%', '75%'],
                        seriesLayoutBy: 'row',
                        datasetIndex: 1
                    }, {
                        type: 'pie',
                        radius: 50,
                        center: ['75%', '75%'],
                        seriesLayoutBy: 'row',
                        sourceHeader: true,
                        datasetIndex: 1
                    }]
                };

                testHelper.create(echarts, 'layout3', {
                    title: 'no sourceHeader',
                    height: 400,
                    option: option,
                    dataTables: [
                        arrayRowsNoColumnHeader,
                        arrayRowsNoRowHeader
                    ],
                    info: {
                        legend: '<default>',
                        series: option.series
                    }
                });
            });
        </script>


        <script>

            require(['echarts', 'map/js/china'], function (echarts) {
                var option = {
                    legend: {},
                    tooltip: {},
                    dataset: [{
                        source: nameValueGeo0
                    }, {
                        source: nameValueGeo1
                    }],
                    visualMap: {
                        min: 0,
                        max: 1500,
                        calculable : true
                    },
                    series: [{
                        name: 'A',
                        type: 'map',
                        label: {
                            show: true
                        },
                        mapType: 'china'
                    }, {
                        name: 'B',
                        type: 'map',
                        label: {
                            show: true
                        },
                        mapType: 'china',
                        datasetIndex: 1
                    }]
                };

                testHelper.create(echarts, 'layout4', {
                    option: option,
                    height: 400,
                    dataTables: [
                        nameValueGeo0,
                        nameValueGeo1
                    ],
                    info: {
                        legend: option.legend,
                        tooltip: option.tooltip,
                        series: option.series
                    }
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {
                var option = {
                    legend: {},
                    tooltip: {},
                    xAxis: {},
                    yAxis: {},
                    dataset: [{
                        source: arrayRowsPairValueColumns
                    }],
                    series: [{
                        type: 'scatter'
                    }, {
                        type: 'scatter'
                    }, {
                        type: 'scatter'
                    }]
                };

                testHelper.create(echarts, 'layout5', {
                    title: 'column (dimension name duplicated)',
                    height: 400,
                    option: option,
                    dataTables: [
                        arrayRowsPairValueColumns
                    ],
                    info: {
                        legend: '<default>',
                        series: option.series
                    }
                });
            });
        </script>


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


                function renderItem(params, api) {
                    var children = [];
                    var coordDims = ['x', 'y'];

                    for (var baseDimIdx = 0; baseDimIdx < 2; baseDimIdx++) {
                        var otherDimIdx = 1 - baseDimIdx;
                        var encode = params.encode;
                        var baseValue = api.value(encode[coordDims[baseDimIdx]][0]);
                        var param = [];
                        param[baseDimIdx] = baseValue;
                        param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1]);
                        var highPoint = api.coord(param);
                        param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2]);
                        var lowPoint = api.coord(param);
                        var halfWidth = 5;

                        var style = api.style({
                            stroke: api.visual('color'),
                            fill: null
                        });

                        children.push({
                            type: 'line',
                            shape: makeShape(
                                baseDimIdx,
                                highPoint[baseDimIdx] - halfWidth, highPoint[otherDimIdx],
                                highPoint[baseDimIdx] + halfWidth, highPoint[otherDimIdx]
                            ),
                            style: style
                        }, {
                            type: 'line',
                            shape: makeShape(
                                baseDimIdx,
                                highPoint[baseDimIdx], highPoint[otherDimIdx],
                                lowPoint[baseDimIdx], lowPoint[otherDimIdx]
                            ),
                            style: style
                        }, {
                            type: 'line',
                            shape: makeShape(
                                baseDimIdx,
                                lowPoint[baseDimIdx] - halfWidth, lowPoint[otherDimIdx],
                                lowPoint[baseDimIdx] + halfWidth, lowPoint[otherDimIdx]
                            ),
                            style: style
                        });
                    }

                    function makeShape(baseDimIdx, base1, value1, base2, value2) {
                        var shape = {};
                        shape[coordDims[baseDimIdx] + '1'] = base1;
                        shape[coordDims[1 - baseDimIdx] + '1'] = value1;
                        shape[coordDims[baseDimIdx] + '2'] = base2;
                        shape[coordDims[1 - baseDimIdx] + '2'] = value2;
                        return shape;
                    }

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

                var option = {
                    dataset: {
                        source: errorData
                    },
                    tooltip: {
                    },
                    legend: {
                    },
                    dataZoom: [{
                        type: 'slider'
                    }, {
                        type: 'inside'
                    }],
                    visualMap: {
                        min: 0,
                        max: 1000,
                        dimension: 1,
                        calculable: true
                    },
                    xAxis: {},
                    yAxis: {},
                    series: [{
                        type: 'scatter',
                        name: 'error',
                        encode: {
                            x: 2,
                            y: 1,
                            tooltip: [2, 1, 3, 4, 5, 6],
                            itemName: 0
                        },
                        itemStyle: {
                            normal: {
                                color: '#77bef7'
                            }
                        }
                    }, {
                        type: 'custom',
                        name: 'error',
                        renderItem: renderItem,
                        encode: {
                            x: [2, 3, 4],
                            y: [1, 5, 6],
                            tooltip: [2, 1, 3, 4, 5, 6],
                            itemName: 0
                        },
                        z: 100
                    }]
                };

                testHelper.create(echarts, 'layout6', {
                    title: 'error data (custom)',
                    height: 400,
                    dataTables: [
                        errorData
                    ],
                    option: option
                });
            });
        </script>


        <script>

            require(['echarts', 'data/stock-DJI.json.js'], function (echarts, source) {
                var option = {
                    legend: {},
                    tooltip: {trigger: 'axis'},
                    xAxis: {type: 'category'},
                    yAxis: {},
                    dataset: [{
                        source: source
                    }],
                    dataZoom: [{}, {type: 'inside'}],
                    animation: false,
                    series: [{
                        type: 'candlestick',
                        encode: {
                            x: 0,
                            y: [1, 2, 3, 4]
                        }
                    }]
                };

                testHelper.create(echarts, 'layout7', {
                    height: 400,
                    option: option,
                    dataTables: [source],
                    info: {
                        series: option.series
                    }
                });
            });
        </script>


        <script>

            require(['echarts'], function (echarts, source) {
                // Thanks to <https://github.com/OvidiuBuleandra>
                option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: "category",
                        scale: true
                    },
                    yAxis: {
                        type: "value",
                        scale: true,
                        boundaryGap: ['5%', '5%']
                    },
                    dataZoom: [{
                        type: 'slider'
                    }, {
                        type: 'inside'
                    }],
                    dataset: {
                        dimensions: ["date","open","high","low","close","volume",{name: "haOpen", displayName: 'open'},"haHigh","haLow","haClose","sma9"],
                        source: [
                            ["2018-01-09 14:30:00",14636.21,14682.6,14401.0,14659.57,349.069176,14647.89,14682.6,14401.0,14594.845,0.0],
                            ["2018-01-09 15:00:00",14650.0,14700.0,14238.99,14347.43,459.735215,14621.3675,14700.0,14238.99,14484.105,0.0],
                            ["2018-01-09 15:30:00",14374.72,14434.2,14011.05,14041.03,697.055035,14552.73625,14552.73625,14011.05,14215.25,0.0],
                            ["2018-01-09 16:00:00",14072.87,14497.06,14064.13,14349.0,671.165463,14383.993125,14497.06,14064.13,14245.765,0.0],
                            ["2018-01-09 16:30:00",14369.98,14640.99,14340.0,14560.48,416.750768,14314.8790625,14640.99,14314.8790625,14477.8625,0.0],
                            ["2018-01-09 17:00:00",14551.42,14800.0,14551.41,14749.55,357.445717,14396.37078125,14800.0,14396.37078125,14663.095000000001,0.0],
                            ["2018-01-09 17:30:00",14745.0,14766.2,14485.0,14654.96,306.727704,14529.732890625,14766.2,14485.0,14662.789999999999,0.0],
                            ["2018-01-09 18:00:00",14655.01,14829.0,14585.01,14800.1,194.858965,14596.261445312499,14829.0,14585.01,14717.28,0.0],
                            ["2018-01-09 18:30:00",14800.1,14998.62,14792.03,14951.01,313.268531,14656.770722656249,14998.62,14656.770722656249,14885.44,0.0],
                            ["2018-01-09 19:00:00",14968.0,14982.0,14778.47,14810.0,214.504459,14771.105361328126,14982.0,14771.105361328126,14884.6175,16213.681111111111],
                            ["2018-01-09 19:30:00",14810.0,14973.49,14799.95,14949.98,144.830078,14827.861430664063,14973.49,14799.95,14883.355,16245.94888888889],
                            ["2018-01-09 20:00:00",14949.98,14990.0,14865.49,14916.91,145.574797,14855.608215332031,14990.0,14855.608215332031,14930.595000000001,16309.224444444444],
                            ["2018-01-09 20:30:00",14914.03,14945.01,14799.01,14803.44,146.21296,14893.101607666016,14945.01,14799.01,14865.372500000001,16393.936666666665],
                            ["2018-01-09 21:00:00",14803.46,14863.93,14700.44,14799.0,190.167582,14879.237053833009,14879.237053833009,14700.44,14791.7075,16443.936666666665],
                            ["2018-01-09 21:30:00",14798.99,14798.99,14650.0,14717.82,209.543776,14835.472276916506,14835.472276916506,14650.0,14741.449999999999,16461.41888888889],
                            ["2018-01-09 22:00:00",14717.82,14781.56,14600.0,14615.9,164.859485,14788.461138458253,14788.461138458253,14600.0,14678.82,16446.568888888887],
                            ["2018-01-09 22:30:00",14647.09,14861.56,14615.4,14755.03,228.445843,14733.640569229126,14861.56,14615.4,14719.77,16457.687777777777],
                            ["2018-01-09 23:00:00",14755.33,14780.0,14680.0,14702.33,150.779654,14726.705284614563,14780.0,14680.0,14729.415,16446.824444444443],
                            ["2018-01-09 23:30:00",14709.49,14709.49,14420.0,14462.81,274.752199,14728.060142307282,14728.060142307282,14420.0,14575.447499999998,16392.579999999998],
                            ["2018-01-10 00:00:00",14452.0,14536.36,14407.77,14435.0,279.156552,14651.753821153641,14651.753821153641,14407.77,14457.782500000001,16350.913333333334],
                            ["2018-01-10 00:30:00",14435.0,14459.94,14182.84,14254.92,435.050575,14554.768160576821,14554.768160576821,14182.84,14333.175,16273.684444444445],
                            ["2018-01-10 01:00:00",14234.7,14290.56,14125.0,14259.98,422.926221,14443.97158028841,14443.97158028841,14125.0,14227.560000000001,16200.692222222224],
                            ["2018-01-10 01:30:00",14259.98,14454.95,14144.13,14400.0,377.788542,14335.765790144205,14454.95,14144.13,14314.765,16155.865555555552],
                            ["2018-01-10 02:00:00",14401.0,14480.0,13750.0,13972.46,582.921859,14325.265395072103,14480.0,13750.0,14150.865,16064.027777777777]
                        ]
                    },
                    series: [{
                        type: "candlestick",
                        encode: {
                            x: "date",
                            // y: ["open", "close", "low", "high"],
                            y: ["haOpen","haClose","haLow","haHigh"],
                            tooltip: ["haOpen", "haHigh", "haLow", "haClose"]
                        }
                    }]
                };

                testHelper.create(echarts, 'layout7.5', {
                    title: 'Check: Y use haOpen, haHigh, haLow, haClose, but display name of "haOpen" is open',
                    height: 400,
                    option: option,
                    dataTable: option.dataset.source,
                    info: {
                        series: option.series
                    }
                });
            });
        </script>


        <script>

            require(['echarts', 'data/stock-DJI.json.js'], function (echarts, source) {
                var option = {
                    legend: {},
                    tooltip: {trigger: 'axis'},
                    xAxis: {type: 'time'},
                    yAxis: {},
                    dataset: [{
                        source: source
                    }],
                    dataZoom: [{}, {type: 'inside'}],
                    animation: false,
                    series: [{
                        type: 'candlestick',
                        encode: {
                            x: 0,
                            y: [1, 2, 3, 4]
                        }
                    }]
                };

                testHelper.create(echarts, 'layout8', {
                    title: 'time axis',
                    height: 400,
                    option: option,
                    dataTables: [source],
                    info: {
                        series: option.series
                    }
                });
            });
        </script>


        <script>

            require(['echarts'], function (echarts, source) {
                var option = {
                    legend: {},
                    dataset: [{
                        source: arrayRows1
                    }],
                    parallelAxis: [
                        {dim: 0, type: 'category'},
                        {dim: 1},
                        {dim: 2},
                        {dim: 3}
                    ],
                    parallel: {
                        axisExpandable: true,
                        axisExpandCenter: 15,
                        axisExpandCount: 10,
                        axisExpandWidth: 60,
                        axisExpandTriggerOn: 'mousemove',

                        parallelAxisDefault: {
                            type: 'value',
                            nameLocation: 'end',
                            nameGap: 20,
                            tooltip: {
                                show: true
                            },
                            nameTextStyle: {
                                fontSize: 14
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    },
                    series: [{
                        type: 'parallel'
                    }]
                };

                testHelper.create(echarts, 'layout9', {
                    height: 400,
                    option: option,
                    dataTables: [arrayRows1]
                });
            });
        </script>


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

                var option = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: arrayRows0
                    },
                    series: [
                        {
                            label: {
                                formatter: '{@product} {@[1]}'
                            },
                            type: 'funnel',
                            id: 'pie'
                        }
                    ]
                };

                testHelper.create(echarts, 'layout10', {
                    option: option,
                    dataTable: arrayRows0
                });
            });
        </script>


        <script>
            require(['echarts'], function (echarts) {
                var option = {
                    dataset: {
                        source: [
                            [12, 323, 11.2],
                            [23, 167, 8.3],
                            [81, 284, 12],
                            [91, 413, 4.1],
                            [13, 287, 13.5]
                        ]
                    },
                    xAxis: {},
                    yAxis: {},
                    visualMap: {
                        show: false,
                        dimension: 2,
                        min: 2,
                        max: 15,
                        inRange: {
                            symbolSize: [5, 60]
                        }
                    },
                    series: {
                        type: 'scatter'
                    }
                };

                testHelper.create(echarts, 'layout11', {
                    option: option,
                    dataTable: option.dataset.source
                });
            });
        </script>

        <script>
            require(['echarts'], function (echarts) {
                var option = {
                    dataset: {
                        source: [
                            ['product', '2015', '2016', '2017'],
                            ['Matcha Latte', 43.3, 85.8, 93.7],
                            ['Milk Tea', 83.1, 73.4, 55.1],
                            ['Cheese Cocoa', 86.4, 65.2, 82.5],
                            ['Walnut Brownie', 72.4, 53.9, 39.1]
                        ]
                    },
                    xAxis: {type: 'category'},
                    yAxis: {},
                    series: [
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'}
                    ],
                    toolbox: {
                        feature: {
                            dataView: {}
                        }
                    }
                }

                testHelper.create(echarts, 'layout12', {
                    option: option,
                    dataTable: option.dataset.source
                });
            });
        </script>

    </body>
</html>