xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.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="layout8"></div>
        <div id="layout9"></div>
        <div id="layout10"></div>
        <div id="layout11"></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',
                        mapType: 'china'
                    }, {
                        name: 'B',
                        type: 'map',
                        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'], 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', 'data/stock-DJI.json'], 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: arrayRows0
                });
            });
        </script>

</script>

    </body>
</html>