SMusatov
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
							<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="esl.js"></script>
        <script src="config.js"></script>
        <link ref="stylesheet" href="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',
                'echarts/chart/line',
                'echarts/component/legend',
                'echarts/component/grid',
                'echarts/component/tooltip',
                'echarts/component/dataZoomInside',
                'echarts/component/toolbox'
            ], 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',
                'echarts/chart/line',
                'echarts/chart/bar',
                'echarts/component/legend',
                'echarts/component/grid',
                'echarts/component/tooltip',
                'echarts/component/dataZoom'
            ], 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',
                'echarts/chart/line',
                'echarts/chart/bar',
                'echarts/component/legend',
                'echarts/component/grid',
                'echarts/component/tooltip',
                'echarts/component/dataZoom'
            ], 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>