githubmirror/echarts

test/dataset-layout.html
417 строк14 KB
pissang
test: use simpleRequire to replace esl
06 май 2021, 11:47
06 май 2021, 11:478544dd7

<!--
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/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>
        <div id="layout3"></div>
        <div id="layout4"></div>
        <div id="layout5"></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>




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

                // Thanks to: https://github.com/lzp4ever
                var option = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                    },
                    toolbox: {
                        top: 25,
                        // right: 20,
                        feature: {
                            magicType: {
                                type: ['stack', 'tiled']
                            }
                        }
                    },
                    dataset: {
                        source: [
                            ['series', '1', '2', '3', '4', '5', '6'],
                            ['a', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                            ['b', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                            ['c', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                            ['d', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
                        ],
                    },
                    xAxis: { type: 'category' },
                    yAxis: { gridIndex: 0 },
                    series: [
                        { type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} },
                        { type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} },
                        { type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} },
                        { type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} },

                    ],
                };

                var chart = testHelper.create(echarts, 'layout3', {
                    title: 'stack',
                    option: option,
                    dataTable: option.dataset.source
                });
            });
        </script>






        <script>
            require(['echarts'], function (echarts) {
                var option = {
                    dataset: [{
                        source: [
                            ['2012-12-12', 323, 11.2],
                            ['2012-12-13', 167, 8.3],
                            ['2012-12-14', 284, 12],
                            ['2012-12-18', 413, 4.1],
                            ['2012-12-19', 287, 13.5]
                        ]
                    }, {
                        source: [
                            [new Date(2012, 11, 12), 323 + 100, 11.2 + 100],
                            [new Date(2012, 11, 13), 167 + 100, 8.3 + 100],
                            [new Date(2012, 11, 14), 284 + 100, 12 + 100],
                            [new Date(2012, 11, 18), 413 + 100, 4.1 + 100],
                            [new Date(2012, 11, 19), 287 + 100, 13.5 + 100]
                        ]
                    }],
                    legend: {},
                    xAxis: {
                        type: 'time'
                    },
                    yAxis: {},
                    dataZoom: [{
                        type: 'slider',
                    }, {
                        type: 'inside'
                    }],
                    grid: {
                        bottom: 80
                    },
                    series: [{
                        name: 'A1',
                        encode: {x: 0, y: 1},
                        type: 'line'
                    }, {
                        name: 'A2',
                        encode: {x: 0, y: 2},
                        type: 'line'
                    }, {
                        name: 'B1',
                        encode: {x: 0, y: 1},
                        datasetIndex: 1,
                        type: 'line'
                    }, {
                        name: 'B2',
                        encode: {x: 0, y: 2},
                        datasetIndex: 1,
                        type: 'line'
                    }]
                };

                testHelper.create(echarts, 'layout4', {
                    title: 'time axis',
                    option: option,
                    dataTables: [
                        option.dataset[0].source,
                        option.dataset[1].source
                    ]
                });
            });
        </script>







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

                var option = {
                    dataset: {
                        source: [
                            ['2012-12-12 15:18:09.321', 323, 11.2],
                            ['2012-12-12 15:18:10.432', 167, 8.3],
                            ['2012-12-12 15:18:11.543', 284, 12],
                            ['2012-12-12 15:18:12.654', 413, 4.1],
                            ['2012-12-12 15:18:13.765', 287, 13.5]
                        ]
                    },
                    legend: {},
                    xAxis: {
                        type: 'time',
                        axisLabel: {
                            formatter: function (val) {
                                return echarts.format.formatTime('hh:mm:ss.SSS\nyyyy-MM-dd', val)
                            }
                        }
                    },
                    yAxis: {},
                    dataZoom: [{
                        type: 'slider',
                    }, {
                        type: 'inside'
                    }],
                    grid: {
                        bottom: 80
                    },
                    series: [{
                        name: 'A1',
                        encode: {x: 0, y: 1},
                        label: {
                            show: true,
                            formatter: function (param) {
                                return echarts.format.formatTime('hh:mm:ss.SSS', param.value[0])
                            },
                            textBorderColor: '#fff',
                            textBorderWidth: 3
                        },
                        type: 'line'
                    }, {
                        name: 'A2',
                        encode: {x: 0, y: 2},
                        type: 'line'
                    }]
                };

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







    </body>
</html>