柱状图动画延迟echarts 柱状配置项内容和展示
配置项如下
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;
}
};
截图如下
