test/timeline-layout.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<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: {}});