test/dataZoomHighPrecision.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>
        <link ref="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            .split {
                line-height: 60px;
                height: 60px;
                background: #ddd;
                text-align: center;
                font-weight: bold;
                font-size: 20px;
            }
            .main {
                height: 80%;
            }
        </style>
        <div id="info"></div>
        <div id="main"></div>

        <div class="split">Check toolbox dataZoom normal</div>
        <div id="main1" class="main"></div>
        <div class="split">y max min should not be excluded, dataZoom label should be accurately right</div>
        <div id="main2" class="main"></div>
        <div class="split">y max min should not be excluded, dataZoom label should be accurately right</div>
        <div id="main3" class="main"></div>








        <script>

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

                var main = document.getElementById('main1');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                chart.setOption({
                  "title": {
                    "text": ""
                  },
                  "tooltip": {
                    "trigger": "axis"
                  },
                  "legend": {
                    "data": [
                      "PV维度订阅转化率"
                    ]
                  },
                  "toolbox": {
                    "show": true,
                    "feature": {
                      "dataZoom": {},
                      "dataView": {
                        "readOnly": true
                      },
                      "restore": {},
                      "saveAsImage": {}
                    }
                  },
                  "calculable": true,
                  "xAxis": [
                    {
                      "type": "category",
                      "boundaryGap": false,
                      "data": [
                        "20160401",
                        "20160402",
                        "20160403",
                        "20160404",
                        "20160405",
                        "20160406",
                        "20160407",
                        "20160408",
                        "20160409",
                        "20160410"
                      ]
                    }
                  ],
                  "yAxis": [
                    {
                      "type": "value",
                      "axisLabel": {
                        "formatter": "{value}%"
                      }
                    }
                  ],
                  "series": [
                    {
                      "type": "line",
                      "name": "PV维度订阅转化率",
                      "data": [
                        46.646153846153844,
                        48.75454799888049,
                        49.122247047558254,
                        47.80918727915194,
                        50.140845070422536,
                        51.89201877934272,
                        52.307692307692314,
                        48.93327280980481,
                        46.012832263978005,
                        42.89077212806026
                      ]
                    }
                  ]
                });
            });

        </script>











        <script>

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

                var main = document.getElementById('main2');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var option = {
                    "title": {
                        "text": "1个月数据",
                        "left": "center"
                    },
                    "tooltip": {
                        "trigger": "axis"
                    },
                    "dataZoom": [
                        {
                            "show": true,
                            "yAxisIndex": 0,
                            "filterMode": "empty",
                            "width": 12,
                            "handleSize": 8,
                            labelPrecision: 7,
                            "showDataShadow": false,
                            "right": 42
                        }
                    ],
                    "legend": [
                        {
                            "data": [
                                "重量"
                            ],
                            "top": 36,
                            "left": "center"
                        }
                    ],
                    "grid": [
                        {
                            "left": 80,
                            "top": 90,
                            "right": 58,
                            "height": 350
                        }
                    ],
                    "xAxis": [
                        {
                            "boundaryGap": false,
                            "data": [
                                "2016-02-17",
                                "2016-02-18",
                                "2016-02-19",
                                "2016-02-20",
                                "2016-02-21",
                                "2016-02-22",
                                "2016-02-23",
                                "2016-02-24",
                                "2016-02-25",
                                "2016-02-26",
                                "2016-02-27",
                                "2016-02-28",
                                "2016-02-29",
                                "2016-03-01",
                                "2016-03-02",
                                "2016-03-03",
                                "2016-03-04"
                            ]
                        }
                    ],
                    "yAxis": [
                        {
                            "name": "重量(g)"
                        }
                    ],
                    "series": [
                        {
                            "type": "line",
                            "data": [
                                "241.68",
                                "12703.10",
                                "17724.90",
                                "17722.60",
                                "12326.70",
                                "12703.10",
                                "17724.90",
                                // "17755.13984",
                                "17722.60",
                                "12326.70",
                                "-290.01",
                                "-12736.80",
                                "-12361.40",
                                "-0.00",
                                "-290.01",
                                "-12736.80",
                                "-8525.49",
                                "-15918.30"
                            ],
                            "name": "重量"
                        }
                    ]
                };

                chart.setOption(option);
            });

        </script>






        <script>

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

                var main = document.getElementById('main3');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                option = {
                    "title": {
                        "text": "1个月温度",
                        "left": "center"
                    },
                    "tooltip": {
                        "trigger": "axis"
                    },
                    "dataZoom": [
                        {
                            "show": true,
                            "yAxisIndex": 0,
                            //endValue:83.57,
                            "filterMode": "empty",
                            labelPrecision: 4,
                            "showDataShadow": false
                        }
                    ],
                    "legend": [
                        {
                            "data": [
                                "温度"
                            ],
                            "top": 31,
                            "left": "center"
                        }
                    ],
                    "grid": {},
                    "xAxis": [
                        {
                            "data": [
                                "2015-12-08",
                                "2015-12-09",
                                "2015-12-10",
                                "2015-12-11",
                                "2015-12-12"
                            ]
                        }
                    ],
                    "yAxis": [
                        {
                            "name": "温度(℃)"
                        }
                    ],
                    "series": [
                        {
                            "type": "line",
                            "data": [
                                "83.56",
                                "83.39",
                                "55.10",
                                "-5.47",
                                "-62.83"
                            ],
                            "name": "温度"
                        }
                    ]
                };

                chart.setOption(option);
            });


        </script>





    </body>
</html>