| <!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 lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>css</title> |
| <meta http-equiv="X-UA-Compatible" content="IE=Edge"> |
| <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
| |
| <style> |
| #main { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| overflow-y: scroll; |
| -webkit-overflow-scrolling: touch; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="app" > |
| <div id="main"> |
| |
| <div> |
| Check that the tooltip should not below the chart on the<br> |
| <strong>Safari of IOS13</strong>.<br> |
| (See <a href="https://bugs.webkit.org/show_bug.cgi?id=203681" target="_blank">Webkit Bug Trace</a>)<br> |
| The bug can be reproduced by:<br> |
| (1) `-webkit-overflow-scrolling: touch;` is used<br> |
| (2) The webpage is over one screen<br> |
| (3) The chart (or only canvas) is not at the top part.<br> |
| </div> |
| |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| |
| |
| <div data-v-2d2d8774="" data-v-224ed8cc="" class="app-details c-bg-color-gray"> |
| <div data-v-2d2d8774=""> |
| <div data-v-75831cfc="" data-v-2d2d8774="" class="trend c-bg-color-white c-gap-inner-left c-gap-inner-right c-gap-inner-bottom"> |
| <div data-v-75831cfc="" class="ve-line" style=" |
| width: auto; |
| position: relative; |
| height: 247.5px; |
| "> |
| <div class="" id="aaa" style="height: 247.5px;"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- |
| <div class="" _echarts_instance_="ec_1234567" style=" |
| width: auto; |
| position: relative; |
| -webkit-tap-highlight-color: transparent; |
| user-select: none; |
| height: 247.5px; |
| "> |
| <div style=" |
| position: relative; |
| /* overflow: hidden; */ |
| width: 355px; |
| height: 248px; |
| padding: 0px; |
| margin: 0px; |
| border-width: 0px; |
| cursor: default; |
| "> |
| <canvas id="bbb" data-zr-dom-id="zr_0" width="1065" height="744" style=" |
| position: absolute; |
| /* position: static; */ |
| left: 0px; |
| top: 0px; |
| width: 355px; |
| height: 248px; |
| user-select: none; |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| padding: 0px; |
| margin: 0px; |
| border-width: 0px; |
| "></canvas> |
| <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; width: 0px !important; height: 0px !important; left: 0px !important; top: 0px !important; right: auto !important; bottom: auto !important;"></div> |
| <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; width: 0px !important; height: 0px !important; right: 0px !important; top: 0px !important; left: auto !important; bottom: auto !important;"></div> |
| <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; width: 0px !important; height: 0px !important; left: 0px !important; bottom: 0px !important; right: auto !important; top: auto !important;"></div> |
| <div style="position: absolute !important; visibility: hidden !important; padding: 0px !important; margin: 0px !important; border-width: 0px !important; width: 0px !important; height: 0px !important; right: 0px !important; bottom: 0px !important; left: auto !important; top: auto !important;"></div> |
| </div> |
| <div style=" |
| position: absolute; |
| display: block; |
| border-style: solid; white-space: nowrap; |
| transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; |
| background-color: rgba(50, 50, 50, 0.7); |
| border-width: 0px; |
| border-color: rgb(51, 51, 51); |
| border-radius: 4px; |
| color: rgb(255, 255, 255); |
| font: 14px/21px sans-serif; |
| padding: 5px; left: 82.925px; |
| top: 27.7102px; |
| z-index: 99999; |
| pointer-events: none; |
| ">2019/09/18 星期三 <br> DAU (日) : 123.6<br>日环比：-9.9%<br>年同比：-6.6%</div> |
| </div> --> |
| |
| |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| aaa<br> |
| |
| </div> |
| </div> |
| |
| |
| <script src="../dist/echarts.js?_v_=123"></script> |
| |
| <script> |
| var option = { |
| "legend": { |
| "left": "right", |
| "top": "2%" |
| }, |
| "xAxis": [{ |
| "type": "category", |
| "nameLocation": "middle", |
| "nameGap": 22, |
| "name": "", |
| "axisTick": { |
| "show": true, |
| "lineStyle": { |
| "color": "#eee" |
| } |
| }, |
| "show": true, |
| "splitNumber": 30, |
| "axisLabel": { |
| "interval": "auto" |
| } |
| }], |
| "series": [{ |
| "type": "line", |
| "data": [ |
| ["2016/10/000000", "15.00"], |
| ["2016/10/000000", "15.00"], |
| ["2016/10/000000", "15.00"], |
| ["2016/10/000000", "15.00"], |
| ["2016/11/000000", "15.00"], |
| ["2016/11/000000", "15.00"], |
| ["2016/11/000000", "15.00"], |
| ["2016/11/000000", "15.00"], |
| ["2016/12/000000", "15.00"], |
| ["2016/12/000000", "15.00"], |
| ["2016/12/000000", "15.00"], |
| ["2016/12/000000", "15.00"], |
| ["2017/01/000000", "15.00"], |
| ["2017/01/000000", "15.00"], |
| ["2017/01/000000", "15.00"], |
| ["2017/01/000000", "15.00"], |
| ["2017/01/000000", "15.00"], |
| ["2017/02/000000", "15.00"], |
| ["2017/02/000000", "15.00"], |
| ["2017/02/000000", "15.00"], |
| ["2017/02/000000", "15.00"], |
| ["2017/03/000000", "15.00"], |
| ["2017/03/000000", "15.00"], |
| ["2017/03/000000", "15.00"], |
| ["2017/03/000000", "15.00"], |
| ["2017/04/000000", "15.00"], |
| ["2017/04/000000", "15.00"], |
| ["2017/04/000000", "15.00"], |
| ["2017/04/000000", "15.00"], |
| ["2017/05/000000", "15.00"], |
| ["2017/05/000000", "15.00"], |
| ["2017/05/000000", "15.00"], |
| ["2017/05/000000", "15.00"], |
| ["2017/05/000000", "15.00"], |
| ["2017/06/000000", "15.00"], |
| ["2017/06/000000", "15.00"], |
| ["2018/02/000000", "15.00"], |
| ["2018/02/000000", "15.00"], |
| ["2018/02/000000", "15.00"], |
| ["2018/02/000000", "15.00"], |
| ["2018/03/000000", "15.00"], |
| ["2018/03/000000", "15.00"], |
| ["2018/03/000000", "15.00"], |
| ["2018/03/000000", "15.00"], |
| ["2018/04/000000", "15.00"], |
| ["2018/04/000000", "15.00"], |
| ["2018/04/000000", "15.00"], |
| ["2018/04/000000", "15.00"], |
| ["2018/04/000000", "15.00"], |
| ["2018/05/000000", "15.00"], |
| ["2018/05/000000", "15.00"], |
| ["2018/05/000000", "15.00"], |
| ["2018/05/000000", "15.00"], |
| ["2018/06/000000", "15.00"], |
| ["2018/06/000000", "15.00"], |
| ["2018/06/000000", "15.00"], |
| ["2018/06/000000", "15.00"], |
| ["2018/07/000000", "15.00"], |
| ["2018/07/000000", "15.00"], |
| ["2018/07/000000", "15.00"], |
| ["2018/07/000000", "15.00"], |
| ["2018/07/000000", "15.00"], |
| ["2018/08/000000", "15.00"], |
| ["2018/08/000000", "15.00"], |
| ["2018/08/000000", "15.00"], |
| ["2018/08/000000", "15.00"], |
| ["2018/09/000000", "15.00"], |
| ["2018/09/000000", "15.00"], |
| ["2018/09/000000", "15.00"], |
| ["2018/09/000000", "15.00"], |
| ["2018/10/000000", "15.00"], |
| ["2018/10/000000", "15.00"], |
| ["2018/10/000000", "15.00"], |
| ["2018/10/000000", "15.00"], |
| ["2018/10/000000", "15.00"], |
| ["2018/11/000000", "15.00"], |
| ["2018/11/000000", "2.00"], |
| ["2018/11/000000", "2.00"], |
| ["2018/11/000000", "2.00"], |
| ["2018/12/000000", "2.00"], |
| ["2018/12/000000", "2.00"], |
| ["2018/12/000000", "7.00"], |
| ["2018/12/000000", "7.00"], |
| ["2018/12/000000", "7.00"], |
| ["2019/01/000000", "7.00"], |
| ["2019/01/000000", "7.00"], |
| ["2019/01/000000", "2.00"], |
| ["2019/01/000000", "2.00"], |
| ["2019/02/000000", "2.00"], |
| ["2019/02/000000", "2.00"], |
| ["2019/02/000000", "2.00"], |
| ["2019/02/000000", "3.00"], |
| ["2019/03/000000", "12.00"], |
| ["2019/03/000000", "12.00"], |
| ["2019/03/000000", "12.00"], |
| ["2019/03/000000", "12.00"], |
| ["2019/04/000000", "12.00"], |
| ["2019/04/000000", "12.00"], |
| ["2019/04/000000", "12.00"], |
| ["2019/04/000000", "12.00"], |
| ["2019/04/000000", "12.00"], |
| ["2019/05/000000", "12.00"], |
| ["2019/05/000000", "3.00"], |
| ["2019/05/000000", "3.00"], |
| ["2019/05/000000", "2.00"], |
| ["2019/06/000000", "2.00"], |
| ["2019/06/000000", "62.00"], |
| ["2019/06/000000", "62.00"], |
| ["2019/06/000000", "62.00"], |
| ["2019/07/000000", "62.00"], |
| ["2019/07/000000", "63.00"], |
| ["2019/07/000000", "63.00"], |
| ["2019/07/000000", "63.00"], |
| ["2019/07/000000", "63.00"], |
| ["2019/08/000000", "63.00"], |
| ["2019/08/000000", "62.00"], |
| ["2019/08/000000", "63.00"], |
| ["2019/08/000000", "63.00"], |
| ["2019/09/000000", "63.00"], |
| ["2019/09/000000", "63.00"], |
| ["2019/09/000000", "3.00"], |
| ["2019/09/000000", "2.00"], |
| ["2019/09/000000", "2.00"], |
| ["2019/10/000000", "2.00"], |
| ["2019/10/000000", "3.00"] |
| ], |
| "showSymbol": false |
| }], |
| "yAxis": { |
| "scale": true, |
| "axisLabel": { |
| "margin": -10, |
| "verticalAlign": "bottom" |
| }, |
| "axisTick": { |
| "show": false |
| }, |
| "offset": -5 |
| }, |
| "tooltip": { |
| "trigger": "axis" |
| }, |
| "color": ["#549ef4"], |
| "grid": [{ |
| "x": "2%", |
| "y": "20%", |
| "width": "96%", |
| "height": "78%" |
| }], |
| "dataZoom": [{ |
| "type": "inside", |
| "start": 80, |
| "end": 100 |
| }] |
| }; |
| |
| var chart = echarts.init(document.getElementById('aaa')); |
| chart.setOption(option); |
| |
| </script> |
| |
| |
| </body> |
| </html> |
| |
| |
| |
