githubmirror/echarts

test/bar-background.html
538 строк20 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">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.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>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
            #main {
                background: #fff;
            }
        </style>

        <div id="main0"></div>
        <div id="main1"></div>
        <div id="main2"></div>
        <div id="main3"></div>
        <div id="main4"></div>
        <div id="main5"></div>
        <div id="main6"></div>
        <div id="main7"></div>

        <script>

            require([
                'echarts'
            ], function (echarts) {

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

                for (var i = 0; i < 100; i++) {
                    xAxisData.push('类目' + i);
                    data1.push((Math.random() * 5).toFixed(2));
                    data2.push(Math.random().toFixed(2));
                    data3.push((Math.random() + 0.5).toFixed(2));
                    data4.push((Math.random() + 0.3).toFixed(2));
                }

                var data = [["4.70","4.69","2.48","0.77","3.08","4.57","2.68","3.35","0.37","1.86","2.68","0.64","1.82","1.88","0.31","0.45","4.48","3.08","1.58","2.98","1.87","0.96","3.43","2.58","0.41","2.69","0.59","3.47","4.33","1.75","0.51","1.01","1.60","3.62","2.29","2.40","1.52","2.30","0.18","3.99","0.26","2.92","2.94","0.54","2.98","3.71","2.24","0.32","1.98","2.56","1.81","4.67","2.49","1.73","1.79","2.79","3.39","1.83","3.24","3.76","1.23","1.69","3.55","2.66","1.83","3.69","2.70","0.75","0.71","1.44","3.23","1.49","1.50","3.61","4.41","1.26","2.93","2.84","4.11","0.80","2.67","2.59","2.71","4.85","1.28","1.21","4.32","4.04","1.15","4.38","4.41","4.94","4.13","0.86","1.97","3.58","3.02","1.29","1.47","3.75"],["0.78","0.90","0.54","0.75","0.68","0.68","0.84","0.87","0.78","0.79","0.77","0.34","0.81","0.80","0.28","0.87","0.98","0.92","0.66","0.87","0.88","0.56","0.34","0.67","0.60","0.00","0.22","0.87","0.81","0.69","0.41","0.02","0.18","0.55","0.48","0.90","0.62","0.17","0.37","0.35","0.31","0.78","0.34","0.56","0.22","0.87","0.55","0.94","0.58","0.66","0.33","0.73","0.78","0.44","0.79","0.12","0.81","0.77","0.33","0.30","0.86","0.87","0.09","0.91","0.90","0.34","0.76","0.93","0.55","0.41","0.63","0.96","0.80","0.41","0.53","0.53","0.66","0.24","0.24","0.99","0.92","0.85","0.44","0.92","0.28","0.61","0.20","0.74","0.52","0.91","0.42","0.08","0.00","0.57","0.81","0.39","0.41","0.72","0.02","0.20"],["1.17","0.65","0.98","1.08","1.02","1.41","1.01","1.17","0.63","0.94","0.78","1.43","0.67","1.09","1.29","0.60","0.50","1.38","0.76","0.94","0.79","1.44","0.55","1.48","1.13","0.63","1.07","0.57","1.43","0.81","0.87","0.70","1.04","1.43","1.00","0.50","0.54","0.57","0.97","0.58","1.19","0.73","0.76","0.75","1.39","0.93","0.60","1.28","1.14","1.18","0.60","0.59","1.46","0.64","1.44","0.59","1.49","0.84","0.71","1.44","1.11","1.18","1.40","0.64","1.15","1.07","1.35","0.86","1.13","1.41","1.03","0.57","1.44","0.93","1.47","1.16","1.40","1.14","0.97","0.78","1.49","0.59","0.99","1.35","0.88","1.02","1.16","1.07","0.81","0.87","1.34","0.98","1.17","1.46","0.71","1.13","0.80","1.24","0.76","0.68"],["1.04","0.54","0.55","1.05","1.20","1.13","0.53","0.63","0.82","0.52","0.86","0.33","0.64","1.14","0.47","0.72","0.97","1.18","1.02","0.53","1.14","1.24","1.13","0.60","0.47","0.94","0.64","0.43","0.71","0.33","0.46","0.82","0.80","0.97","0.43","1.29","0.65","0.92","0.63","0.58","0.31","1.09","0.35","0.43","1.19","0.47","0.59","0.52","0.79","0.69","0.54","0.39","0.33","1.26","0.40","0.76","0.80","0.96","0.82","1.26","0.70","0.50","0.67","1.27","1.24","0.49","0.94","0.97","0.90","1.03","1.28","0.46","0.57","1.23","0.40","0.71","1.08","0.51","1.03","0.38","0.81","0.44","1.02","0.79","1.08","1.01","0.66","0.80","0.65","0.97","0.56","0.33","0.61","0.92","0.40","0.77","1.05","1.21","0.34","0.84"]];

                var option = {
                    legend: {
                        data: ['bar', 'bar2', 'bar3', 'bar4'],
                        align: 'left'
                    },
                    toolbox: {
                        // y: 'bottom',
                        feature: {
                            magicType: {
                                type: ['line', 'bar', 'stack', 'tiled']
                            },
                            dataZoom: {
                                yAxisIndex: false
                            },
                            dataView: {},
                            saveAsImage: {
                                pixelRatio: 2
                            }
                        }
                    },
                    tooltip: {},
                    dataZoom: [{
                        startValue: 48,
                        endValue: 99,
                        type: 'inside'
                    }, {
                        startValue: 48,
                        endValue: 99,
                        type: 'slider'
                    }],
                    xAxis: {
                        data: xAxisData,
                        silent: false,
                        splitLine: {
                            show: false
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    yAxis: {
                        splitArea: {
                            show: false
                        }
                    },
                    series: [{
                        name: 'bar',
                        type: 'bar',
                        stack: 'one',
                        data: data[0],
                        showBackground: true
                    }, {
                        show: false,
                        name: 'bar2',
                        type: 'bar',
                        stack: 'one',
                        data: data[1]
                    }, {
                        name: 'bar3',
                        type: 'bar',
                        stack: 'two',
                        data: data[2]
                    }, {
                        name: 'bar4',
                        type: 'bar',
                        stack: 'two',
                        data: data[3],
                        silent: true
                    }],
                    animationDelay: function (idx) {
                        return idx * 5;
                    },
                    animationDelayUpdate: function (idx) {
                        return idx * 5;
                    }
                }

                var chart = testHelper.create(echarts, 'main0', {
                    option: option,
                });

                chart.on('click', function (params) {
                    console.log(params);
                });
            });
        </script>


        <script>

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {

                var option = {
                    xAxis: [{
                        type: 'category'
                    }, {
                        gridIndex: 1
                    }],
                    yAxis: [{
                    }, {
                        type: 'category',
                        gridIndex: 1
                    }],
                    grid: [{
                        containLabel: true,
                        left: 10,
                        right: '55%'
                    }, {
                        containLabel: true,
                        left: '55%',
                        right: 10
                    }],
                    tooltip: {},
                    series: [{
                        type: 'bar',
                        large: true,
                        largeThreshold: 2,
                        data: [
                            ['mm', 33],
                            ['yy', -44],
                            ['tt', 55],
                            ['rr', 66]
                        ],
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(0, 0, 255, 0.2)'
                        }
                    }, {
                        type: 'bar',
                        large: true,
                        largeThreshold: 2,
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        encode: {
                            x: 1,
                            y: 0
                        },
                        data: [
                            ['mm', 33],
                            ['yy', -44],
                            ['tt', 55],
                            ['rr', 66]
                        ],
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(0, 0, 255, 0.2)'
                        }
                    }]
                };

                var chart = testHelper.create(echarts, 'main1', {
                    option: option,
                    title: [
                        'Background with large render mode.'
                    ]
                });
            });

        </script>



        <script>

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {

                var option = {
                    xAxis: [{
                        type: 'category'
                    }, {
                        gridIndex: 1
                    }],
                    yAxis: [{
                    }, {
                        type: 'category',
                        gridIndex: 1
                    }],
                    grid: [{
                        containLabel: true,
                        left: 10,
                        right: '55%'
                    }, {
                        containLabel: true,
                        left: '55%',
                        right: 10
                    }],
                    tooltip: {},
                    series: [{
                        type: 'bar',
                        data: [
                            ['mm', 33],
                            ['yy', -44],
                            ['tt', 55],
                            ['rr', 66]
                        ],
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(0, 0, 255, 0.2)'
                        }
                    }, {
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        encode: {
                            x: 1,
                            y: 0
                        },
                        data: [
                            ['mm', 33],
                            ['yy', -44],
                            ['tt', 55],
                            ['rr', 66]
                        ],
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(0, 0, 255, 0.2)'
                        }
                    }]
                };

                var chart = testHelper.create(echarts, 'main2', {
                    option: option,
                    title: [
                        'Background with normal render mode.'
                    ]
                });
            });

        </script>



        <script>

            require(['echarts'], function (echarts) {

                var chart = echarts.init(document.getElementById('main3'));

                var option = {
                    angleAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        z: 10
                    },
                    tooltip: {
                    },
                    radiusAxis: {
                    },
                    polar: {
                        center: ['50%', '50%']
                    },
                    series: [{
                        type: 'bar',
                        data: [1, 2, '-', 3, 0, 5, 7],
                        coordinateSystem: 'polar',
                        barMaxWidth: '50%',
                        barMinHeight: 10,
                        showBackground: true
                    }]
                };

                var chart = testHelper.create(echarts, 'main3', {
                    option: option,
                    title: [
                        'Bar background on radial polar'
                    ]
                });
            });
        </script>

        <script>

            require(['echarts'], function (echarts) {

                var chart = echarts.init(document.getElementById('main4'));

                var option = {
                    angleAxis: {
                        triggerEvent: true
                    },
                    radiusAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        z: 10,
                        triggerEvent: true
                    },
                    polar: {
                    },
                    tooltip: {},
                    series: [{
                        type: 'bar',
                        data: [1, '-', 4, 3, '-', 5, 7],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: '#00f'
                            }
                        },
                        barWidth: '50%',
                        showBackground: true
                    }]
                };

                var chart = testHelper.create(echarts, 'main4', {
                    option: option,
                    title: [
                        'Bar background on tangential polar'
                    ]
                });
            });
        </script>

        <script>

            require(['echarts'], function (echarts) {

                var chart = echarts.init(document.getElementById('main5'));

                var option = {
                    angleAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四'],
                        z: 10
                    },
                    radiusAxis: {
                    },
                    polar: {
                    },
                    series: [{
                        type: 'bar',
                        data: [1, 2, 3, 4],
                        coordinateSystem: 'polar',
                        name: 'A',
                        showBackground: true
                    }, {
                        type: 'bar',
                        data: [2, 4, 6, 8],
                        coordinateSystem: 'polar',
                        name: 'B'
                    }, {
                        type: 'bar',
                        data: [1, 2, 3, 4],
                        coordinateSystem: 'polar',
                        name: 'C'
                    }],
                    legend: {
                        show: true,
                        data: ['A', 'B', 'C']
                    }
                };

                var chart = testHelper.create(echarts, 'main5', {
                    option: option,
                    title: [
                        'Multiple bar series with background on radial polar'
                    ]
                });
            });
        </script>


        <script>

            require(['echarts'], function (echarts) {

                var chart = echarts.init(document.getElementById('main6'));

                var option = {
                    angleAxis: {
                        // clockwise: false
                    },
                    radiusAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四'],
                        z: 10
                    },
                    polar: {
                    },
                    series: [{
                        type: 'bar',
                        data: [1, 2, 3, 4],
                        coordinateSystem: 'polar',
                        name: 'A',
                        showBackground: true
                    }, {
                        type: 'bar',
                        data: [2, 4, 6, 8],
                        coordinateSystem: 'polar',
                        name: 'B'
                    }, {
                        type: 'bar',
                        data: [1, 2, 3, 4],
                        coordinateSystem: 'polar',
                        name: 'C'
                    }],
                    legend: {
                        show: true,
                        data: ['A', 'B', 'C']
                    }
                };

                var chart = testHelper.create(echarts, 'main6', {
                    option: option,
                    title: [
                        'polar bars'
                    ]
                });
            });
        </script>

        <script>

            require(['echarts'], function (echarts) {

                var chart = echarts.init(document.getElementById('main7'));

                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', '1', '3', '4', '5', '6', '7', '8']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [110, 120, 150, 250, 350, 400, 500, 600],
                        type: 'bar',
                        itemStyle: {
                            barBorderWidth: 20,
                            barBorderColor: 'rgba(50,50,50,0.3)'
                        },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'green',
                            barBorderRadius: [20, 20, 20, 20],
                        }
                    }]
                };

                var chart = testHelper.create(echarts, 'main7', {
                    option: option,
                    title: [
                        'background borderRadius'
                    ],
                    buttons: [{
                        text: 'update borderRadius to [30, 40, 0, 60]',
                        onclick: function () {
                            chart.setOption({
                                series: {
                                    backgroundStyle: {
                                        borderRadius: [30, 40, 0, 60]
                                    }
                                }
                            });
                        }
                    }]
                });
            });
        </script>
    </body>
</html>