乐趣区

关于前端:echart制作柱状图白光闪过效果

话不多说,线上 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);
退出移动版