使用echarts创建一个进度条，怎么设置流光效果

使用echarts创建一个进度条，怎么设置流光效果

 

1.引言：

相信大家做大屏都会用到echarts，但是我们是否能把他做些动画效果呢？

那么今天就来介绍一个bar进度条的流光效果。

2.制作过程：

首先：第一步我们先来制作一个进度条：

option = {
  xAxis: {
			show: false,
			max: 1,
		},
		yAxis: {
			data: ['1'],
			inverse: true,
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			axisLabel: {
				show: false
			}
		},
		grid: {
			top: 'center',
			left: 0,
			right: 0
		},
  series: [
    {
				type: 'bar',
				barWidth: 12,
				showBackground: true,
				backgroundStyle: {
					color: 'rgba(0,0,0,0.06)',
					borderRadius: 6,
				},
				itemStyle: {
					color: '#f2e0ac',
					borderRadius: 6,
				},
				data: [0.95],
				z: 0,
				animation: false,
		},
  ]
};

然后：我们来加流光效果：

流光效果其实就是我们在原来柱子的基础上添加了一个同样的柱子

{
			type: 'bar',
			barWidth: 12,
			barGap: '-100%', // 使流光层与主进度条重叠
			itemStyle: {
				color: '#f9be0e', // 注意这里和我们已经执行过的那部分颜色是相同的深色颜色
				borderRadius: 6
			},
			data: [0.95],
			z: 2,
			animation: true,
			animationDuration: 2000,
			animationEasing: 'linear',
			animationDelay: 1000,
		}

这样我们就增加了流光效果了。

现在：让我们来实现一个不同的样式

option = {
  xAxis: {
			show: false,
			max: 1,
		},
		yAxis: {
			data: ['1'],
			inverse: true,
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			axisLabel: {
				show: false
			}
		},
		grid: {
			top: 'center',
			left: 0,
			right: 0
		},
  series: [
    {
        "type": "bar",
        "barWidth": 12,
        "showBackground": true,
        "backgroundStyle": {
            "color": "rgba(0, 0, 0, 0.06)",
            "borderRadius": 0
        },
        "itemStyle": {
            "color": "#F5E597",
            "borderRadius": 0
        },
        "data": [
            0.927
        ],
        "z": 0,
        "animation": false
    },
    {
        "type": "pictorialBar",
        "color": "rgba(255,255,255,0.98)",
        "symbol": "path://M0,0,L0,4,20,4,20,0z M0,16,L0,20,20,20,20,16z M0,4,L4,4,4,16,0,16z M16,4,L20,4,20,16,16,16z",
        "animationDuration": 0,
        "symbolRepeat": "fixed",
        "symbolMargin": -1,
        "symbolClip": true,
        "symbolSize": 20,
        "emphasis": {
            "disabled": true
        },
        "data": [
            1
        ],
        "z": 2
    },
    {
        "type": "bar",
        "barWidth": 12,
        "barGap": "-100%",
        "itemStyle": {
            "color": "#FFD52B",
            "borderRadius": 0
        },
        "data": [
            0.927
        ],
        "z": 1,
        "animation": true,
        "animationDuration": 5000,
        "animationEasing": "linear",
        "animationDelay": 1000
    }
  ]
};

以上就是全部内容。希望能帮到大家