头图

echart制作柱状图白光闪过效果

柚花离海

话不多说,线上UI图
QQ录屏20210926095558.gif
要实现柱状图有白光闪过的效果,当时是想用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);
阅读 335

伪前端

2 声望
1 粉丝
0 条评论

伪前端

2 声望
1 粉丝
文章目录
宣传栏