xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.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(0, 112, 6);
                color: #fff;
            }
        </style>


        <div id="layout0"></div>
        <div id="layout1"></div>
        <div id="layout2"></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]
            ];
        </script>


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

                var option = {
                    legend: {},
                    tooltip: {},
                    xAxis: {type: 'category'},
                    yAxis: {},
                    dataset: {
                        source: arrayRows0
                    },
                    series: [
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'}
                    ]
                };

                testHelper.create(echarts, 'layout0', {
                    title: '[Default] seriesLayoutBy, enocde, name, head, legend',
                    option: option,
                    dataTable: arrayRows0
                });
            });
        </script>


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

                var option = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: arrayRows0
                    },
                    xAxis: [
                        {type: 'category', gridIndex: 0},
                        {type: 'category', gridIndex: 1}
                    ],
                    yAxis: [
                        {gridIndex: 0},
                        {gridIndex: 1}
                    ],
                    grid: [
                        {bottom: '55%'},
                        {top: '55%'}
                    ],
                    series: [
                        {type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}},
                        {type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}},
                        {type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}},
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'},
                    ]
                };

                testHelper.create(echarts, 'layout1', {
                    title: 'seriesLayoutBy: "row" and "column" \n[Default] enocde, name, head, legend',
                    option: option,
                    dataTable: arrayRows0,
                    height: 500,
                    info: {
                        grid: option.grid,
                        series: option.series
                    }
                });
            });
        </script>


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

                var option = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    dataset: {
                        source: arrayRows1
                    },
                    xAxis: {type: 'category'},
                    yAxis: {gridIndex: 0},
                    grid: {top: '55%'},
                    series: [
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {
                            type: 'pie',
                            id: 'pie',
                            radius: '30%',
                            center: ['50%', '25%'],
                            label: {
                                formatter: '{b}: {@2012} ({d}%)'
                            },
                            encode: {
                                itemName: 'product',
                                value: '2012',
                                tooltip: '2012'
                            }
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'layout2', {
                    title: 'seriesLayoutBy: row and column, setOption, pie \n [Default] enocde, name, head, legend',
                    option: option,
                    dataTable: arrayRows1,
                    height: 500
                });

                chart && chart.on('updateAxisPointer', function (event) {
                    var xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        var dimension = xAxisInfo.value + 1;
                        chart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });
            });
        </script>


    </body>
</html>