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

版权声明:本文为博主原创文章,未经博主允许不得转载。 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';
});

效果如下:

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_26769677/article/details/82559808