githubmirror/echarts

test/line-sampling.html
294 строки13 KB
fuchunhui
fix(line): ensure the correct order of indices, add test case. close #14689
17 фев 2022, 14:33
17 фев 2022, 14:336ba672d
<!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>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>

        <div id="main0"></div>
        <div id="main1"></div>

        <script>
            require([
                'echarts'
            ], function (echarts) {
                const data = [
                    ["2021-03-03T15:30:00.000Z", 48.1],
                    ["2021-03-03T15:45:00.000Z", 47.9],
                    ["2021-03-03T16:00:00.000Z", 47.7],
                    ["2021-03-03T16:15:00.000Z", 47.6],
                    ["2021-03-03T16:30:00.000Z", 47.8],
                    ["2021-03-03T16:45:00.000Z", 48.2],
                    ["2021-03-03T17:00:00.000Z", 48.3],
                    ["2021-03-03T17:45:00.000Z", 48.3],
                    ["2021-03-03T18:00:00.000Z", 48.3],
                    ["2021-03-03T18:15:00.000Z", 48.6],
                    ["2021-03-03T18:30:00.000Z", 48.3],
                    ["2021-03-03T18:45:00.000Z", 48.3],
                    ["2021-03-03T19:00:00.000Z", 48.8],
                    ["2021-03-03T19:15:00.000Z", 48.3],
                    ["2021-03-03T19:30:00.000Z", 48.3],
                    ["2021-03-03T19:45:00.000Z", 48.3],
                    ["2021-03-03T20:00:00.000Z", 48.3],
                    ["2021-03-03T20:15:00.000Z", 48.3],
                    ["2021-03-03T20:30:00.000Z", 48.3],
                    ["2021-03-03T20:45:00.000Z", 48.7],
                    ["2021-03-03T21:00:00.000Z", 46.3],
                    ["2021-03-03T21:15:00.000Z", 42.3],
                    ["2021-03-03T21:30:00.000Z", 44.3],
                    ["2021-03-03T21:45:00.000Z", 48.9],
                    ["2021-03-03T22:00:00.000Z", 48.1],
                    ["2021-03-03T22:15:00.000Z", 48.3],
                    ["2021-03-03T22:30:00.000Z", 49.7],
                    ["2021-03-03T22:45:00.000Z", 49.1],
                    ["2021-03-03T23:00:00.000Z", 48.3],
                    ["2021-03-03T23:15:00.000Z", 46.8],
                    ["2021-03-03T23:30:00.000Z", 48.3],
                    ["2021-03-03T23:45:00.000Z", null],
                    ["2021-03-04T00:00:00.000Z", 48.3],
                    ["2021-03-04T00:15:00.000Z", 51],
                    ["2021-03-04T00:30:00.000Z", 51.5],
                    ["2021-03-04T00:45:00.000Z", 51.9],
                    ["2021-03-04T01:00:00.000Z", 52.4],
                    ["2021-03-04T01:15:00.000Z", 52.7],
                    ["2021-03-04T01:30:00.000Z", 52.9],
                    ["2021-03-04T01:45:00.000Z", 53],
                    ["2021-03-04T02:00:00.000Z", 53.2],
                    ["2021-03-04T02:15:00.000Z", 53.3],
                    ["2021-03-04T05:15:00.000Z", null],
                    ["2021-03-04T02:30:00.000Z", null],
                    ["2021-03-04T02:45:00.000Z", null],
                    ["2021-03-04T03:00:00.000Z", null],
                    ["2021-03-04T03:15:00.000Z", null],
                    ["2021-03-04T03:30:00.000Z", null],
                    ["2021-03-04T03:45:00.000Z", null],
                    ["2021-03-04T04:00:00.000Z", null],
                    ["2021-03-04T04:15:00.000Z", null],
                    ["2021-03-04T04:30:00.000Z", null],
                    ["2021-03-04T04:45:00.000Z", null],
                    ["2021-03-04T05:00:00.000Z", null],
                    ["2021-03-04T05:15:00.000Z", null],
                    ["2021-03-04T05:30:00.000Z", null],
                    ["2021-03-04T05:45:00.000Z", 53.3],
                    ["2021-03-04T06:00:00.000Z", 53.3],
                    ["2021-03-04T06:15:00.000Z", 53.5],
                    ["2021-03-04T06:30:00.000Z", 53.6],
                    ["2021-03-04T06:45:00.000Z", 53.7],
                    ["2021-03-04T07:00:00.000Z", 53.7],
                    ["2021-03-04T07:15:00.000Z", 53.7],
                    ["2021-03-04T07:30:00.000Z", 53.7],
                    ["2021-03-04T07:45:00.000Z", 53.6],
                    ["2021-03-04T08:00:00.000Z", 53.5],
                    ["2021-03-04T08:15:00.000Z", 53.4],
                    ["2021-03-04T08:30:00.000Z", 53.1],
                    ["2021-03-04T08:45:00.000Z", 52.8],
                    ["2021-03-04T09:00:00.000Z", 52.5]
                ];
                const start = new Date('2021-03-04T09:15:00.000Z');
                for (let i = 0; i < 1560; i++) {
                    const date = new Date(start.getTime() + i * 15 * 60 * 1000);
                    const value = 40 + Number((Math.random() * (3 + Math.ceil(i / 100))).toFixed(1));
                    data.push([date.toISOString(), value]);
                }

                const option = {
                    title: { text: "Data" },
                    tooltip: { trigger: "axis", axisPointer: { animation: true } },
                    legend: {
                        data: ["relative humidity"],
                    },
                    dataZoom: [
                        { realtime: true, xAxisIndex: [0, 1], filterMode: "weakFilter", id: 'dz-s' },
                        { type: "inside", realtime: true, xAxisIndex: [0, 1] },
                    ],
                    toolbox: { feature: { saveAsImage: {}, restore: {} } },
                    xAxis: {
                        min: '2021-03-03T15:00:00.000Z',
                        type: "time"
                    },
                    yAxis: [
                        {
                            type: "value",
                            position: "left",
                            name: "%",
                            min: 0,
                            max: 100,
                            _medium: "relative humidity"
                        },
                    ],
                    series: [
                        {
                            name: "relative humidity",
                            type: "line",
                            step: "start",
                            showSymbol: false,
                            yAxisIndex: 0,
                            sampling: "lttb",
                            connectNulls: false,
                            data: data
                        },
                    ],
                };

                var chart = testHelper.create(echarts, 'main0', {
                    title: [
                        'Sampling with lttb, test **connectNulls**',
                        'NaN point should not be filtered, toggle connectNulls value, compare it.',
                    ],
                    option,
                    width: 600,
                    height: 300,
                    buttons: [
                        {
                            text: 'find null series',
                            onclick: function () {
                                chart.dispatchAction({
                                    type: 'dataZoom',
                                    batch: [
                                        {id: 'dz-s', start: 0, end: 10}
                                    ]
                                });
                            }
                        },
                        {
                            text: 'toggle connectNulls value',
                            onclick: function () {
                                const flag = option.series[0].connectNulls;
                                option.series[0].connectNulls = !flag;
                                chart.setOption(option);
                            }
                        },
                        {
                            text: 'switch sampling between lttb and none',
                            onclick: function () {
                                const sampling = option.series[0].sampling;
                                option.series[0].sampling = sampling === 'lttb' ? 'none' : 'lttb';
                                console.log('current setting:', option.series[0].sampling);
                                chart.setOption(option);
                            }
                        }
                    ]
                });
            });
        </script>

        <script>
            require([
                'echarts'
            ], function (echarts) {
                const data = [];
                let operator = 1;
                let value = 50;
                const start = new Date('2021-03-03T15:30:00.000Z');
                for (let i = 0; i < 1950; i++) {
                    if (i % 100 === 0) {
                        operator = Math.random() > 0.5 ? 1 : -1;
                    }
                    const date = new Date(start.getTime() + i * 15 * 60 * 1000);
                    if (i < 639 || i > 943) {
                        value += operator * Number((Math.random() * 2 - 1));
                        value = Math.max(Math.min(100, value), 0);
                        data.push([date.toISOString(), value.toFixed(1)]);
                    }
                    else if (i === 934) {
                        data.push([date.toISOString(), null]);
                    }
                }

                const option = {
                    title: { text: "Data" },
                    tooltip: { trigger: "axis", axisPointer: { animation: true } },
                    legend: {
                        data: ["relative humidity"],
                    },
                    dataZoom: [
                        { realtime: true, xAxisIndex: [0, 1], filterMode: "weakFilter" },
                        { type: "inside", realtime: true, xAxisIndex: [0, 1] },
                    ],
                    toolbox: { feature: { saveAsImage: {}, restore: {} } },
                    xAxis: { type: "time" },
                    yAxis: [
                        {
                            type: "value",
                            position: "left",
                            name: "%",
                            min: 0,
                            max: 100,
                            _medium: "relative humidity"
                        },
                    ],
                    series: [
                        {
                            name: "relative humidity",
                            type: "line",
                            step: "start",
                            showSymbol: false,
                            yAxisIndex: 0,
                            sampling: "lttb",
                            connectNulls: false,
                            data
                        },
                    ]
                };

                var chart1 = testHelper.create(echarts, 'main1', {
                    title: [
                        'Sampling with lttb, test **connectNulls**',
                        'toggle connectNulls value or switch setting, check it.'
                    ],
                    option,
                    width: 600,
                    height: 400,
                    buttons: [
                        {
                            text: 'toggle connectNulls value',
                            onclick: function () {
                                const flag = option.series[0].connectNulls;
                                option.series[0].connectNulls = !flag;
                                chart1.setOption(option);
                            }
                        },
                        {
                            text: 'switch sampling between lttb and none',
                            onclick: function () {
                                const sampling = option.series[0].sampling;
                                option.series[0].sampling = sampling === 'lttb' ? 'none' : 'lttb';
                                console.log('current setting:', option.series[0].sampling);
                                chart1.setOption(option);
                            }
                        }
                    ]
                });
            });
        </script>
    </body>
</html>