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

            var chart = echarts.init(document.getElementById('main'), 'dark');
            var data = [ { date: '2013-11-07', starNum: 600 },
              { date: '2014-03-20', starNum: 1260 },
              { date: '2014-07-02', starNum: 1950 },
              { date: '2014-09-24', starNum: 2610 },
              { date: '2014-12-23', starNum: 3270 },
              { date: '2015-01-07', starNum: 3930 },
              { date: '2015-01-12', starNum: 4590 },
              { date: '2015-01-25', starNum: 5250 },
              { date: '2015-03-12', starNum: 5940 },
              { date: '2015-05-21', starNum: 6600 },
              { date: '2015-07-15', starNum: 7260 },
              { date: '2015-09-19', starNum: 7920 },
              { date: '2015-11-24', starNum: 8580 },
              { date: '2016-01-06', starNum: 9240 },
              { date: '2016-01-20', starNum: 9930 },
              { date: '2016-03-08', starNum: 10590 },
              { date: '2016-04-18', starNum: 11250 },
              { date: '2016-05-26', starNum: 11910 }
            ];

            chart.setOption({
                grid: {
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'time'
                },
                yAxis: {
                },
                series: [{
                    name: 'line',
                    type: 'line',
                    stack: 'all',
                    symbolSize: 10,
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(87, 147, 243, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(87, 147, 243, 0)'
                            }])
                        }
                    },
                    data: data.map(function (item) {
                        return [new Date(item.date), item.starNum];
                    }),
                    animationDelay: function (idx) {
                        return idx * 50;
                    }
                }]
            });

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