<html>
<head>
    <meta charset="utf-8">
    <script src="../common/esl.js"></script>
    <script src="../common/config.js"></script>
    <link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<style>
    .btn-group {
        position: absolute;
        z-index: 1;
        right: 0;
        top: 0;
    }
    .btn {
        background-color: transparent;
        border-color: transparent;
        cursor: pointer;
        color: #cccccc;
        outline-width: 0;
    }
</style>
<div id="main"></div>
<script>
    // Schema:
    var schema = [
        {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
        {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
        {name: 'Population', index: 2, text: '总人口', unit: ''},
        {name: 'Country', index: 3, text: '国家', unit: ''}
    ];

    define('chartInstance', function (require) {
        var data = require('data/wealth-health-timeline.json');
        var echarts = require('echarts');
        require('common/dark');

        var chart = echarts.init(document.getElementById('main'), 'dark');

        var itemStyle = {
            normal: {
                opacity: 0.8,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        };

        var sizeFunction = function (x) {
            var y = Math.sqrt(x / 5e8) + 0.1;
            return y * 80;
        };
        // Schema:
        var schema = [
            {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
            {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
            {name: 'Population', index: 2, text: '总人口', unit: ''},
            {name: 'Country', index: 3, text: '国家', unit: ''}
        ];

        var option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    orient: 'vertical',
                    autoPlay: true,
                    inverse: true,
                    playInterval: 1000,
                    left: null,
                    right: 0,
                    top: 20,
                    bottom: 20,
                    width: 55,
                    height: null,
                    symbol: 'none',
                    checkpointStyle: {
                        borderWidth: 2
                    },
                    controlStyle: {
                        showNextBtn: false,
                        showPrevBtn: false
                    },
                    data: []
                },
                title: [{
                    'text': data.timeline[0],
                    textAlign: 'center',
                    left: '63%',
                    top: '55%',
                    textStyle: {
                        fontSize: 100
                    }
                }, {
                    left: 'center',
                    text: 'Wealth & Health of Nations'
                }],
                tooltip: {
                    padding: 5,
                    backgroundColor: '#222',
                    borderColor: '#777',
                    borderWidth: 1,
                    formatter: function (obj) {
                        var value = obj.value;
                        return schema[3].text + '：' + value[3] + '<br>'
                                + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
                                + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
                                + schema[2].text + '：' + value[2] + '<br>';
                    }
                },
                grid: {
                    left: '12%',
                    right: '110'
                },
                xAxis: {
                    type: 'log',
                    name: '人均收入',
                    max: 100000,
                    min: 300,
                    nameGap: 25,
                    nameLocation: 'middle',
                    nameTextStyle: {
                        fontSize: 18
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    axisLabel: {
                        formatter: '{value} $'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '平均寿命',
                    max: 100,
                    nameTextStyle: {
                        fontSize: 18
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value} 岁'
                    }
                },
                visualMap: [
                    {
                        show: false,
                        dimension: 3,
                        categories: data.counties,
                        calculable: true,
                        precision: 0.1,
                        textGap: 30,
                        inRange: {
                            color: ['#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870', '#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870', '#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870']
                        }
                    }
                ],
                series: [
                    {
                        type: 'scatter',
                        itemStyle: itemStyle,
                        data: data.series[0],
                        symbolSize: function(val) {
                            return sizeFunction(val[2]);
                        },
                        zlevel: 1
                    }
                ],
                animationDurationUpdate: 1000,
                animationEasingUpdate: 'quinticInOut'
            },
            options: []
        };

        for (var n = 0; n < data.timeline.length; n++) {
            option.baseOption.timeline.data.push(data.timeline[n]);
            option.options.push({
                title: [{
                    show: true,
                    'text': data.timeline[n] + ''
                }],
                series: {
                    name: data.timeline[n],
                    type: 'scatter',
                    itemStyle: itemStyle,
                    data: data.series[n],
                    symbolSize: function (val) {
                        return sizeFunction(val[2]);
                    }
                }
            });
        }

        return {
            init: function() {
                chart.setOption(option);
            }
        };
    });

    require(['chartInstance', 'data/wealth-health-timeline.json'], function (chartInstance, data) {
        chartInstance.init();
    });
</script>
</body>
</html>