echarts柱状图加载速度过快,客户想要让动画慢一点,这里我们可以通过设置animationDuration
来控制动画的加载速度。
animationDuration: 2000, // 这里设置动画持续时间为 3000 毫秒(3 秒)
animationEasing: "cubicOut", // 这里设置缓动函数为 cubicOut
实例代码
option.options.push({
series: [
{
name: '人数',
data: this.list.map(obj => obj.value),
animationDuration: 2000, // 这里设置动画持续时间为 3000 毫秒(3 秒)
animationEasing: "cubicOut", // 这里设置缓动函数为 cubicOut
barWidth: 8,
z: 0,
stack: "1",
type: "pictorialBar",
barCategoryGap: "100%",
symbol: "path://M126,10 C59.72583,10 6,8.209139 6,6 C6,3.790861 59.72583,2 126,2 C126,6 126,6 126,10 Z",
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: 'linear',
colorStops: [
{
offset: 0,
color: 'rgba(230, 132, 34, 1)',
},
{
offset: 1,
color: 'rgba(1, 15, 26, 1)',
},
],
},
},
label: {
show: false,
position: 'top',
distance: 10,
color: '#fff',
fontFamily: 'DIN-bold'
},
},
]
});