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

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

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

开发目的：

1. 学习echarts组件属性；
2. 学习echarts动态数据更新；
3. 学习js动画效果；
4. 学习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!