使用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}]
};以上就是全部内容。希望能帮到大家
