ECharts实例开发学习笔记二——时间轴

最新推荐文章于 2024-07-29 19:53:51 发布

Qing_yun

最新推荐文章于 2024-07-29 19:53:51 发布

阅读量2.4w

点赞数 7

分类专栏： Echarts 文章标签： js图表库 ECharts

本文链接：https://blog.csdn.net/Qing_yun/article/details/48718385

版权

本文档详述了ECharts时间轴的使用方法，包括如何引入timelineOption.js以及动态调整时间轴上的日期或月份标记数量。通过实例演示，帮助读者理解和应用ECharts时间轴功能。

摘要由CSDN通过智能技术生成

记录一下ECharts时间轴的使用，首先是照着官方的示例做一遍，在这里不要忘了引入timelineOption.js，后面介绍如何动态创建时间轴的记录数，即根据需求可伸缩显示有多少天或者年月等轴标记数。

官网demo：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>a</title>
    <style>
        body{background-color:#000000}
    </style>
</head>
<body>
<div id="main" style="height:500px;width: 100%; margin-left: 0px;float: left;"></div>
<!--    本地引入ECharts,'js/dist/'本地文件路径下 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://echarts.baidu.com/doc/example/timelineOption.js"></script>
<script type="text/javascript">
    //        路径配置,'./js/dist'本地文件路径
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                option = {
                    timeline:{
                        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 s.slice(0, 4);
                            }
                        },
                        autoPlay : true,
                        playInterval : 1000
                    },
                    options:[
                        {
                            title : {
                                'text':'2002全国宏观经济指标',
                                'subtext':'数据来自国家统计局'
                            },
                            tooltip : {'trigger':'axis'},
                            legend : {
                                x:'right',
                                'data':['GDP','金融','房地产','第一产业','第二产业','第三产业'],
                                'selected':{
                                    'GDP':true,
                                    '金融':false,
                                    '房地产':true,
                                    '第一产业':false,
                                    '第二产业':false,
                                    '第三产业':false
                                }
                            },
                            toolbox : {
                                'show':true,
                                orient : 'vertical',
                                x: 'right',
                                y: 'center',
                                'feature':{
                                    'mark':{'show':true},
                                    'dataView':{'show':true,'readOnly':false},
                                    'magicType':{'show':true,'type':['line','bar','stack','tiled']},
                                    'restore':{'show':true},
                                    'saveAsImage':{'show':true}
                                }
                            },
                            calculable : true,
                            grid : {'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宁夏','新疆'
                                ]
                            }],
                            yAxis : [
                                {
                                    'type':'value',
                                    'name':'GDP（亿元）',
                                    'max':53500