
<!--
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">
        <script src="./lib/jquery.min.js"></script>
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
    </head>


    <body>
        <style>
            html,
            body {
                padding: 0;
                margin: 0;
            }
            .demo {
                position: relative;
                margin-top: 100px;
                margin-left: 100px;
            }
            .pc-chart {
                width: 540px;
                height: 300px;
            }
            .mobile-box {
                position: absolute;
                left: 280px;
                top: -40px;
                width: 215px;
                height: 360px;
                z-index: 300;
                user-select: none;
            }
            .mobile-content {
                position: absolute;
                overflow: hidden;
                width: 150px;
                height: 272px;
                left: 312px;
                top: 0;
                background: #333;
                z-index: 300;
            }
            .mobile-chart {
                position: absolute;
                top: -95px;
                left: -75px;
                width: 300px;
                height: 460px;
            }
        </style>
        <div class="demo">
            <div class="pc-chart"></div>
        </div>


        <script type="text/javascript">


        require([
            'echarts'
            // 'echarts/chart/line',
            // 'echarts/component/legend',
            // 'echarts/component/grid',
            // 'echarts/component/tooltip',
            // 'echarts/component/title',
            // 'echarts/component/dataZoom',

            // 'echarts/scale/Time'
        ], function (echarts) {

            var data = {"years":[1800,1810,1820,1830,1840,1850,1860,1870,1880,1890,1900,1910,1920,1930,1940,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015],"lifeExpectancy":[29.5734572,29.5734572,29.5734572,29.5734572,29.5734572,29.5734572,29.5734572,31.12082604,30.20106663,29.93047652,30.74960789,31.40217766,20.5,36.428,41.056,57.084,57.5768,57.9696,58.7624,60.7552,63.148,64.6408,63.7336,66.6264,67.3692,68.382,68.6248,68.2776,68.7404,69.5332,69.116,69.1788,68.9616,68.9144,68.3872,68.5,68.6,68.7,68.7,68.6,68.2,68,67.8,67.7,67.4,67.3,67.5,67.9,67.7,67.4,68.2,69.8,70.1,70,69.8,69.6,69.4,68,65.2,63.6,64.2,65.9,67.4,67.6,66.2,65.4,65.1,64.9,64.8,65,64.8,66.1,67.2,67.6,68.3,68.7,69.4,70.4,71.3,72.21,73.13],"income":[1430,1447,1464,1562,1666,1778,1896,2023,2158,2233,3087,3487,1489,3779,5632,7514,7424,7775,7981,8234,8787,9465,9496,10037,9755,10496,10908,11027,10620,11836,12363,12823,13256,13902,13972,14915,15170,15113,16236,16594,16530,17192,17487,17818,17632,17557,17619,17951,18417,18527,18576,19221,19355,19660,19906,19349,18332,15661,14320,12535,12013,11597,11779,11173,11925,13173,13902,14629,15768,16967,18118,19660,21374,22506,20739,21664,22570,23299,23561,23293,23038],"population":[31088398,31088398,31861526,34134430,37420913,41023821,44966686,49288504,53996807,59151534,64836675,71044207,77871987,85369549,93588981,102798657,104306354,105969442,107729541,109537868,111355224,113152347,114909562,116615781,118266807,119860289,121390327,122842753,124193114,125412397,126483874,127396324,128165823,128837792,129475269,130126383,130808492,131517584,132254362,133012558,133788113,134583945,135406786,136259517,137144808,138063062,139006739,139969243,140951400,141955200,142975753,144016095,145056221,146040116,146895053,147568552,148040354,148322473,148435811,148416292,148293265,148078355,147772805,147385440,146924174,146400951,145818121,145195521,144583147,144043914,143622566,143338407,143180249,143123163,143126660,143158099,143211476,143287536,143367341,143429435,143456918]};

            echarts.util.each(data.years, function (year, index) {
                year = +new Date(year, 0, 1);
                data.population[index] = [year, data.population[index]];
                data.lifeExpectancy[index] = [year, data.lifeExpectancy[index]];
                data.income[index] = [year, data.income[index]];
            });

            var series1Color = '#c23531';
            var series2Color = 'rgba(4,127,154,1)';
            var series3Color = '#2f4554';
            var series3AreaColor = {
                x: 0,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                    {offset: 0, color: series3Color},
                    {offset: 1, color: 'rgba(0,0,0,0)'}
                ]
            };
            var series2AreaColor = {
                x: 0,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                    {offset: 0, color: 'rgba(4,127,154,0.8)'},
                    {offset: 1, color: 'rgba(0,0,0,0)'}
                ]
            };


            var y3Formatter = function (val) {
                return (val / 1000).toFixed(0) + ' k';
            };
            var y3AxisPointerFormatter = function (params) {
                return (params.value / 1000).toFixed(0) + ' k';
            };

            var option = {
                backgroundColor: '#3aadd1',
                // textStyle: {
                //     fontFamily: 'Tahoma'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: 5,
                    backgroundColor: '#eee',
                    borderColor: '#999',
                    borderWidth: 1,
                    textStyle: {
                        color: '#222'
                    },
                    extraCssText: 'z-index: 200'
                },
                axisPointer: {
                    link: [{xAxisIndex: 'all'}],
                    label: {
                        textStyle: {
                            color: '#222'
                        }
                    },
                    z: 500
                },
                xAxis: [{
                    type: 'time',
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    axisPointer: {
                        label: {
                            show: false
                        }
                    }
                }, {
                    type: 'time',
                    gridIndex: 1,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#ddd'
                        }
                    }
                }],
                yAxis: [{
                    splitNumber: 3,
                    nameTextStyle: {
                        color: '#ccc',
                        fontSize: 18
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisTick: {
                        inside: true,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    axisPointer: {
                        label: {
                            textStyle: {
                                color: series1Color
                            }
                        }
                    },
                    z: 200
                }, {
                    position: 'right',
                    splitNumber: 3,
                    nameTextStyle: {
                        color: '#ccc',
                        fontSize: 18
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisTick: {
                        inside: true,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        inside: true,
                        formatter: function (value) {
                            return (value / 1000000).toFixed(0) + ' M';
                        },
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (param) {
                                return (param.value / 1000000).toFixed(0) + ' M';
                            },
                            textStyle: {
                                color: series2Color
                            }
                        }
                    },
                    z: 200
                }, {
                    gridIndex: 1,
                    splitNumber: 1,
                    nameTextStyle: {
                        color: '#ccc',
                        fontSize: 18
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisTick: {
                        inside: true,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        inside: true,
                        formatter: y3Formatter,
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: y3AxisPointerFormatter
                        }
                    },
                    z: 40
                }],
                grid: [{
                    left: 20,
                    right: 20,
                    top: 30,
                    height: 130
                }, {
                    left: 20,
                    right: 20,
                    top: 175,
                    height: 60
                }],
                dataZoom: [{
                    bottom: 10,
                    height: 20,
                    left: 18,
                    handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                    handleSize: '80%',
                    handleStyle: {
                        color: '#ddd'
                    },
                    labelFormatter: '',
                    borderColor: 'rgba(0,0,0,0.2)',
                    xAxisIndex: [0, 1],
                    // startValue: +new Date(1860, 0, 1),
                    // endValue: +new Date(1969, 0, 1),
                    // minValueSpan: new Date(1969, 0, 1) - new Date(1965, 0, 1)
                }, {
                    type: 'inside',
                    xAxisIndex: [0, 1],
                    // startValue: +new Date(1860, 0, 1),
                    // endValue: +new Date(1969, 0, 1)
                }],
                series: [
                    {
                        type: 'line',
                        name: 'seriesA',
                        id: 'gridScatter',
                        showSymbol: false,
                        symbolSize: 10,
                        hoverAnimation: false,
                        itemStyle: {
                            normal: {
                                color: series1Color
                            }
                        },
                        data: data.lifeExpectancy
                    },
                    {
                        type: 'line',
                        name: 'seriesB',
                        yAxisIndex: 1,
                        showSymbol: false,
                        itemStyle: {
                            normal: {
                                color: series2Color
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: series2AreaColor
                            }
                        },
                        data: data.population
                    },
                    {
                        type: 'line',
                        name: 'seriesC',
                        xAxisIndex: 1,
                        yAxisIndex: 2,
                        showSymbol: false,
                        symbolSize: 10,
                        hoverAnimation: false,
                        areaStyle: {
                            normal: {
                                color: series3AreaColor
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: series3Color
                            }
                        },
                        data: data.income
                    }
                ]
            };
            var myChart = echarts.init($('.pc-chart')[0]);
            myChart.setOption(option);


        });

        </script>


    </body>
</html>