共计 985 个字符,预计需要花费 3 分钟才能阅读完成。
话不多说,线上 UI 图
要实现柱状图有白光闪过的成果,过后是想用 symbol,插入白光.gif 实现,然而发现横向的图成果不是很好,只好舍弃。
而后想到间接用定时器新绘制一个柱状图会更好,这样的毛病就是页面会有多个定时器,echart 始终在从新绘制。
附预览,心愿大家能够找到更好的解决方案
柱状图白光特效
option = {
title: {text: '柱状图高光成果'},
backgroundColor: 'black',
grid: {
right: 20,
top: 40,
bottom: 20,
left: 20,
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {color: ['#4E4E5A'],
width: 1,
type: 'solid'
}
}
},
yAxis: {
type: 'category',
data: ["硬漂浮物", "轻飘浮物", "堆放隐患"],
axisTick: {show: false}
},
series: [
{
name: '硬漂浮物',
type: 'bar',
stack: 'all',
data: [2, 3, 6],
barWidth: 30,
},
{
name: '轻漂浮物',
type: 'bar',
stack: 'all',
data: [3, 2, 1],
barWidth: 30,
},
]
};
var count = 0;
setInterval(function(){if(count%2 == 0){option.series = option.series.slice(0, 2)
myChart.setOption(option,true); // 交替 setOption
}else{
option.series.push(
{
type: 'bar',
data: [5, 5, 7],
barWidth: 30,
barGap: '-100%',
zlevel: 2,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(255, 255, 255, 0.3)'
}, {offset: 1, color: 'rgba(255, 255, 255, 0)'}])
}
}
}
)
myChart.setOption(option,true);
}
count+=1;
},1000);
正文完