echarts柱状图流光动效

最新推荐文章于 2024-07-09 14:00:56 发布

m~781

最新推荐文章于 2024-07-09 14:00:56 发布

阅读量2.4k

点赞数 4

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_56456071/article/details/131704150

版权

let data = [20, 60, 70, 152, 70, 110, 130];
option = {
  backgroundColor: '#fff',
  color: ['pink'],
  textStyle: {
    color: '#fff'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  xAxis: {
    type: 'value'
  },
  series: [
    {
      data: data,
      type: 'bar',
      barWidth: 20
    },
    {
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      data: [120, 200, 150, 80, 70, 110, 130].map((item, index) => {
        return {
          coords: [
            [0, index],
            [item - 4, index]
          ]
        };
      }),
      effect: {
        show: true,
        period: 2.5,
        trailLength: 0.5, //控制拖尾长度
        symbolSize: 30,
        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
    }
  ]
};

效果图