xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791
							<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/draggable.js"></script>
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #146402;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 300px;
            }
        </style>

         <h1>No scroll, left not set (should be center)</h1>
        <div class="chart" id="plain"></div>
        <h1>No scroll, width 300, right: 10</h1>
        <div class="chart" id="plain2"></div>
        <h1>No scroll, has '\n' after 'line3', bottom: 20</h1>
        <div class="chart" id="plain3"></div>
        <h1>No scroll, vertical, has '\n' after 'line3', right 20</h1>
        <div class="chart" id="plain-v"></div>
        <h1>No scroll, vertical, top 'middle', left: 20, heigth: 150</h1>
        <div class="chart" id="plain-v2"></div>
        <h1>Scroll</h1>
        <div class="chart" id="scroll"></div>
         <h1>Scroll auto: try to change window size (width: 80%, right: 30)</h1>
        <div class="chart" id="scroll-auto"></div>
        <h1>Scroll auto: left: 30, right: 30, bottom: 0, position: 'start'</h1>
        <div class="chart" id="scroll-lr"></div>
        <h1>Scroll vertically</h1>
        <div class="chart" id="scroll-v"></div>
        <h1>Scroll vertically, left: 10, top: 'center', position: 'start', height: 50% (Turn the second page and resize it until page button disappear)</h1>
        <div class="chart" id="scroll-v2"></div>

        <script>
            function makeSeries(seriesCount, categoryCount) {
                var series = [];
                var legendData = [];
                var xAxisData = [];

                for (var j = 0; j < categoryCount; j++) {
                    xAxisData.push('category' + j);
                }

                for (var i = 0; i < seriesCount; i++) {
                    var data = [];
                    for (var j = 0; j < categoryCount; j++) {
                        data.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    var seriesName = 'line' + i;
                    series.push({
                        name: seriesName,
                        type: 'line',
                        stack: 'all',
                        symbol: 'circle',
                        symbolSize: 10,
                        data: data,
                        step: 'end'
                    });
                    legendData.push(seriesName);
                }

                return {
                    series: series,
                    legendData: legendData,
                    xAxisData: xAxisData
                }
            }
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(5, 3);

                var option = {
                    legend: {
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'plain', option);
            })
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(10, 3);

                var option = {
                    legend: {
                        right: 10,
                        width: 300,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    grid: {
                        top: 100,
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'plain2', option);
            })
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(10, 3);
                seriesInfo.legendData.splice(4, 0, '\n');

                var option = {
                    legend: {
                        bottom: 20,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    grid: {
                        bottom: 100
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'plain3', option);
            })
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(20, 3);
                seriesInfo.legendData.splice(4, 0, '\n');

                var option = {
                    legend: {
                        orient: 'vertical',
                        right: 20,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    grid: {
                        right: 240
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'plain-v', option);
            })
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(20, 3);

                var option = {
                    legend: {
                        orient: 'vertical',
                        left: 20,
                        top: 'center',
                        height: 150,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    },
                    tooltip: {
                    },
                    grid: {
                        left: 280
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'plain-v2', option);
            })
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legendScroll',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(50, 3);

                var option = {
                    legend: [{
                        type: 'scroll',
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)'
                    }, {
                        type: 'scroll',
                        bottom: 0,
                        data: seriesInfo.legendData,
                        backgroundColor: 'rgba(0,100,50,0.2)',
                        pageButtonPosition: 'start'
                    }],
                    tooltip: {
                    },
                    grid: {
                        left: 280
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll', option, {draggable: true});
            })
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legendScroll',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(5, 3);

                var option = {
                    legend: {
                        type: 'scroll',
                        width: '80%',
                        right: 30,
                        data: seriesInfo.legendData,
                        pageIconSize: 50,
                        pageIconColor: 'red',
                        pageIconInactiveColor: 'green',
                        backgroundColor: 'rgba(0,100,50,0.2)',
                        pageTextStyle: {
                            color: 'yellow',
                            fontSize: 22
                        }
                    },
                    tooltip: {
                    },
                    grid: {
                        left: 280
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll-auto', option, {draggable: true, width: 400});
            })
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legendScroll',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(55, 3);

                var option = {
                    legend: {
                        type: 'scroll',
                        bottom: 0,
                        right: 30,
                        left: 30,
                        data: seriesInfo.legendData,
                        pageIconSize: 5,
                        pageIconColor: 'red',
                        pageIconInactiveColor: 'green',
                        backgroundColor: 'rgba(0,100,50,0.2)',
                        pageButtonPosition: 'start',
                        pageButtonGap: 20,
                        pageTextStyle: {
                            fontSize: 9
                        }
                    },
                    tooltip: {
                    },
                    grid: {
                        left: 280
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll-lr', option, {draggable: true, width: 400});
            })
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legendScroll',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(55, 3);

                var option = {
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        bottom: 0,
                        right: 30,
                        data: seriesInfo.legendData
                    },
                    tooltip: {
                    },
                    grid: {
                        right: 180
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll-v', option, {draggable: true, width: 400});
            })
        </script>


        <script>
            require([
                'echarts',
                // 'echarts/chart/line',
                // 'echarts/component/title',
                // 'echarts/component/legendScroll',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/dataZoomInside',
                // 'zrender/svg/svg'
            ], function (echarts) {

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var data3 = [];

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    if (i < 5 && i > 1) {
                        data1.push(0);
                    }
                    else {
                        data1.push(+(Math.random() + 0.5).toFixed(3));
                    }
                    data2.push(+(Math.random() + 0.5).toFixed(3));
                    data3.push(+(Math.random() + 0.5).toFixed(3));
                }

                var seriesInfo = makeSeries(5, 3);

                var option = {
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        top: 'middle',
                        left: 10,
                        height: '50%',
                        borderColor: '#819356',
                        borderWidth: 2,
                        borderRadius: 4,
                        data: seriesInfo.legendData,
                        pageButtonPosition: 'start'
                    },
                    tooltip: {
                    },
                    grid: {
                        left: 180
                    },
                    xAxis: {
                        data: seriesInfo.xAxisData
                    },
                    yAxis: {
                        splitArea: {
                            show: true
                        }
                    },
                    series: seriesInfo.series
                };

                testHelper.createChart(echarts, 'scroll-v2', option, {draggable: true, width: 400});
            })
        </script>


    </body>
</html>