动态echarts流光效果

心瘾222

于 2024-07-09 14:00:56 发布

阅读量225

点赞数 5

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_68783657/article/details/140294086

版权

柱状图流光效果

let data = [120, 200, 150, 80, 70, 110, 130];

option = {
  backgroundColor: '#fff',
  color: ['pink'],
  textStyle: {
    color: '#fff'
  },
  yAxis: {
    type: 'category'
  },
  xAxis: {
    type: 'value'
  },
  series: [
    {
      data: data,
      type: 'bar',
      barWidth: 5
    },
    {
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      data: [120, 200, 150, 80, 70, 110, 130].map((item, index) => {
        return {
          coords: [
            [0, index],
            [item , index]
          ]
        };
      }),
      effect: {
        show: true,
        period: 2.5,//流光速度
        trailLength: 0.5, //控制拖尾长度
        symbolSize: 5,//大小
        //图片效果
        symbol:
          'path://M307.46000719101244,524.9919417770187 L320.064963732395,524.9919417770187 L323.95999229701675,510.4772043087195 L327.8550230764027,524.9919417770187 L340.45997740302056,524.9919417770187 L330.26237201075065,533.9624401818169 L334.15760211881354,548.4771776501146 L323.95999229701675,539.506434950185 L313.76238468998207,548.4771776501146 L317.6576159054294,533.9624401818169 L307.46000719101244,524.9919417770187 z',
        loop: true,
        color: '#fff' //流光颜色
      },
      lineStyle: {
        width: 0,
        opacity: 0.6,
        curveness: 0
      },
      z: 99
    }
  ]
};