2

最近的实习有涉及数据可视化的工作,需要用到图表库, 这里用的是百度的echarts,琢磨了一段时间API,总体来说不难,但是百度自己的文档用例不丰富, 大多数只有文字描述(配图都没有),更少有栗子?。 echarts的交互组件中(图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline) ,觉得timeline稍微不一样,而官方的API文档说明比较简略,代码又很冗长。这里就顺手做个小栗子,方便大家快速上手,冗长用例代码即使让人明白了逻辑,但实际操作的时候可能会因为一些小疏忽而无法快速实现效果,这时简洁直观的例子对debug是很有帮助的(弄明白官方文档估计得两小时,看我的例子十分钟差不多了?)timeline组件在Echarts3中有所修改,所以使用这些功能对时候多注意下库的版本,这里使用的公共库是里面的3.1.4版本:?http://cdn.cdnjs.net/echarts/

概念

官方文档的解释是:

timeline 组件,提供了在多个 ECharts option 间进行切换、播放等操作的功能。

需要注意的是,timeline可在多组数据间进行切换和播放,这里的多组数据是指多组确定的数据,也就是在横纵坐标都已经确定好的多组数据,如果是动态的数据(比如股票的实时变化)timeline就难以表现了,PS:动态数据可以使用计时器setInterval()动态添加来实现。

官方文档参考:? timeline

栗子?

这里用了个实习工作的测试栗子,显示人均GDP排名在两个年份间的切换。自我感觉比官方文档的例子简洁多了,timeline组件的使用之所以与其它组件有点区别,是因为它多了个baseOption的配置, 顾名思义,baseOption是个基本框架,数据的固定部分一般都写在这个框架中的,而options里面装的就是变化的数据。
我的DEMO链接:?Echarts-timeline demo
找虐的请看官方DEMO:?mix-timeline-all

代码说明:

var chart_bar = echarts.init(document.getElementsByClassName('chart')[0]) 

  chart_bar.setOption(
        {
        //timeline基本配置都写在baseoption 中
            baseOption: {
                timeline: {
                    //loop: false,        
                    axisType: 'category',
                    show: true,
                    autoPlay: true,
                    playInterval: 1500,
                    data: ['1990', '1995']         
                },               
                grid: {containLabel: true},
                xAxis: [{
                    type: 'value',
                    name: '万美元',
                    max: 150000
                },],
                yAxis: [{
                    type: 'category',
                    inverse: true, 
                }],
                series: [
                    {
                        type: 'bar',                  
                    },
                ]
            },
            
            
            //变量则写在options中
            options: [
                //1990
                {
                    yAxis: [{
                        data: ['瑞士', '卢森堡', '瑞典', '挪威', '丹麦', '阿联酋', '冰岛', '日本', '美国', '(131)中国']
                    }],
                    title: {
                        text: '1990年统计值'
                    },
                    series: [
                        {
                            data: [38589.18,  33378.44,  29794.08,  28188.52,  26922.44,  26621.51,  25786.94,  25139.58,  23913.76,  343.3]
                        },

                    ]
                },
                //1995
                {
                    yAxis: [{
                        data: ['卢森堡','瑞士', '日本', '丹麦','挪威','德国',   '澳大利亚','瑞典', '荷兰',  '(126)中国']
                    }],
                    title: {
                        text: '1995年统计值'
                    },
                    series: [
                        {
                            data: [51189.75,  48712.21,  42516.46,  35477.69,  34793.77,  31709.25,  30307.42,  29882.78,  28910.83,  604.332]
                        },

                    ]
                },
            ]
        }
    );

囧囧
1.9k 声望132 粉丝

蚂蚁金服海外银行诚招前端:


引用和评论

0 条评论