项目需求： 在学习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!
