vue中echarts 鼠标悬浮 图例文字颜色相应改变

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

效果如下：