test/axis-align-ticks.html - master - githubmirror/echarts

test/axis-align-ticks.html
762 строки108 KB
100pah
refactor(scale): For readability and maintainability (1) Migrate `calcNiceTicks` and `calcNiceExtent` from Scale class override member functions to plain functions, similar to `axisAlignTicks`. Previously it's hard to modify and error-prone. (2) Remove unnecessary override on Scale class hierarchy and limit override usage, which is difficult to understand and error-prone. (3) Simplify the inheritance - shift `LogScale` and `TimeScale` inheritance from `IntervalScale` to `Scale`. (4) Clarify the impl of `IntervalScale` - uniform the parameters setting entry for both "nice ticks" and "align ticks".
18 янв 2026, 21:30
18 янв 2026, 21:3018a23a8
<!DOCTYPE html>
<!--
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>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>



        <div id="main0"></div>
        <div id="main1"></div>
        <div id="main2"></div>
        <div id="main_Log_axis_can_alignTicks_to_value_axis"></div>
        <div id="main_Value_axis_can_alignTicks_to_log_axis"></div>
        <div id="main5"></div>
        <div id="main6"></div>
        <div id="main7"></div>
        <div id="main8"></div>



        <script>
            var colors = ['#5470C6', '#91CC75', '#EE6666'];
            var commonOption = {
                color: colors,
                grid: {
                    right: '20%'
                },
                legend: {
                    data: ['Evaporation', 'Precipitation', 'Temperature']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        // prettier-ignore
                        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'Evaporation',
                        position: 'right',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: 'Precipitation',
                        position: 'right',
                        alignTicks: true,
                        offset: 80,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: '温度',
                        position: 'left',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[2]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name: 'Evaporation',
                        type: 'bar',
                        data: [
                            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
                            3.3
                        ]
                    },
                    {
                        name: 'Precipitation',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: [
                            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
                            2.3
                        ]
                    },
                    {
                        name: 'Temperature',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [
                            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
                        ]
                    }
                ]
            };
        </script>



        <script>
        require([
            'echarts'
        ], function (echarts) {
            var option = JSON.parse(JSON.stringify(commonOption));

            var chart = testHelper.create(echarts, 'main0', {
                title: [
                    'Should align to the first axis if all set alignTicks'
                ],
                option: option
            });
        });
        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var option = JSON.parse(JSON.stringify(commonOption));

                const tmp = option.yAxis;
                option.yAxis = option.xAxis;
                option.xAxis = tmp;
                option.xAxis[1].alignTicks = false;
                option.xAxis[1].splitNumber = 20;
                option.xAxis[1].offset = 30;
                option.grid.top = 100;

                option.series[0].xAxisIndex = 0;
                option.series[1].xAxisIndex = 1;
                option.series[2].xAxisIndex = 2;

                option.series[0].yAxisIndex = 0;
                option.series[1].yAxisIndex = 0;
                option.series[2].yAxisIndex = 0;

                var chart = testHelper.create(echarts, 'main1', {
                    title: [
                        'xAxis can alignTicks',
                        'Should align to the second xAxis with splitNumber: 20'
                    ],
                    option: option
                });
            });
        </script>

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

                var option = JSON.parse(JSON.stringify(commonOption));
                option.yAxis.unshift({
                    type: 'category',
                    offset: 50,
                    data: ['foo', 'bar', 'baz']
                });
                option.series[0].yAxisIndex = 1;
                option.series[1].yAxisIndex = 2;
                option.series[2].yAxisIndex = 3;

                var chart = testHelper.create(echarts, 'main2', {
                    title: [
                        'Should not align to the category axis'
                    ],
                    option: option
                });
            });
        </script>

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

                var option = {
                    legend: {},
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        name: 'x',
                        splitLine: { show: false },
                        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
                    },
                    yAxis: [{
                        type: 'log',
                        alignTicks: true,
                        minorSplitLine: {
                            show: true
                        },
                    }, {
                        type: 'value'
                    }],
                    series: [
                        {
                            name: 'Log',
                            type: 'line',
                            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
                        },
                        {
                            name: 'Linear',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [1, 2, 3, 4, 2, 8, 11, 3, 1]
                        }
                    ]
                }

                var chart = testHelper.create(echarts, 'main_Log_axis_can_alignTicks_to_value_axis', {
                    title: [
                        'Log axis can alignTicks to value axis'
                    ],
                    option: option
                });
            });
        </script>

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

                var option = {
                    legend: {},
                    xAxis: {
                        type: 'category',
                        name: 'x',
                        splitLine: { show: false },
                        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
                    },
                    yAxis: [{
                        type: 'log',
                        minorSplitLine: {
                            show: true
                        },
                    }, {
                        alignTicks: true,
                        type: 'value'
                    }],
                    series: [
                        {
                            name: 'Log',
                            type: 'line',
                            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
                        },
                        {
                            name: 'Linear',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [1, 2, 3, 4, 2, 8, 11, 3, 1]
                        }
                    ]
                }

                var chart = testHelper.create(echarts, 'main_Value_axis_can_alignTicks_to_log_axis', {
                    title: [
                        'Value axis can alignTicks to log axis'
                    ],
                    option: option
                });
            });
        </script>

        <script>
            require([
                'echarts'
            ], function (echarts) {
                var option = {
                    title: {
                        text: 'Rainfall and Flow Relationship',
                        left: 'center'
                    },
                    grid: {
                        bottom: 80
                    },
                    legend: {
                        data: ['Flow', 'Rainfall'],
                        left: 10
                    },
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                            start: 65,
                            end: 85
                        },
                        {
                            type: 'inside',
                            realtime: true,
                            start: 65,
                            end: 85
                        }
                    ],
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLine: { onZero: false },
                            // prettier-ignore
                            data: [
                                '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009 … [Строка слишком длинная. Вы можете скачать файл]
                            ].map(function (str) {
                                return str.replace(' ', '\n');
                            })
                        }
                    ],
                    yAxis: [
                        {
                            name: 'Flow(m^3/s)',
                            type: 'value'
                        },
                        {
                            name: 'Rainfall(mm)',
                            nameLocation: 'start',
                            type: 'value',
                            alignTicks: true,
                            inverse: true
                        }
                    ],
                    series: [
                        {
                            name: 'Flow',
                            type: 'line',
                            areaStyle: {},
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // prettier-ignore
                            data: [
                                0.97, 0.96, 0.96, 0.95, 0.95, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94,  … [Строка слишком длинная. Вы можете скачать файл]
                            ]
                        },
                        {
                            name: 'Rainfall',
                            type: 'line',
                            yAxisIndex: 1,
                            areaStyle: {},
                            lineStyle: {
                                width: 1
                            },
                            showSymbol: false,
                            // prettier-ignore
                            data: [
                                0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.005, 0.017, 0.017, 0.017, 0.017, 0.011, 0, 0, 0, 0, 0, 0, 0, 0, 0,  … [Строка слишком длинная. Вы можете скачать файл]
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main5', {
                    title: [
                        'Should always been aligned in dataZoom'
                    ],
                    option: option
                });
            });
        </script>

        <script>
            require([
                'echarts'
            ], function (echarts) {
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: [
                        {
                            name: 'yAxis1',
                            type: 'value',
                            position: 'left',
                            alignTicks: true
                        },
                        {
                            name: 'yAxis2',
                            type: 'value',
                            position: 'right',
                            alignTicks: true
                        }
                    ],
                    series: [
                        {
                            yAxisIndex: 0,
                            data: [0, 0, 0, 33000000, 0, 0, 0],
                            type: 'line'
                        },
                        {
                            yAxisIndex: 1,
                            data: [-1.0, 0, 0, 0, 1.7, 0, 0],
                            type: 'line'
                        }
                    ]
                };
                var chart = testHelper.create(echarts, 'main6', {
                    title: [
                        'The precision of the max tick of yAxis2 **should be the same with other ticks**',
                        'Its value should be **1.8** (not 1.79999999999999998)'
                    ],
                    option: option
                });
            });
        </script>

        <script>
            require([
                'echarts'
            ], function (echarts) {
				var option = {
				  series: [
					{
					  name: 'a收益率(%)',
					  type: 'line',
					  yAxisIndex: 1,
					  data: [
						'-1.08',
						'1.07',
						'-0.85',
						'-',
						'-',
						'-0.05',
						'1.75',
						'1.23',
						'0.92',
						'1.40',
						'-',
						'-',
						'1.36',
						'0.56',
						'1.61',
						'-1.33',
						'-1.04',
						'-',
						'-',
						'-',
						'-',
						'-0.33',
						'-0.81',
						'-1.08',
						'-',
						'-',
						'-3.04',
						'-2.41',
						'-4.37',
						'-2.73'
					  ],
					  connectNulls: true
					},
					{
					  nameProp: 'gbBRtnCumulative',
					  name: 'b收益率(%)',
					  type: 'line',
					  yAxisIndex: 1,
					  data: [
						'1.33',
						'1.33',
						'0.78',
						'-',
						'-',
						'2.67',
						'3.90',
						'3.47',
						'3.42',
						'4.33',
						'-',
						'-',
						'3.87',
						'2.32',
						'1.28',
						'0.04',
						'1.05',
						'-',
						'-',
						'-',
						'-',
						'0.34',
						'0.99',
						'0.91',
						'-',
						'-',
						'1.49',
						'1.63',
						'0.59',
						'1.26'
					  ],
					  connectNulls: true
					},
					{
					  name: 'a总净值(亿元)',
					  type: 'line',
					  yAxisIndex: 0,
					  data: [
						'0.48',
						'0.49',
						'0.49',
						'0.49',
						'0.49',
						'0.49',
						'0.60',
						'0.60',
						'0.59',
						'0.60',
						'0.60',
						'0.60',
						'0.60',
						'0.63',
						'0.64',
						'0.62',
						'0.62',
						'0.62',
						'0.62',
						'0.62',
						'0.62',
						'0.62',
						'0.62',
						'0.62',
						'0.62',
						'0.62',
						'0.61',
						'0.61',
						'0.60',
						'0.61'
					  ],
					  connectNulls: true,
					  symbol: 'none',
					  areaStyle: { opacity: 0.3 },
					  lineStyle: { width: 0 }
					}
				  ],
				  xAxis: [
					{
					  type: 'category',
					  data: [
						'2021-09-01',
						'2021-09-02',
						'2021-09-03',
						'2021-09-04',
						'2021-09-05',
						'2021-09-06',
						'2021-09-07',
						'2021-09-08',
						'2021-09-09',
						'2021-09-10',
						'2021-09-11',
						'2021-09-12',
						'2021-09-13',
						'2021-09-14',
						'2021-09-15',
						'2021-09-16',
						'2021-09-17',
						'2021-09-18',
						'2021-09-19',
						'2021-09-20',
						'2021-09-21',
						'2021-09-22',
						'2021-09-23',
						'2021-09-24',
						'2021-09-25',
						'2021-09-26',
						'2021-09-27',
						'2021-09-28',
						'2021-09-29',
						'2021-09-30'
					  ]
					}
				  ],
				  yAxis: [
					{
					  type: 'value',
					  name: 'yAxis1',
					  alignTicks: true,
					  scale: true,
					  nameTextStyle: { align: 'center' }
					},
					{
					  type: 'value',
					  name: 'yAxis2',
					  scale: true,
					  nameTextStyle: { align: 'center' }
					}
				  ]
				};
                var chart = testHelper.create(echarts, 'main7', {
                    title: [
                        'The precision of the max tick of yAxis1 **should be the same with other ticks**',
                        'Its value should be **0.66** (not 0.6599999999999999)'
                    ],
                    option: option
                });
            });
        </script>

		<script>
            require([
                'echarts'
            ], function (echarts) {
                var option = {
				  grid: {
					containLabel: true,
					left: '6%',
					right: '5%',
					top: 60,
					bottom: '5%'
				  },
				  xAxis: {
					type: 'category',
					boundaryGap: false,
					data: [
					  '2023-11-24',
					  '2023-12-01',
					  '2023-12-08',
					  '2023-12-15',
					  '2023-12-22',
					  '2023-12-29',
					  '2024-01-05',
					  '2024-01-12',
					  '2024-01-19',
					  '2024-01-26',
					  '2024-02-02',
					  '2024-02-09',
					  '2024-02-23',
					  '2024-03-01',
					  '2024-03-08',
					  '2024-03-15',
					  '2024-03-22',
					  '2024-03-29',
					  '2024-04-05',
					  '2024-04-12',
					  '2024-04-19',
					  '2024-04-26',
					  '2024-05-03',
					  '2024-05-10',
					  '2024-05-17',
					  '2024-05-24'
					]
				  },
				  yAxis: [
					{
					  type: 'value',
					  scale: true,
					  name: 'yAxis1',
					  alignTicks: true
					},
					{
					  type: 'value',
					  scale: true,
					  name: 'yAxis2',
					  yAxisIndex: 1
					}
				  ],
				  series: [
					{
					  name: 'series1',
					  data: [
						3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8,
						3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.8, 3.77
					  ],
					  type: 'line',
					  symbol: 'none',
					  yAxisIndex: 0
					},
					{
					  name: 'series2',
					  data: [
						0.37,
						0.36,
						0.36,
						0.23,
						0.26,
						0.26,
						0.26,
						0.46,
						0.48,
						0.48,
						0.51,
						0.51,
						0.51,
						0.53,
						0.53,
						0.53,
						0.58,
						0.51,
						0.47,
						0.51,
						0.51,
						0.5,
						0.49,
						0.49,
						0.43,
						'-'
					  ],
					  type: 'line',
					  yAxisIndex: 1,
					  connectNulls: true,
					  symbol: 'none'
					}
				  ]
				};
                var chart = testHelper.create(echarts, 'main8', {
                    title: [
                        'The tick labels of yAxis1 **SHOULD NOT** take too much space when **grid.containLabel: true**'
                    ],
                    option: option
                });
            });
        </script>
    </body>
</html>