Vue根据图表数值给其添加外框样式

需求：图表显示中，默认外框为黑色，即正常范围-50 ~ 50。如果数值在-200 ~ -50和50 ~ 200则显示外框为红色，若数值在-200 和 200开外则让红框显示动态放大效果

样式效果保密

代码实现如下：

样式部分（只做一个案例效果）：

<div>
    <!--由:class和:style进行判断-->
    <!--注意:style处的拼接空格-->
	<div :class="[Jing_isActive.fei === true ? 'panelL' : 'panelR']" :style="{border: '2px solid ' +  Jing_color.fei_color}">
        <!--echarts实现的堆叠图组件-->
		<stack-area-chart :jingluo-name="jingluoJingName.fei" :median="dataJing.fei.median" :bar-chart-data="dataJing.fei.barChartData" :line-chart-color="dataJing.fei.lineChartColor" :line-chart-data="dataJing.fei.lineChartData" :chart-color="dataJing.fei.chartColor" :x-axis-data="dataJing.xAxisData" />
	</div>
</div>

数据部分：

Jing_isActive: {
	fei: false
},
Jing_color: {
	fei_color: '',
},
Jing_showValue: {
	fei_L: 0,
    fei_R: 0,
}

方法实现：

// 判断边框颜色
    getBorder() {
	  // 接口获取数据
      fetchJudgement(this.dataQuery.recordId).then(res => {
        // 数据读取
        this.Jing_showValue.fei_L = res.data.jing.fei.showValueL
        this.Jing_showValue.fei_R = res.data.jing.fei.showValueR
		// 注意js里的判断方式
        if((this.Jing_showValue.fei_L > -50 && this.Jing_showValue.fei_L <50) && (this.Jing_showValue.fei_R > -50 && this.Jing_showValue.fei_R <50)) {
          this.Jing_isActive.fei = false
          this.Jing_color.fei_color = 'black'
        }
        else if( (50 <= this.Jing_showValue.fei_L && this.Jing_showValue.fei_L <= 200) || (-200 <= this.Jing_showValue.fei_L && this.Jing_showValue.fei_L <= -50) || (50 <= this.Jing_showValue.fei_R && this.Jing_showValue.fei_R <= 200) || (-200 <= this.Jing_showValue.fei_R && this.Jing_showValue.fei_R <= -50) ) {
          this.Jing_isActive.fei = false
          this.Jing_color.fei_color = 'red'
        }
        else if( this.Jing_showValue.fei_L > 200 || this.Jing_showValue.fei_L < -200 || this.Jing_showValue.fei_R > 200 || this.Jing_showValue.fei_R < -200) {
          this.Jing_isActive.fei = true
          this.Jing_color.fei_color = 'red'
       	}
      })
    }

边框样式：

.panelR {
  position: relative;
  height: 175px;
  padding: 5px 10px 20px;
  border: 2px solid black;
  margin-bottom: 5px;
  background-color: #F5F5F5
}

.panelL {
  position: relative;
  height: 175px;
  padding: 5px 10px 20px;
  border: 2px solid red;
  margin-bottom: 5px;
  background-color: #F5F5F5;
  animation: animated-border 1.5s infinite;
}
/** 实现动态效果 */
@keyframes animated-border {
  0% {
    box-shadow: 0 0 0 0 rgba(246, 4, 4, 0.6);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(246, 4, 4, 0);
  }
}