<!DOCTYPE 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/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            .test-title {
                background: #146402;
                color: #fff;
            }
            #main0 {
                height: 500px;
            }
        </style>


        <div id="main0"></div>


        <script>

            var chart;
            var myChart;
            var option;

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

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

                $.get('data/life-expectancy.json', function (data) {
                    myChart.hideLoading();

                    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: ''}
                    ];

                    option = {
                        baseOption: {
                            timeline: {
                                axisType: 'category',
                                orient: 'vertical',
                                autoPlay: false,
                                inverse: true,
                                playInterval: 1000,
                                left: null,
                                right: 0,
                                top: 20,
                                bottom: 20,
                                width: 55,
                                height: null,
                                label: {
                                    normal: {
                                        textStyle: {
                                            color: '#999'
                                        }
                                    },
                                    emphasis: {
                                        textStyle: {
                                            color: '#fff'
                                        }
                                    }
                                },
                                symbol: 'none',
                                lineStyle: {
                                    color: '#555'
                                },
                                checkpointStyle: {
                                    color: '#bbb',
                                    borderColor: '#777',
                                    borderWidth: 2
                                },
                                controlStyle: {
                                    showNextBtn: false,
                                    showPrevBtn: false,
                                    normal: {
                                        color: '#666',
                                        borderColor: '#666'
                                    },
                                    emphasis: {
                                        color: '#aaa',
                                        borderColor: '#aaa'
                                    }
                                },
                                data: []
                            },
                            backgroundColor: '#404a59',
                            title: [{
                                text: data.timeline[0],
                                textAlign: 'center',
                                left: '63%',
                                top: '55%',
                                textStyle: {
                                    fontSize: 100,
                                    color: 'rgba(255, 255, 255, 0.7)'
                                }
                            }, {
                                text: '各国人均寿命与GDP关系演变',
                                left: 'center',
                                top: 10,
                                textStyle: {
                                    color: '#aaa',
                                    fontWeight: 'normal',
                                    fontSize: 20
                                }
                            }],
                            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: {
                                top: 100,
                                containLabel: true,
                                left: 30,
                                right: '110'
                            },
                            xAxis: {
                                type: 'log',
                                name: '人均收入',
                                max: 100000,
                                min: 300,
                                nameGap: 25,
                                nameLocation: 'middle',
                                nameTextStyle: {
                                    fontSize: 18
                                },
                                splitLine: {
                                    show: false
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#ccc'
                                    }
                                },
                                axisLabel: {
                                    formatter: '{value} $'
                                }
                            },
                            yAxis: {
                                type: 'value',
                                name: '平均寿命',
                                max: 100,
                                nameTextStyle: {
                                    color: '#ccc',
                                    fontSize: 18
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#ccc'
                                    }
                                },
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    formatter: '{value} 岁'
                                }
                            },
                            visualMap: [
                                {
                                    show: false,
                                    type: 'piecewise',
                                    dimension: 3,
                                    categories: echarts.util.map(data.countries, function (item) {
                                        return item[2];
                                    }),
                                    calculable: true,
                                    precision: 0.1,
                                    textGap: 30,
                                    textStyle: {
                                        color: '#ccc'
                                    },
                                    inRange: {
                                        color: (function () {
                                            var colors = ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'];
                                            return colors.concat(colors);
                                        })()
                                    }
                                }
                            ],
                            series: [
                                {
                                    type: 'scatter',
                                    itemStyle: itemStyle,
                                    // progressive: false,
                                    data: data.series[0],
                                    symbolSize: function(val) {
                                        return sizeFunction(val[2]);
                                    }
                                }
                            ],
                            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]);
                                }
                            }
                        });
                    }

                    myChart.setOption(option);

                });

            });

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