test/tooltip-windowResize.html - master - githubmirror/echarts

test/tooltip-windowResize.html
407 строк14 KB
pissang
test: use simpleRequire to replace esl
06 май 2021, 11:47
06 май 2021, 11:478544dd7
<!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/facePrint.js"></script>
    <script src="lib/testHelper.js"></script>
    <script src="tooltipTestHelper.js"></script>
    <link rel="stylesheet" href="lib/reset.css" />
</head>

<body>
    <style>
        .test-title {
            background: #fff;
        }

        .test-chart {
            margin: 0 auto;
        }

        .custoized-tooltip-class {
            background-color: cyan!important;
            text-shadow: 0 0 5px red;
        }
        .custoized-tooltip-class::after {
            content: 'pseudo after';
            display: inline-block;
            position: absolute;
            left: 110%;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>


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

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


    <script>
        require(['echarts'], function (echarts) {
            var base = +new Date(2016, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var valueBase = Math.random() * 300;
            var valueBase2 = Math.random() * 50;
            var data = [];
            var data2 = [];

            for (var i = 1; i < 10; i++) {
                var now = new Date(base += oneDay);
                var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');

                valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
                valueBase <= 0 && (valueBase = Math.random() * 300);
                data.push([dayStr, valueBase]);

                valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
                valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
                data2.push([dayStr, valueBase2]);
            }
            option = {
                animation: false,
                title: {
                    left: 'center',
                    text: '触屏 tooltip 和 dataZoom 示例',
                    subtext: '"tootip" and "dataZoom" on mobile device',
                },
                legend: {
                    top: 'bottom',
                    data: ['意向']
                },
                tooltip: {
                    alwaysShowContent: true,
                    triggerOn: 'none',
                    position: function (pt) {
                        return [pt[0], 130];
                    }
                },
                toolbox: {
                    left: 'center',
                    itemSize: 25,
                    top: 55,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {}
                    }
                },
                xAxis: {
                    type: 'time',
                    // boundaryGap: [0, 0],
                    axisPointer: {
                        value: '2016-10-7',
                        snap: true,
                        lineStyle: {
                            color: '#004E52',
                            opacity: 0.5,
                            width: 2
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return echarts.format.formatTime('yyyy-MM-dd', params.value);
                            },
                            backgroundColor: '#004E52'
                        },
                        handle: {
                            show: true,
                            color: '#004E52'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisTick: {
                        inside: true
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        inside: true,
                        formatter: '{value}\n'
                    },
                    z: 10
                },
                grid: {
                    top: 110,
                    left: 15,
                    right: 15,
                    height: 160
                },
                dataZoom: [{
                    type: 'inside',
                    throttle: 50
                }],
                series: [{
                        name: '模拟数据',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        sampling: 'average',
                        itemStyle: {
                            color: '#8ec6ad'
                        },
                        stack: 'a',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8ec6ad'
                            }, {
                                offset: 1,
                                color: '#ffe'
                            }])
                        },
                        data: data
                    },
                    {
                        name: '模拟数据',
                        type: 'line',
                        smooth: true,
                        stack: 'a',
                        symbol: 'circle',
                        symbolSize: 5,
                        sampling: 'average',
                        itemStyle: {
                            color: '#d68262'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#d68262'
                            }, {
                                offset: 1,
                                color: '#ffe'
                            }])
                        },
                        data: data2
                    }

                ]
            };

            var chart = testHelper.create(echarts, 'main0', {
                option: option,
                buttons: [
                    {
                        text: 'add class',
                        onclick: function () {
                            chart.setOption({
                                tooltip: {
                                    className: 'custoized-tooltip-class'
                                }
                            })
                        }
                    },
                    {
                        text: 'recovery class',
                        onclick: function () {
                            chart.setOption({
                                tooltip: {
                                    className: ''
                                }
                            })
                        }
                    }
                ]
            });
            chart.setOption(option, true);
            window.addEventListener('resize', function () {
                chart.resize();
            });
        });

    </script>

    <script>
        require(['echarts'], function (echarts) {
            var base = +new Date(2016, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var valueBase = Math.random() * 300;
            var valueBase2 = Math.random() * 50;
            var data = [];
            var data2 = [];

            for (var i = 1; i < 10; i++) {
                var now = new Date(base += oneDay);
                var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');

                valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
                valueBase <= 0 && (valueBase = Math.random() * 300);
                data.push([dayStr, valueBase]);

                valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
                valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
                data2.push([dayStr, valueBase2]);
            }
            option = {
                animation: false,
                title: {
                    left: 'center',
                    text: '触屏 tooltip 和 dataZoom 示例',
                    subtext: '"tootip" and "dataZoom" on mobile device',
                },
                legend: {
                    top: 'bottom',
                    data: ['意向']
                },
                tooltip: {
                    alwaysShowContent: true,
                    renderMode: 'richText',
                    triggerOn: 'none',
                    position: function (pt) {
                        return [pt[0], 130];
                    }
                },
                toolbox: {
                    left: 'center',
                    itemSize: 25,
                    top: 55,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {}
                    }
                },
                xAxis: {
                    type: 'time',
                    // boundaryGap: [0, 0],
                    axisPointer: {
                        value: '2016-10-7',
                        snap: true,
                        lineStyle: {
                            color: '#004E52',
                            opacity: 0.5,
                            width: 2
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return echarts.format.formatTime('yyyy-MM-dd', params.value);
                            },
                            backgroundColor: '#004E52'
                        },
                        handle: {
                            show: true,
                            color: '#004E52'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisTick: {
                        inside: true
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        inside: true,
                        formatter: '{value}\n'
                    },
                    z: 10
                },
                grid: {
                    top: 110,
                    left: 15,
                    right: 15,
                    height: 160
                },
                dataZoom: [{
                    type: 'inside',
                    throttle: 50
                }],
                series: [{
                        name: '模拟数据',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        sampling: 'average',
                        itemStyle: {
                            color: '#8ec6ad'
                        },
                        stack: 'a',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8ec6ad'
                            }, {
                                offset: 1,
                                color: '#ffe'
                            }])
                        },
                        data: data
                    },
                    {
                        name: '模拟数据',
                        type: 'line',
                        smooth: true,
                        stack: 'a',
                        symbol: 'circle',
                        symbolSize: 5,
                        sampling: 'average',
                        itemStyle: {
                            color: '#d68262'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#d68262'
                            }, {
                                offset: 1,
                                color: '#ffe'
                            }])
                        },
                        data: data2
                    }

                ]
            };

            var chart = testHelper.create(echarts, 'main1', {
                option: option
            });
            chart.setOption(option, true);
            window.addEventListener('resize', function () {
                chart.resize();
            });
        });

    </script>
</body>

</html>