Echarts 柱状图警报闪烁效果，已将代码以及github库贴出，闪光的部分单独引用了一个库。

运行实例

安装依赖

在项目根目录下使用pnpm安装依赖:

pnpm install echartsfg@git+https://gitee.com/yelingkong/echarts-faguang.git

代码

<template>
  <div class="echarts1" ref="echarts">
  </div>
</template>

<script>
import * as echarts from "echartsfg"

export default {
  name: 'echarts1',
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    threshold: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.drawEcharts();
    window.addEventListener('resize', this.drawEcharts);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.drawEcharts);
  },
  methods: {
    drawEcharts() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.echarts);
      let data = this.getdata();
      var option = {
        color: ['rgba(0, 204, 255, 1)', 'rgba(39, 120, 255, 1)', /* ... 其他颜色 ... */],
        grid: {
          left: '5%',
          right: '3%',
          top: '15%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          data: ['医师', '护士', '药剂', '检验', '放射'],
          axisLine: {
            lineStyle: {
              color: '#3d5269'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(150, 175, 220, 1)',
            fontSize: 12,
            interval: 0
          }
        },
        yAxis: [{
          nameTextStyle: {
            color: 'rgba(150, 175, 220, 1)',
            fontSize: 13
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#3d5269'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: 'rgba(150, 175, 220, 1)',
            fontSize: 13
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#2d3d53'
            }
          },
          yAxisIndex: 0
        }],
        series: [
          {
            name: '健康',
            type: 'bar',
            barWidth: 20,
            zlevel: 2,
            data: data,
            label: {
              normal: {
                show: false,
                fontSize: 18,
                fontWeight: 'bold',
                color: '#ffffff',
                position: 'top',
              }
            },
          }]
      };
      this.chart.setOption(option);
    },
    getdata() {
      var data = [200, 102, 165, 245, 475, 201, 121, 325, 165, 245, 375, 201, 201];
      var data2 = [];
      var itemStyle2 = {
        color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [
          {
            offset: 0,
            color: 'rgba(0, 204, 255, 1)'
          },
          {
            offset: 1,
            color: 'rgba(11, 46, 116, 1)'
          }
        ]),
      };
      var itemStyle1 = {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
          {
            offset: 0,
            color: 'rgba(221,107,102,0.7)'
          },
          {
            offset: 0.8,
            color: 'rgb(238,64,61)'
          },
          {
            offset: 1,
            color: 'rgb(186,39,38)'
          }
        ]),
        borderColor: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            1,
            [
              {
                offset: 0,
                color: 'rgba(221,107,102,0.7)'
              },
              {
                offset: 0.8,
                color: 'rgb(238,64,61)'
              },
              {
                offset: 1,
                color: 'rgb(186,39,38)'
              }
            ]
        ),
        borderWidth: 3,
        lineWidth: 2,
        twinkle: {
          enabled: true,
          period: 2000
        }
      };
      for (var i = 0; i < data.length; i++) {
        let data_one = {
          value: data[i],
          itemStyle: data[i] < this.threshold ? itemStyle1 : itemStyle2
        };
        data2.push(data_one);
      }
      return data2;
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

github代码

github代码

使用了自定义库

"echartsfg": "git+https://gitee.com/yelingkong/echarts-faguang.git",