今天在优化以前的数据可视化大屏项目时，发现有一个echarts柱状图没有动画效果，但是其他图表都是有动画效果的，排查发现是因为这一段代码造成的 animation: false,，将false改为true后，图表动画效果就出现了。
完整option代码
var option = {
tooltip: {
show: false,
},
title: [{
text: '单位：万',
right: '10',
top: '0',
textStyle: {
fontSize: 12,
color: 'rgba(143, 173, 204, 1)'
}
}],
animation: true,
grid: {
right: 20,
containLabel: true,
left: 10,
top: "20",
bottom: "20"//也可设置left和right设置距离来控制图表的大小
},
xAxis: {
data: this.list.map(obj => obj.name),
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#1c84e4',
width: 1
},
},
axisTick: {
show: false //隐藏X轴刻度
},
axisLabel: {
show: true,
interval: 0,
margin: 5,
fontSize: 12,
textStyle: {
color: "#A3C0DF", //X轴文字颜色
lineHeight: 18
},
formatter: function (value) {
if (value.length > 4) {
return value.substring(0, 4) + '\n' + value.substring(4);
}
return value;
}
},
},
yAxis: {
gridIndex: 0,
splitNumber: 4,
splitLine: {
show: false,
lineStyle: {
type: 'solid',
color: 'rgba(10, 37, 69, 1.00)',
width: 1
},
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#1c84e4',
width: 1
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
margin: 5,
fontSize: 14,
textStyle: {
color: "#A3C0DF" //Y轴文字颜色
},
},
},
series: [
{
name: "",
type: "bar",
barWidth: 12,
showBackground: true,
backgroundStyle: {
color: 'transparent',
borderColor: '#063e96',
borderWidth: 1,
borderType: 'solid'
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 198, 255, 1)'
},
{
offset: 1,
color: 'rgba(119, 226, 247, 1)'
}
])
},
decal: {
show: false,
symbol: 'circle',
symbolSize: [0, 60],
},
},
data: this.list,
z: 10,
zlevel: 0,
label: {
show: true,
position: 'top',
distance: 10,
color: '#fff',
fontFamily: 'DIN-bold',
},
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: "#063e96"
}
},
symbolRepeat: 'fixed',
symbolMargin: 4,
symbol: 'rect',
symbolClip: true,
symbolSize: [16, 2],
symbolPosition: "start",
symbolOffset: [0, -1],
// symbolBoundingData: this.total,
data: this.list,
width: 10,
z: 0,
zlevel: 1,
},
]
}
