githubmirror/echarts

test/logScale.html
394 строки13 KB
SihongShen
fix: change the calculation of precision in round method
22 июл 2025, 06:18
22 июл 2025, 06:189171e10

<!--
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/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <!-- <script src="lib/canteen.js"></script> -->
        <!-- <script src="lib/draggable.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>

        <div id='main0'></div>
        <div id='main1'></div>
        <div id='main2_negative'></div>
        <div id='main_small_values'></div>
        <div id='main3'></div>


        <script>

            require([
                'echarts'
            ], function (echarts) {
                var option = {
                    title: {
                        text: '对数轴示例',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    legend: {
                        left: 'left',
                        //data: ['2的指数', '3的指数']
                    },
                        xAxis: [{
                        type: 'category',
                        name: 'x',
                        splitLine: {show: false},
                        data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
                    }],
                    yAxis: [{
                        type: 'log',
                        name: 'y',
                        scale: false
                    }],
                    series: [
                    {
                        name: '3的指数',
                        type: 'line',
                        data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
                    },
                    {
                        name: '2的指数',
                        type: 'line',
                        data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
                    },
                    {
                        name: '0.1 的指数',
                        type: 'line',
                        data: [1, 0.1, 0.01, 1e-3, 1e-4, 1e-5, 1e-6, 1e-7, 1e-8]
                    }]
                };

                var chart = testHelper.create(echarts, 'main0', {
                    title: [
                        'log test 1',
                    ],
                    option: option,
                });


            });

        </script>


        <script>

            require([
                'echarts'
            ], function (echarts) {
                // See #13154
                var option = {
                    xAxis: {
                        type: 'value',
                    },
                    yAxis: {
                        type: 'log',
                        logBase: 2,
                    },
                    series: [
                        {
                            type: 'scatter',
                            itemStyle: {
                                color: 'red',
                            },
                            data: [
                                [1, .5],
                            ],
                        },
                    ],
                };

                var chart = testHelper.create(echarts, 'main1', {
                    title: [
                        'log test 2',
                    ],
                    option: option,
                });


            });

        </script>



        <script>


            require([
                'echarts',
            ], function (echarts /*, data */) {

                var option = {
                    backgroundColor: 'rgba(0,0,0,0.1)',
                    legend: {
                        top: 3,
                        backgroundColor: 'rgba(250,0,0,0.4)',
                        borderRadius: 3,
                        borderWidth: 2,
                        borderColor: 'rgba(150,0,0,0.7)'
                    },
                    tooltip: {},
                    xAxis: [
                        {
                            id: 0,
                            name: 'xAxis_0 long name',
                            nameTextStyle: {
                                rich: {
                                    name_big_1: {
                                        borderWidth: 4,
                                        borderColor: 'rgba(0,180,0,0.5)',
                                        backgroundColor: 'rgba(0,150,0,0.5)',
                                        padding: [10, 20],
                                        color: '#000',
                                        fontSize: 20
                                    }
                                },
                                color: '#555'
                            },
                            nameMoveOverlap: true,
                            nameLocation: 'middle',
                            axisLabel: {
                                textStyle: {
                                    rich: {
                                        label_big_1: {
                                            borderWidth: 4,
                                            borderColor: 'rgba(0,180,0,0.5)',
                                            backgroundColor: 'rgba(0,150,0,0.5)',
                                            padding: [10, 20],
                                            color: '#000',
                                            fontSize: 20
                                        }
                                    },
                                    color: '#555'
                                }
                            },
                            axisLine: {onZero: false},
                            position: ['bottom', 'top']
                        }
                    ],
                    yAxis: [
                        {
                            id: 0,
                            name: 'yAxis_0 long name',
                            type: 'log',
                            nameTextStyle: {
                                rich: {
                                    name_big_1: {
                                        borderWidth: 4,
                                        borderColor: 'rgba(0,180,0,0.5)',
                                        backgroundColor: 'rgba(0,150,0,0.5)',
                                        padding: [10, 20],
                                        color: '#000',
                                        fontSize: 20
                                    }
                                },
                                color: '#555'
                            },
                            nameMoveOverlap: true,
                            nameLocation: 'middle',
                            axisLabel: {
                                textStyle: {
                                    rich: {
                                        label_big_1: {
                                            borderWidth: 4,
                                            borderColor: 'rgba(0,180,0,0.5)',
                                            backgroundColor: 'rgba(0,150,0,0.5)',
                                            padding: [10, 20],
                                            color: '#000',
                                            fontSize: 20
                                        }
                                    },
                                    color: '#555'
                                }
                            },
                            axisLine: {onZero: false},
                            position: ['left', 'right']
                        }
                    ],
                    grid: [
                        {
                            left: 100,
                            right: 10,
                            top: 30,
                            bottom: 100,
                            show: true,
                            backgroundColor: 'rgba(150,0,0,0.2)'
                        }
                    ],
                    series: [
                        {
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            symbolSize: 10,
                            name: 'series_small_0',
                            data: [[-50, 12]],
                            type: 'scatter'
                        },
                        {
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            symbolSize: 10,
                            name: 'series_big_0',
                            data: [
                                [10000000000, -832],
                                [55555550000, 31133232233]
                            ],
                            type: 'scatter'
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main2_negative', {
                    title: [
                        'Test negative',
                    ],
                    option: option,
                });

            });


        </script>

        <script>

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

                function genData(exponent) {
                    return [
                        [0.00001782501876267492, `1.6783442046243093e${-9 + exponent}`],
                        [0.20000000000000004, `1.5239855205892977e${-13 + exponent}`],
                        [0.3097633237824966, `9.94535044331967e${-14 + exponent}`],
                        [1, `2.966552224094815e${-19 + exponent}`],
                        // [10, `1.6783442046243093e${-9 + exponent}`],
                        // [100, `1.5239855205892977e${-13 + exponent}`]
                    ];
                }

                option = {
                    style: {
                        height: '100%',
                        width: '100%'
                    },
                    tooltip: {},
                    grid: [
                        {
                        containLabel: true
                        }
                    ],
                    yAxis: [
                        {
                            type: 'log',
                            logBase: 10,
                            axisLabel: {
                                formatter: function (value) {
                                    return value.toExponential(0);
                                }
                            }
                        }
                    ],
                    xAxis: [
                        {
                            // type: 'log',
                            // logBase: 10
                        }
                    ],
                    series: [
                        {
                            data: genData(0),
                            type: 'line',
                            // showSymbol: false
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main_small_values', {
                    title: [
                        'test small values',
                    ],
                    option: option,
                    inputs: [
                        {
                            type: 'select',
                            text: 'exponent:',
                            values: [0, -9, -19, -50],
                            onchange: function () {
                                chart.setOption({
                                    series: [{
                                        data: genData(this.value)
                                    }]
                                });
                            }
                        },
                    ]
                });


            });

        </script>

        <script>

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

                option = {
                    xAxis: {
                        data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
                    },
                    yAxis: {},
                    series: [
                        {
                        type: 'candlestick',
                        data: [
                            ['0.000000000012', '0.000000000034', '0.000000000010', '0.000000000038']
                        ]
                        }
                    ]
                    };

                var chart = testHelper.create(echarts, 'main3', {
                    title: [
                        'Test Case Description of main0'
                    ],
                    option: option,
                });
            });
        </script>

    </body>
</html>