test/timeline-life.html

<!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/simpleRequire.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',
                'data/life-expectancy.json'
            ], function (echarts, data) {

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


                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>