githubmirror/echarts

test/timeline-layout.html
394 строки19 KB
pissang
test: use simpleRequire to replace esl
06 май 2021, 11:47
06 май 2021, 11:478544dd7

<!--
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/simpleRequire.js"></script>
        <script src="lib/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'
            ], function (echarts) {
                var zrUtil = echarts.util;

                makeChart({
                    timeline: {
                        label: {
                            normal: {
                                position: 10,
                                rotate: 45,
                                textStyle: {
                                    align: 'right',
                                    baseline: 'middle'
                                }
                            }
                        }
                    }
                });
                makeChart({
                    timeline: {
                        inverse: true,
                        symbol: 'path://M0,0L10,0L10,10L0,10L0,0z',
                        symbolSize: [10, 6],
                        symbolOffset: [0, 3],
                        symbolRotate: 30
                    }
                });

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

                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';
                    var widthString = '';
                    if (opt.width != null) {
                        widthString = ' style="width:' + opt.width + 'px" ';
                    }
                    el.innerHTML = '<div class="ec" ' + widthString + '></div><label>'
                        + encodeHTML(JSON.stringify(opt)) + '</label>';
                    containerEl.appendChild(el);

                    var chart = echarts.init(el.firstChild, null, { });
                    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 : {
                                            lineStyle: {color:'orange'},
                                            barBorderColor:'orange',
                                        },
                                        label:{
                                            // position: 'left' is a invalid value, but exists in this historical file,
                                            // while will be ignored before v5.0 .
                                            // But since v5.0, position: 'left' will cause incorrect result.
                                            // position: 'left',
                                            position: 'start',
                                            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>