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);
}
}