<html>
    <head>
        <meta charset="utf-8">
        <script src="../common/echarts.min.js"></script>
        <script src="../common/jquery.min.js"></script>
        <link rel="stylesheet" href="../common/reset.css">
    </head>
    <body>
        <style>
        </style>
        <div id="main"></div>
        <script>

        var myChart = echarts.init(document.getElementById('main'));

        var categoryData = ["2012-12-23","2012-12-24","2012-12-25","2012-12-26","2012-12-28","2012-12-29","2012-12-30","2012-12-31","2013-01-01","2013-01-02","2013-01-03","2013-01-04","2013-01-05","2013-01-06","2013-01-07","2013-01-08","2013-01-09","2013-01-10","2013-01-11","2013-01-12","2013-01-13","2013-01-14","2014-01-01","2014-01-02","2014-01-03","2014-01-04","2014-01-05","2014-01-06","2014-01-07","2014-01-10","2014-01-11","2014-01-12","2014-01-13","2014-01-14","2014-01-15","2014-01-16","2014-01-17","2014-01-18","2014-01-19","2014-01-21","2014-01-22","2014-01-23","2014-01-24","2014-01-26","2014-01-27","2014-01-28","2014-01-29","2014-01-30","2014-01-31","2014-02-01","2014-02-02","2014-02-05","2014-02-06","2014-02-07","2014-02-08","2014-02-10","2014-02-11","2014-02-12","2014-02-13","2014-02-14","2014-02-15","2014-02-16","2014-02-17","2014-02-18","2014-02-19","2014-02-20","2014-02-21","2014-02-22","2014-02-23","2014-02-24","2014-02-25","2014-02-28","2014-03-01","2014-03-02","2014-03-03","2014-03-04","2014-03-07","2014-03-08","2014-03-09","2014-03-10","2014-03-11","2014-03-13","2014-03-14","2014-03-15","2014-03-16","2014-03-17","2014-03-18","2014-03-19","2014-03-21","2014-03-22","2014-03-23","2014-03-24","2014-03-25","2014-03-26","2014-03-27","2014-03-28","2014-03-29","2014-03-30","2014-03-31","2014-04-01","2014-04-02","2014-04-03","2014-04-04","2014-04-05","2014-04-06","2014-04-07","2014-04-08","2014-04-09","2014-04-10","2014-04-11","2014-04-12","2014-04-13","2014-04-14","2014-04-15","2014-04-16","2014-04-17","2014-04-18","2014-04-19","2014-04-20","2014-04-21","2014-04-22","2014-04-23","2014-04-24","2014-04-25","2014-04-26","2014-04-27","2014-04-28","2014-04-29","2014-04-30","2014-05-01","2014-05-03","2014-05-04","2014-05-05","2014-05-06","2014-05-07","2014-05-08","2014-05-09","2014-05-10","2014-05-12","2014-05-13","2014-05-14","2014-05-15","2014-05-16","2014-05-17","2014-05-18","2014-05-19","2014-05-20","2014-05-21","2014-05-22","2014-05-23","2014-05-24","2014-05-25","2014-05-26","2014-05-27","2014-05-28","2014-05-29","2014-05-30","2014-05-31","2014-06-01","2014-06-02","2014-06-03","2014-06-04","2014-06-05","2014-06-06","2014-06-07","2014-06-08","2014-06-09","2014-06-10","2014-06-11","2014-06-12","2014-06-13","2014-06-14","2014-06-15","2014-06-16","2014-06-17","2014-06-18","2014-06-19","2014-06-20","2014-06-21","2014-06-22","2014-06-23","2014-06-24","2014-06-25","2014-06-26","2014-06-27","2014-06-28","2014-06-29","2014-06-30","2014-07-01","2014-07-02","2014-07-03","2014-07-04","2014-07-05","2014-07-06","2014-07-07","2014-07-08","2014-07-09","2014-07-10","2014-07-11","2014-07-12","2014-07-13","2014-07-14","2014-07-15","2014-07-16","2014-07-17","2014-07-18","2014-07-19","2014-07-20","2014-07-21","2014-07-22","2014-07-23","2014-07-24","2014-07-25","2014-07-26","2014-07-27","2014-07-28","2014-07-29","2014-07-30","2014-07-31","2014-08-01","2014-08-02","2014-08-03","2014-08-05","2014-08-06","2014-08-07","2014-08-08","2014-08-09","2014-08-10","2014-08-11","2014-08-12","2014-08-13","2014-08-14","2014-08-15","2014-08-16","2014-08-17","2014-08-18","2014-08-19","2014-08-20","2014-08-21","2014-08-22","2014-08-23","2014-08-24","2014-08-25","2014-08-26","2014-08-27","2014-08-28","2014-08-29","2014-08-30","2014-08-31","2014-09-01","2014-09-03","2014-09-04","2014-09-05","2014-09-06","2014-09-07","2014-09-08","2014-09-09","2014-09-10","2014-09-11","2014-09-12","2014-09-13","2014-09-14","2014-09-15","2014-09-16","2014-09-17","2014-09-18","2014-09-19","2014-09-20","2014-09-21","2014-09-22","2014-09-23","2014-09-24","2014-09-25","2014-09-26","2014-09-27","2014-09-28","2014-09-29","2014-09-30","2014-10-01","2014-10-02","2014-10-03","2014-10-04","2014-10-05","2014-10-06","2014-10-07","2014-10-08","2014-10-09","2014-10-10","2014-10-11","2014-10-14","2014-10-15","2014-10-16","2014-10-17","2014-10-18","2014-10-19","2014-10-20","2014-10-21","2014-10-22","2014-10-23","2014-10-24","2014-10-25","2014-10-26","2014-10-27","2014-10-28","2014-10-29","2014-10-30","2014-10-31","2014-11-01","2014-11-03","2014-11-04","2014-11-05","2014-11-07","2014-11-08","2014-11-09","2014-11-10","2014-11-11","2014-11-13","2014-11-14","2014-11-15","2014-11-16","2014-11-17","2014-11-18","2014-11-19","2014-11-23","2014-11-24","2014-11-25","2014-11-26","2014-11-27","2014-11-28","2014-11-29","2014-12-01","2014-12-02","2014-12-03","2014-12-05","2014-12-06","2014-12-07","2014-12-08","2014-12-09","2014-12-10","2014-12-11","2014-12-13","2014-12-14","2014-12-15","2014-12-17","2014-12-19","2014-12-22","2014-12-23","2014-12-25","2014-12-26","2014-12-27","2014-12-28","2014-12-29","2014-12-30","2015-01-01","2015-01-02","2015-01-03","2015-01-04","2015-01-05","2015-01-06","2015-01-07","2015-01-08","2015-01-09","2015-01-10","2015-01-11","2015-01-12","2015-01-13","2015-01-14","2015-01-15","2015-01-16","2015-01-17","2015-01-18","2015-01-19","2015-01-20","2015-01-22","2015-01-23","2015-01-24","2015-01-25","2015-01-26","2015-01-28","2015-01-29","2015-01-31","2015-02-01","2015-02-02","2015-02-03","2015-02-05","2015-02-06","2015-02-09","2015-02-10","2015-02-11","2015-02-12","2015-02-13","2015-02-14","2015-02-15","2015-02-16","2015-02-18","2015-02-19","2015-02-20","2015-02-21","2015-02-22","2015-02-23","2015-02-24"];

        var data0 = [36,53,58,67,137,94,38,57,71,27,35,57,79,58,105,124,32,87,232,174,498,184,85,158,74,165,113,190,122,95,159,52,117,113,180,403,209,113,149,68,162,276,195,77,114,67,165,93,188,178,85,119,158,124,84,53,142,150,242,329,429,348,118,98,92,270,311,311,255,313,404,113,68,189,268,67,70,179,127,110,195,69,64,133,145,142,85,73,62,86,186,271,255,331,285,169,63,77,183,147,133,66,91,68,98,135,223,156,246,83,133,212,270,109,90,124,182,84,84,73,85,156,156,163,69,74,83,122,139,156,93,57,54,105,82,104,84,69,74,86,59,122,92,124,171,146,113,170,183,140,104,91,77,107,121,120,192,177,130,90,117,124,157,103,51,70,87,95,74,90,116,165,178,178,104,116,116,84,96,91,115,161,138,163,68,77,161,185,172,80,248,237,165,256,216,134,63,114,77,80,64,156,140,133,186,182,106,119,68,54,82,90,134,188,194,159,159,169,244,199,163,149,80,67,162,140,143,125,76,119,70,104,109,159,124,135,150,164,169,83,155,75,59,78,136,103,104,176,89,127,54,100,140,186,200,61,109,111,114,97,94,66,54,87,80,84,117,168,129,127,64,60,144,170,58,87,70,53,92,78,123,95,54,68,200,314,379,346,233,80,73,76,132,211,289,250,82,99,163,267,353,78,72,88,140,206,204,65,59,150,79,63,93,80,95,59,65,77,143,98,64,93,282,155,94,196,293,83,114,276,54,65,51,62,89,65,82,276,153,52,69,113,82,99,53,103,100,73,155,243,155,125,65,65,79,200,226,122,60,85,190,105,208,59,160,211,265,386,118,89,94,77,113,143,257,117,185,119,65,87,60,108,188,143,62,100,152,166,55,59,175,293,326,153,73,267,183,394,158,86,207];

        var data1 = [42,102,91,111,109,107,7,22,123,47,62,31,41,21,73,133,25,89,256,184,554,158,55,195,69,204,84,163,181,83,139,93,109,153,181,426,196,74,139,99,175,245,166,38,148,85,158,78,174,171,144,112,121,111,119,90,188,129,222,306,390,335,164,85,68,230,361,326,290,321,391,88,118,185,303,54,65,156,178,127,164,79,52,181,179,112,101,68,78,80,180,251,276,345,283,195,118,82,176,123,157,117,80,74,149,169,251,147,213,119,132,224,313,169,99,102,198,48,55,122,107,197,175,158,89,72,60,96,171,126,74,107,107,130,58,83,106,119,106,109,80,102,134,111,142,194,74,147,207,169,117,77,111,158,176,138,164,206,156,146,142,88,123,102,100,127,102,94,107,106,94,224,238,166,123,147,132,143,72,73,112,197,168,172,96,38,178,163,138,133,264,211,150,220,218,125,103,165,94,87,101,155,192,93,185,227,162,121,123,111,69,69,117,157,246,127,205,165,279,193,184,128,108,50,141,122,184,137,94,124,113,121,89,211,85,161,157,171,228,112,153,70,95,53,190,114,84,214,71,187,33,115,180,232,164,101,143,93,145,69,121,118,103,91,109,104,135,205,137,110,113,99,106,200,84,122,96,20,74,48,124,68,49,107,192,325,371,395,260,45,121,74,180,215,330,234,62,76,123,274,386,130,42,100,183,257,259,65,25,137,58,63,72,93,100,86,26,51,199,139,72,149,247,155,68,171,292,67,103,254,102,117,73,48,51,99,140,282,118,85,89,122,121,125,51,161,120,98,149,252,210,124,87,47,40,186,207,148,53,116,211,109,183,23,132,222,238,394,93,79,77,129,139,110,248,167,215,157,37,134,92,127,226,178,53,72,113,132,51,114,168,339,308,163,113,280,179,410,159,114,204];

        myChart.setOption({
            backgroundColor: '#eee',
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                data: categoryData
            },
            yAxis: {
                splitLine: {
                    show: false
                }
            },
            grid: {
                top: 50,
                bottom: 70,
                right: 170,
                left: 80
            },
            legend: {
                left: 'center',
                top: 10,
                data: ['某城市 AQI', '平均 AQI']
            },
            toolbox: {
                top: 10,
                right: 10,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataZoom: [{
                startValue: '2014-12-26',
                endValue: '2015-02-02'
            }, {
                type: 'inside',
                startValue: '2014-12-26',
                endValue: '2015-02-02'
            }],
            visualMap: {
                top: 'middle',
                right: 10,
                inRange: {
                    color: ['green', '#cc1a00']
                },
                seriesIndex: 0,
                pieces: [{
                    gt: 0,
                    lte: 50
                }, {
                    gt: 50,
                    lte: 100
                }, {
                    gt: 100,
                    lte: 150
                }, {
                    gt: 150,
                    lte: 200
                }, {
                    gt: 200,
                    lte: 300
                }, {
                    gt: 300
                }],
                outOfRange: {
                    color: '#999'
                }
            },
            series: [{
                name: '某城市 AQI',
                type: 'line',
                data: data0,
                lineStyle: {
                    normal: {
                        width: 5
                    }
                },
                markLine: {
                    lineStyle: {
                        normal: {
                            color: '#999'
                        }
                    },
                    silent: true,
                    symbol: ['none', 'none'],
                    data: [{
                        label: {normal: {formatter: '优\n'}},
                        yAxis: 0
                    }, {
                        label: {normal: {formatter: '良\n'}},
                        yAxis: 50
                    }, {
                        label: {normal: {formatter: '轻度污染\n'}},
                        yAxis: 100
                    }, {
                        label: {normal: {formatter: '中度污染\n'}},
                        yAxis: 150
                    }, {
                        label: {normal: {formatter: '重度污染\n'}},
                        yAxis: 200
                    }, {
                        label: {normal: {formatter: '严重污染\n'}},
                        yAxis: 300
                    }]
                }
            }, {
                name: '平均 AQI',
                type: 'line',
                data: data1,
                areaStyle: {normal: {
                    color: 'rgba(0,0,0,0.2)'
                }},
                lineStyle: {normal: {
                    color: 'rgba(0,0,0,0.2)'
                }}
            }]
        });

        </script>
    </body>
</html>