Toggle navigation
柱状图动画延迟
By
猫仔乔
2017-12-05 09:40:30
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
function getVirtulData(year) { year = year || '2017'; var date = +echarts.number.parseDate(year + '-01-01'); //var end = +echarts.number.parseDate((+year + 1) + '-01-01'); //var dayTime = 3600 * 24 * 1000; var data = [ ['2017/1/1', 742], ['2017/1/2', 795], ['2017/1/3', 805], ['2017/1/4', 684], ['2017/1/5', 944], ['2017/1/6', 770], ['2017/1/7', 754], ['2017/1/8', 742], ['2017/1/9', 635], ['2017/1/10', 674], ['2017/1/11', 839], ['2017/1/12', 1515], ['2017/1/13', 1011], ['2017/1/14', 690], ['2017/1/15', 758], ['2017/1/16', 687], ['2017/1/17', 703], ['2017/1/18', 690], ['2017/1/19', 756], ['2017/1/20', 869], ['2017/1/21', 1093], ['2017/1/22', 1564], ['2017/1/23', 1341], ['2017/1/24', 842], ['2017/1/25', 709], ['2017/1/26', 683], ['2017/1/27', 512], ['2017/1/28', 680], ['2017/1/29', 738], ['2017/1/30', 740], ['2017/1/31', 809], ['2017/2/1', 937], ['2017/2/2', 1515], ['2017/2/3', 2894], ['2017/2/4', 1620], ['2017/2/5', 1420], ['2017/2/6', 1447], ['2017/2/7', 1282], ['2017/2/8', 1280], ['2017/2/9', 1195], ['2017/2/10', 1178], ['2017/2/11', 1089], ['2017/2/12', 1078], ['2017/2/13', 1109], ['2017/2/14', 1010], ['2017/2/15', 1104], ['2017/2/16', 1167], ['2017/2/17', 1242], ['2017/2/18', 1165], ['2017/2/19', 1219], ['2017/2/20', 2707], ['2017/2/21', 2889], ['2017/2/22', 1798], ['2017/2/23', 1662], ['2017/2/24', 1372], ['2017/2/25', 1400], ['2017/2/26', 1364], ['2017/2/27', 1398], ['2017/2/28', 1898], ['2017/3/1', 1794], ['2017/3/2', 1767], ['2017/3/3', 1631], ['2017/3/4', 1534], ['2017/3/5', 1413], ['2017/3/6', 1423], ['2017/3/7', 1460], ['2017/3/8', 1454], ['2017/3/9', 1453], ['2017/3/10', 1446], ['2017/3/11', 1376], ['2017/3/12', 1469], ['2017/3/13', 1557], ['2017/3/14', 1702], ['2017/3/15', 1769], ['2017/3/16', 52342], ['2017/3/17', 13423], ['2017/3/18', 14337], ['2017/3/19', 21228], ['2017/3/20', 15607], ['2017/3/21', 13372], ['2017/3/22', 14651], ['2017/3/23', 15677], ['2017/3/24', 14682], ['2017/3/25', 18388], ['2017/3/26', 23534], ['2017/3/27', 26704], ['2017/3/28', 127910], ['2017/3/29', 395976], ['2017/3/30', 740802], ['2017/3/31', 966845], ['2017/4/1', 1223419], ['2017/4/2', 1465722], ['2017/4/3', 1931489], ['2017/4/4', 2514324], ['2017/4/5', 3024847], ['2017/4/6', 3174056], ['2017/4/7', 3208696], ['2017/4/8', 3644736], ['2017/4/9', 4198117], ['2017/4/10', 3868350], ['2017/4/11', 3576440], ['2017/4/12', 3524784], ['2017/4/13', 3621275], ['2017/4/14', 3695967], ['2017/4/15', 3728965], ['2017/4/16', 28485193], ['2017/4/17', 3525579], ['2017/4/18', 3452680], ['2017/4/19', 3535350], ['2017/4/20', 3655541], ['2017/4/21', 3884779], ['2017/4/22', 3780629], ['2017/4/23', 3633830], ['2017/4/24', 3224390], ['2017/4/25', 2923902], ['2017/4/26', 2880839], ['2017/4/27', 2755101], ['2017/4/28', 18758817], ['2017/4/29', 2186199], ['2017/4/30', 1380389], ['2017/5/1', 1153320], ['2017/5/2', 969908], ['2017/5/3', 855008], ['2017/5/4', 778459], ['2017/5/5', 705690], ['2017/5/6', 644825], ['2017/5/7', 605013], ['2017/5/8', 519751], ['2017/5/9', 462824], ['2017/5/10', 412711], ['2017/5/11', 397259], ['2017/5/12', 360223], ['2017/5/13', 351614], ['2017/5/14', 332985], ['2017/5/15', 288986], ['2017/5/16', 262668], ['2017/5/17', 254744], ['2017/5/18', 247669], ['2017/5/19', 245234], ['2017/5/20', 235613], ['2017/5/21', 242238], ['2017/5/22', 230282], ['2017/5/23', 208963], ['2017/5/24', 77862], ['2017/5/25', 186705], ['2017/5/26', 173613], ['2017/5/27', 167778], ['2017/5/28', 172338], ['2017/5/29', 174826], ['2017/5/30', 168858], ['2017/5/31', 142353] ]; return data; } var data = getVirtulData(2017); var xAxisData = []; var data1 = []; var data2 = []; for (var i = 0; i < 100; i++) { xAxisData.push([ '1/1','1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14', '1/15', '1/16', '1/17', '1/18', '1/19', '1/20', '1/21', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8', '2/9', '2/10', '2/11', '2/12', '2/13', '2/14', '2/15', '2/16', '2/17', '2/18', '2/19', '2/20', '2/21', '2/22', '2/23', '2/24', '2/25', '2/26', '2/27', '2/28', '3/1', '3/2', '3/3', '3/4', '3/5', '3/6', '3/7', '3/8', '3/9', '3/10', '3/11', '3/12', '3/13', '3/14', '3/15', '3/16', '3/17', '3/18', '3/19', '3/20', '3/21', '3/22', '3/23', '3/24', '3/25', '3/26', '3/27', '3/28', '3/29', '3/30', '3/31', '4/1', '4/2', '4/3', '4/4', '4/5', '4/6', '4/7', '4/8', '4/9', '4/10', '4/11', '4/12', '4/13', '4/14', '4/15', '4/16', '4/17', '4/18', '4/19', '4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '4/28', '4/29', '4/30', '5/1', '5/2', '5/3', '5/4', '5/5', '5/6', '5/7', '5/8', '5/9', '5/10', '5/11', '5/12', '5/13', '5/14', '5/15', '5/16', '5/17', '5/18', '5/19', '5/20', '5/21', '5/22', '5/23', '5/24', '5/25', '5/26', '5/27', '5/28', '5/29', '5/30', '5/31']); data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5); //data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5); } option = { title: { text: '柱状图动画延迟' }, legend: { data: ['bar', 'bar2'], align: 'left' }, toolbox: { // y: 'bottom', feature: { magicType: { type: ['stack', 'tiled'] }, dataView: {}, saveAsImage: { pixelRatio: 2 } } }, tooltip: {}, dataZoom: [ { type: 'slider', xAxisIndex: 0, filterMode: 'empty' }, { type: 'slider', yAxisIndex: 0, filterMode: 'empty' }, ], xAxis: { type:'category', data: xAxisData, axisLabel:{ show:true, interval:'auto', }, silent: false, splitNumber:10, splitLine: { show: false } }, yAxis: { }, series: [{ name: 'bar', type: 'bar', data: data1, animationDelay: function (idx) { return idx * 10; } }, { //name: 'bar2', type: 'bar', data: data2, animationDelay: function (idx) { return idx * 10 + 100; } }], animationEasing: 'elasticOut', animationDelayUpdate: function (idx) { return idx * 5; } };
