<!DOCTYPE html>
<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;
            }
        </style>


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


        <script>

            require([
                'echarts'/*, 'map/js/china' */
            ], function (echarts) {

                $.getJSON('./data/life-expectancy.json', function (data) {


                    var option = {
                        grid: {
                            left: 0,
                            bottom: 0,
                            containLabel: true,
                            top: 80
                        },
                        xAxis: {
                            type: 'value'
                        },
                        yAxis: {
                            type: 'value',
                            scale: true
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {}
                            }
                        },
                        dataZoom: {
                            type: 'inside'
                        },
                        series: []
                    };

                    var series = data.series;

                    option.visualMap = {
                        show: false,
                        min: 0,
                        max: 100,
                        dimension: 1
                    };

                    option.legend = {
                        // data: data.countries.map(function (item) {return item[2];}),
                        selectedMode: 'single',
                        right: 100
                    };

                    data.countries.forEach(function (country) {
                        var data = series.map(function (yearData) {
                            var item = yearData.filter(function (item) {
                                return item[3] === country[2];
                            })[0];
                            return {
                                label: {
                                    normal: {
                                        show: item[4] % 20 === 0 && item[4] > 1940
                                    },
                                    emphasis: {
                                        position: 'top',
                                        show: true
                                    }
                                },
                                name: item[4],
                                value: item
                            };
                        });
                        var links = data.map(function (item, idx) {
                            return {
                                source: idx,
                                target: idx + 1
                            };
                        });
                        links.pop();

                        option.series.push({
                            name: country[2],
                            type: 'graph',
                            coordinateSystem: 'cartesian2d',
                            data: data,
                            links: links,
                            edgeSymbol: ['none', 'arrow'],
                            edgeSymbolSize: 5,
                            legendHoverLink: false,
                            lineStyle: {
                                normal: {
                                    color: '#333'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    borderColor: '#333'
                                }
                            },
                            label: {
                                normal: {
                                    textStyle: {
                                        color: '#333'
                                    },
                                    position: 'right'
                                }
                            },
                            symbolSize: 10,
                            animationDelay: function (idx) {
                                return idx * 100;
                            }
                        });
                    });


                    testHelper.create(echarts, 'main0', {
                        option: option
                    });
                });

            });

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