版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26769677/article/details/82559808
1.首先设置鼠标悬停后 的背景颜色
series : [
{
itemStyle: {
emphasis: {
color:'#ff9999'
},
}
}
]
2.设置动态绑定样式(这里是自己写的图例文字)
<div class="legend">
<ul>
<li><span class="total" :style="{'background-color':total}"></span><span>aa </span></li>
<li><span class="Available" :style="{'background-color':Available}"></span><span>bb</span></li>
<li><span class="Identity" :style="{'background-color':Identity}"></span><span>cc </span></li>
<li><span class="guarantee" :style="{'background-color':guarantee}"></span><span>dd </span></li>
</ul>
</div>
total: '#71a4ff', //data中添加
guarantee: '#eee',
Identity :'#eee',
Available :'#eee',
3.悬浮时动态改变样式,离开悬浮后背景颜色还原
myChart.on('mouseover',function(param){ //鼠标悬浮触发事件
value = param.name; //获取图表的value值
switch(value){
case 'aa': //判断当鼠标在哪个区域
_this.total = '#ff9999'; //分别显示背景颜色
_this.Available = '#eee';
_this.Identity = '#eee';
_this.guarantee = '#eee';
break;
case 'bb':
_this.total = '#71a4ff';
_this.Available = '#ff9999';
_this.Identity = '#eee';
_this.guarantee = '#eee';
break;
case 'cc':
_this.total = '#71a4ff';
_this.Available = '#eee';
_this.Identity = '#ff9999';
_this.guarantee = '#eee';
break;
case 'dd':
_this.total = '#71a4ff';
_this.Available = '#eee';
_this.Identity = '#eee';
_this.guarantee = '#ff9999';
break;
}
});
myChart.on('mouseout',function(param){ //鼠标离开时 背景颜还原
_this.total = '#71a4ff';
_this.Available = '#eee';
_this.Identity = '#eee';
_this.guarantee = '#eee';
});
效果如下: