Echarts项目开发：柱状图动态数据可视化排名榜(1)

漏刻有时
项目需求： 在学习echarts的过程，遇到B站以及抖音里很多动态数据排行榜的案例。一部分是基于可视化软件的，还有一部分是基于d3.js开发的。离自己想要的需求还是有一定的差距。解决办法无非是学习软件或是基于d3开发，节省重复造轮子的过程。

开发问题： 也不知道echarts能不能完成最终的结果，但是都是js，应该不会差到哪里。更何况，现在是站在原有模型的基础上进行仿制开发。

开发目的：

学习echarts组件属性；
学习echarts动态数据更新；
学习js动画效果；
学习ajax隔行读取数据；

代码基础：
以echarts简单的柱状图开始着手；

option = {
    xAxis: {
        type: \'category\',
        data: [\'Mon\', \'Tue\', \'Wed\', \'Thu\', \'Fri\', \'Sat\', \'Sun\']
    },
    yAxis: {
        type: \'value\'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: \'bar\'
    }]
};

一、定义动态数组

    yAxis: {
        type: \'category\',
        data: (function (){
                var now = new Date();
                var res = [];
                var len = 7;
                while (len--) {
                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,\'\'));
                    now = new Date(now - 2000);
                }
                return res;
            })()
    },

        data: (function (){
                var res = [];
                var len = 10;
                while (len--) {
                    res.push(Math.round(Math.random() * 1000));
                }
                return res;
            })(),

二、定时刷新数组：

setInterval(function(){
     var timeData=new Date().toLocaleTimeString().replace(/^\D*/, \'\');
     var data0 = option.series[0].data;
     data0.shift();
     data0.push(Math.round(Math.random() * 1000));
     option.yAxis.data.shift();
     option.yAxis.data.push(timeData);
     option.title.subtext=new Date().toLocaleTimeString().replace(/^\D*/, \'\');
     myChart.setOption(option);
}, 2000);

三、定义彩色柱状图

var colorList = [\'#C1232B\',\'#B5C334\',\'#FCCE10\',\'#E87C25\',\'#27727B\',\'#FE8463\',\'#9BCA63\',\'#FAD860\',\'#F3A43B\',\'#60C0DD\',\'#D7504B\',\'#C6E579\',\'#F4E001\',\'#F0805A\',\'#26C0C0\'];

color: function(params) {
     return colorList[params.dataIndex]
}

动态更新基本完成，接下来要解决的问题：
1、如何实现label数字的滚动效果；
2、如何实现ajax隔行读取数据；

Done!