eCharts柱状图设置流光效果eCharts柱状图动效，横向柱状图和纵向柱状图的动态流光效果，series中使用了ec

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echart.min.js"></script>
</head>

<body>
  <div class="box" style="width: 25rem; height: 25rem;"></div>

  <script>
    let myChart = echarts.init(document.querySelector('.box'))
    let data = [20, 60, 70, 152, 70, 110, 130];
    option = {
      backgroundColor: '#000',
      textStyle: {
        color: '#fff'
      },
      yAxis: {
        type: 'value'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      series: [
        {
          data: data,
          type: 'bar',
          barWidth: 20,
          itemStyle: {
            color: '#1890ff'
          }
        },
        {
          // 路径图
          type: 'lines',
          // 二维直角坐标系
          coordinateSystem: 'cartesian2d',
          // 数据
          data: data.map((item, index) => {
            return {
              // 二维数组
              coords: [
                // 起点 [x, y] 竖着走x不变，y变
                [index, 0],
                // 终点
                [index, item - 4]
              ]
            };
          }),
          // 特效配置
          effect: {
            // 是否显示特效
            show: true,
            // 特效动画时间
            period: 2.5,
            // 拖尾长度
            trailLength: 0.5, //控制拖尾长度
            // 标记大小
            symbolSize: 10,
            // 标记类型
            symbol: 'rect',
            // 是否循环播放
            loop: true,
            // 流光颜色
            color: 'rgba(255, 255, 255, .45)'
          },
          // 不展示线段展示
          lineStyle: {
            width: 0,
            opacity: 0,
            curveness: 0
          },
          z: 99
        }
      ]
    };
    myChart.setOption(option)
  </script>
</body>

</html>