现在位置首页 / 前端开发 /正文

echarts2最新功能--时间轴Timeline使用说明

作者: IT小兵 | 2014年7月1日| 热度:℃ | 评论: |参与:

上一篇[echarts2.0最新版功能特点]说明echarts2.0增加了一个新的功能:新增组件:时间轴(timeline),支持与任意图表组合使用。

timeline组件需要在opertion中启用即可。

option中包含timeline时每一个独立的option应该放置到命名为options的数组内,如

myCharts.setOption({    timeline : {...},
    options : [
        {                // option1
            title : {...},
            series : [...]
        },  
        {...},           // option2
        ...
    ]
});

注意:

时间轴,每个图表最多仅有一个时间轴控件。

timeline的参数主要有:

名称默认值描述
{boolean} showtrue显示策略,可选为:true(显示) | false(隐藏)
{string} type'time'模式是时间类型,时间轴间隔根据时间跨度计算,可选为:'number'
{boolean} notMergefalse时间轴上多个option切换时是否进行merge操作,同setOption第二个参数(详见实例方法
{boolean} realtimetrue拖拽或点击改变时间轴是否实时显示
{number | string} x80时间轴左上角横坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域横向中心)
{number | string} ynull时间轴左上角纵坐标,数值单位px,支持百分比(字符串),默认无,随y2定位,如'50%'(显示区域纵向中心)
{number | string} x280时间轴右下角横坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域横向中心)
{number | string} y20时间轴右下角纵坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域纵向中心)
{number} width自适应时间轴宽度,默认为总宽度 - x - x2,数值单位px,指定width后将忽略x2。见下图。 
支持百分比(字符串),如'50%'(显示区域一半的宽度)
{number} height50时间轴高度,数值单位px,支持百分比(字符串),如'50%'(显示区域一半的高度)
{color}backgroundColor'rgba(0,0,0,0)'背景颜色,默认透明。
{number} borderWidth0边框线宽
{color} borderColor'#ccc'边框颜色。
{number | Array}padding5内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
{string} controlPosition'left'播放控制器位置,可选为:'left' | 'right' | 'none'
{boolean} autoPlayfalse是否自动播放
{boolean} looptrue是否循环播放
{number} playInterval2000播放时间间隔,单位ms
{Object} lineStyle{color: '#666', width: 1, type: 'dashed'}时间轴轴线样式,lineStyle控制线条样式,(详见lineStyle
{Object} label
{
    show: true,
    interval: 'auto',
    rotate: 0,
    formatter: null,
    textStyle: {
        color: '#333'
    }
}
时间轴标签文本

show : 是否显示 
interval : 挑选间隔,默认为'auto',可选为:'auto'(自动隐藏显示不下的) | 0(全部显示) | {number} 
rotate : 旋转角度,默认为0,不旋转,正值为逆时针,负值为顺时针,可选为:-90 ~ 90 
formatter : 间隔名称格式器:{string}(Template) | {Function} 
textStyle : 文字样式(详见textStyle
{Object}checkpointStyle
{
    symbol : 'auto',
    symbolSize : 'auto',
    color : 'auto',
    borderColor : 'auto',
    borderWidth : 'auto',
    label: {
        show: false,
        textStyle: {
            color: 'auto'
        }
    }
}
时间轴当前点

symbol : 当前点symbol,默认随轴上的symbol 
symbolSize : 当前点symbol大小,默认随轴上symbol大小 
color : 当前点symbol颜色,默认为随当前点颜色,可指定具体颜色,如无则为'#1e90ff' 
borderColor : 当前点symbol边线颜色 
borderWidth : 当前点symbol边线宽度 
label同上
{Object} controlStyle
{
    normal : { color : '#333'},
    emphasis : { color : '#1e90ff'}
}
时间轴控制器样式,可指定正常和高亮颜色
{string} symbol'emptyDiamond'轴点symbol,同serie.symbol
{number} symbolSize4轴点symbol,同serie.symbolSize
{number} currentIndex0当前索引位置,对应options数组,用于指定显示特定系列
{Array} data[]时间轴列表,同时也是轴label内容

时间轴

代码实例:

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
                },
                {
                    'type':'value',
                    'name':'其他(亿元)'
                }
            ],
            series : [
                {
                    'name':'GDP',
                    'type':'bar',
                    'markLine':{
                        symbol : ['arrow','none'],
                        symbolSize : [4, 2],
                        itemStyle : {
                            normal: {
                                lineStyle: {color:'orange'},
                                borderColor:'orange',
                                label:{
                                    position:'left',
                                    formatter:function(a,b,c){return Math.round(c)},
                                    textStyle:{color:'orange'}
                                }
                            }
                        },
                        'data':[{'type':'average','name':'平均值'}]
                    },
                    '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']}
            ]
        }
    ]
};


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询