SMusatov
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
							<html>
    <head>
        <meta charset="utf-8">
        <script src="esl.js"></script>
        <script src="config.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
                background: #ccc;
            }
            .block {
                text-align: center;
                margin: 20px;
            }
            .block .ec {
                background: #fff;
                width: 700px;
                height: 400px;
                margin: 5px auto;
            }
        </style>
        <div id="main"></div>

        <script src="data/timelineGDP.js"></script>

        <script>

            require([
                'echarts',
                'zrender/core/util',
                'echarts/chart/bar',
                'echarts/component/legend',
                'echarts/component/grid',
                'echarts/component/tooltip',
                'echarts/component/timeline'
            ], function (echarts, zrUtil) {

                makeChart({});
                makeChart({timeline: {inverse: true}});
                makeChart({timeline: {inverse: true, controlStyle: {position: 'right'}}});

                makeChart({timeline: {orient: 'vertical', x: 0, y: 10, width: 55, height: '80%'}});
                makeChart({timeline: {orient: 'vertical', inverse: true, rewind: true, x: 0, y: 10, width: 55, height: '80%'}});
                makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%'}});
                makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%', controlStyle: {position: 'top'}}});
                makeChart({timeline: {label: {position: 'top'}}});
                makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%', label: {position: 'right'}}});
                makeChart({timeline: {orient: 'vertical', inverse: true, x: null, x2: 0, y: 10, width: 55, height: '80%', label: {position: -640, emphasis: {textStyle: {fontSize: 20}}}}});

                makeChart({timeline: {controlStyle: {show: false}}});
                makeChart({timeline: {controlStyle: {showPlayBtn: false}}});
                makeChart({timeline: {controlStyle: {showPrevBtn: false}}});
                makeChart({timeline: {controlStyle: {showNextBtn: false}}});
                makeChart({timeline: {}});

                makeChart({
                    timeline: {lineStyle: {show: false},
                    symbol: 'circle',
                    itemStyle: {normal: {color: 'rgba(194,53,49, 0.5)'}},
                    controlStyle: {showPrevBtn: false, showNextBtn: false, normal: {color: 'rgba(194,53,49, 0.5)', borderColor: 'rgba(194,53,49, 0.5)'}},
                    orient: 'vertical', inverse: true, x: 0, y: 40, width: 55, height: '80%'
                }});

                makeChart({
                    timeline: {
                        height: 55,
                        data: [
                            '2002-01-01','2003-01-01','2004-01-01','2005-01-01',
                            {
                                value: '2006-01-01',
                                symbol: 'pin',
                                symbolSize: 30
                            },
                            '2007-01-01','2008-01-01','2009-01-01','2010-01-01',
                            {
                                value: '2011-01-01',
                                symbol: 'pin',
                                symbolSize: 30
                            }
                        ]
                    }
                });

                makeChart({
                    timeline: {
                        symbol: 'none'
                    }
                });

                function makeChart(opt) {
                    opt = opt || {};
                    var containerEl = document.getElementById('main');
                    var el = document.createElement('div');
                    el.className = 'block';
                    el.innerHTML = '<div class="ec"></div><label>'
                        + encodeHTML(JSON.stringify(opt)) + '</label>';
                    containerEl.appendChild(el);

                    var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'});
                    chart.setOption(getOption(opt));
                }

                function encodeHTML(source) {
                    return source == null
                        ? ''
                        : String(source)
                            .replace(/&/g, '&amp;')
                            .replace(/</g, '&lt;')
                            .replace(/>/g, '&gt;')
                            .replace(/"/g, '&quot;')
                            .replace(/'/g, '&#39;');
                };

                function getOption(opt) {
                    return zrUtil.merge({
                        timeline:{
                            // y: 0,
                            axisType: 'category',
                            // realtime: false,
                            // loop: false,
                            autoPlay : false,
                            // currentIndex: 2,
                            playInterval : 1000,
                            // controlStyle: {
                            //     position: 'left'
                            // },
                            data: [
                                '2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01',
                                '2007-01-01','2008-01-01','2009-01-01','2010-01-01','2011-01-01'
                            ],
                            label: {
                                formatter : function(s) {
                                    return (new Date(s)).getFullYear();
                                }
                            },
                            controlStyle: {
                                // itemGap: 0,
                                normal: {
                                    borderWidth: 1
                                }
                            },
                            itemStyle: {
                                // normal: {symbolSize: 1}
                            }
                        },
                        baseOption: {
                            backgroundColor: '#fff',
                            title: {
                                'subtext':'数据来自国家统计局'
                            },
                            tooltip: {'trigger':'axis'},
                            calculable : true,
                            grid : {
                                x: 120, x2: 120, y: 80, y2: 100
                            },
                            xAxis : [
                                {
                                    'type':'category',
                                    'axisLabel':{'interval':0},
                                    'data':[
                                        '北京','\n天津','河北','\n山西','内蒙古','\n辽宁','吉林','\n黑龙江',
                                        '上海','\n江苏','浙江','\n安徽','福建','\n江西','山东','\n河南',
                                        '湖北','\n湖南','广东','\n广西','海南','\n重庆','四川','\n贵州',
                                        '云南','\n西藏','陕西','\n甘肃','青海','\n宁夏','新疆'
                                    ],
                                    splitLine: {show: false}
                                }
                            ],
                            yAxis : [
                                {
                                    'type':'value',
                                    'name':'GDP（亿元）',
                                    'max':53500
                                },
                                {
                                    'type':'value',
                                    'name':'其他（亿元）',
                                    splitLine: {show: false}
                                }
                            ],
                            series: [
                                {
                                    name: 'GDP',
                                    type: 'bar',
                                    markLine: {
                                        symbol : ['arrow','none'],
                                        symbolSize : [4, 2],
                                        itemStyle : {
                                            normal: {
                                                lineStyle: {color:'orange'},
                                                barBorderColor:'orange',
                                                label:{
                                                    position:'left',
                                                    formatter:function(params){
                                                        return Math.round(params.value);
                                                    },
                                                    textStyle:{color:'orange'}
                                                }
                                            }
                                        },
                                        'data':[{'type':'average','name':'平均值'}]
                                    }
                                }
                                // {type: 'bar'},
                                // {type: 'bar'},
                                // {type: 'bar'},
                                // {type: 'bar'},
                                // {type: 'bar'}
                            ]
                        },
                        options: [
                            {
                                title : {text: '2002全国宏观经济指标'},
                                series : [
                                    {
                                        'name':'GDP',
                                        'data': dataMap.dataGDP['2002']
                                    },
                                    {
                                        'name':'金融','yAxisIndex':1,'type':'bar',
                                        'data': dataMap.dataFinancial['2002']
                                    },
                                    {
                                        'name':'房地产','yAxisIndex':1,'type':'bar',
                                        'data': dataMap.dataEstate['2002']
                                    },
                                    {
                                        'name':'第一产业','yAxisIndex':1,'type':'bar',
                                        'data': dataMap.dataPI['2002']
                                    },
                                    {
                                        'name':'第二产业','yAxisIndex':1,'type':'bar',
                                        'data': dataMap.dataSI['2002']
                                    },
                                    {
                                        'name':'第三产业','yAxisIndex':1,'type':'bar',
                                        'data': dataMap.dataTI['2002']
                                    }
                                ]
                            },
                            {
                                title : {'text':'2003全国宏观经济指标'},
                                series : [
                                    {'data': dataMap.dataGDP['2003']},
                                    {'data': dataMap.dataFinancial['2003']},
                                    {'data': dataMap.dataEstate['2003']},
                                    {'data': dataMap.dataPI['2003']},
                                    {'data': dataMap.dataSI['2003']},
                                    {'data': dataMap.dataTI['2003']}
                                ]
                            },
                            {
                                title : {'text':'2004全国宏观经济指标'},
                                series : [
                                    {'data': dataMap.dataGDP['2004']},
                                    {'data': dataMap.dataFinancial['2004']},
                                    {'data': dataMap.dataEstate['2004']},
                                    {'data': dataMap.dataPI['2004']},
                                    {'data': dataMap.dataSI['2004']},
                                    {'data': dataMap.dataTI['2004']}
                                ]
                            },
                            {
                                title : {'text':'2005全国宏观经济指标'},
                                series : [
                                    {'data': dataMap.dataGDP['2005']},
                                    {'data': dataMap.dataFinancial['2005']},
                                    {'data': dataMap.dataEstate['2005']},
                                    {'data': dataMap.dataPI['2005']},
                                    {'data': dataMap.dataSI['2005']},
                                    {'data': dataMap.dataTI['2005']}
                                ]
                            },
                            {
                                title : {'text':'2006全国宏观经济指标'},
                                series : [
                                    {'data': dataMap.dataGDP['2006']},
                                    {'data': dataMap.dataFinancial['2006']},
                                    {'data': dataMap.dataEstate['2006']},
                                    {'data': dataMap.dataPI['2006']},
                                    {'data': dataMap.dataSI['2006']},
                                    {'data': dataMap.dataTI['2006']}
                                ]
                            },
                            {
                                title : {'text':'2007全国宏观经济指标'},
                                series : [
                                    {'data': dataMap.dataGDP['2007']},
                                    {'data': dataMap.dataFinancial['2007']},
                                    {'data': dataMap.dataEstate['2007']},
                                    {'data': dataMap.dataPI['2007']},
                                    {'data': dataMap.dataSI['2007']},
                                    {'data': dataMap.dataTI['2007']}
                                ]
                            },
                            {
                                title : {'text':'2008全国宏观经济指标'},
                                series : [
                                    {'data': dataMap.dataGDP['2008']},
                                    {'data': dataMap.dataFinancial['2008']},
                                    {'data': dataMap.dataEstate['2008']},
                                    {'data': dataMap.dataPI['2008']},
                                    {'data': dataMap.dataSI['2008']},
                                    {'data': dataMap.dataTI['2008']}
                                ]
                            },
                            {
                                title : {'text':'2009全国宏观经济指标'},
                                series : [
                                    {'data': dataMap.dataGDP['2009']},
                                    {'data': dataMap.dataFinancial['2009']},
                                    {'data': dataMap.dataEstate['2009']},
                                    {'data': dataMap.dataPI['2009']},
                                    {'data': dataMap.dataSI['2009']},
                                    {'data': dataMap.dataTI['2009']}
                                ]
                            },
                            {
                                title : {'text':'2010全国宏观经济指标'},
                                series : [
                                    {'data': dataMap.dataGDP['2010']},
                                    {'data': dataMap.dataFinancial['2010']},
                                    {'data': dataMap.dataEstate['2010']},
                                    {'data': dataMap.dataPI['2010']},
                                    {'data': dataMap.dataSI['2010']},
                                    {'data': dataMap.dataTI['2010']}
                                ]
                            },
                            {
                                title : {'text':'2011全国宏观经济指标'},
                                series : [
                                    {'data': dataMap.dataGDP['2011']},
                                    {'data': dataMap.dataFinancial['2011']},
                                    {'data': dataMap.dataEstate['2011']},
                                    {'data': dataMap.dataPI['2011']},
                                    {'data': dataMap.dataSI['2011']},
                                    {'data': dataMap.dataTI['2011']}
                                ]
                            }
                        ]
                    }, opt, true);
                }

            });
        </script>
    </body>
</html>