Incubator-echarts: 饼图鼠标经过高亮颜色变淡问题

Created on 17 Sep 2018 · 7Comments · Source: apache/incubator-echarts

在使用饼图时，整体背景颜色为白色 #FFFFFF，有一个扇区的颜色值是 #F1F1F1 的色值，在鼠标经过高亮时，会变成跟背景色一样的颜色（白色）。

series 下有一个 hoverOffset 来设置偏移量，请问是否有一个属性值来设置 hover 高亮时的颜色变化，或者禁止颜色变化。

Echarts Version:4.x
Browser Version: chrome/69

option = {
    backgroundColor:'#FFFFFF',
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            color:['#F1F1F1','#F00'],
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
            ]
        }
    ]
};

support

Source

terrilltang

All 7 comments

emphasis 下的颜色设为和默认的一样的

Ovilia on 17 Sep 2018

谢谢，在做了一些尝试后，得到了解决的办法。

option = {
    backgroundColor:'#FFFFFF',
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            color:['#F1F1F1','#F00'],
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
            ],
           emphasis:{
                itemStyle:{
                    color:['#F1F1F1','#F00'],
                }
            }
        }
    ]
};

直接添加 emphasis 到 itemStyle 里是不支持的，而且会出现颜色值顺序的对调，就是鼠标经过 #F1F1F1 的扇区时，扇区的颜色会变成 #F00，相反的 #F00 的经过时是 #F1F1F1。

后来尝试把 itemStyle.color 和 emphasis.itemStyle.color 都定义在了 data 的数据项中便可以了。
以下代码：

option = {
    backgroundColor:'#FFFFFF',
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'视频广告',
                itemStyle:{
                    color:'#F1F1F1'
                },
                 emphasis:{
                     itemStyle:{
                        color:'#F1F1F1'
                     }
                 }
                },
                {value:274, name:'联盟广告',
                    itemStyle:{
                    color:'#800'
                },
                 emphasis:{
                     itemStyle:{
                        color:'#800'
                     }
                 }
                },
            ]
        }
    ],

};

代码测试环境使用的是 http://www.echartsjs.com/gallery/editor.html?c=doc-example/tutorial-styling-step5

建议是否可以考虑添加 hoverColorAlpha 这样的 boolean/number 属性在 series 中“禁止/空间值”来控制，方便多条目 data 时结合 color 数组类型的值的使用。

terrilltang on 17 Sep 2018

😕4

可以用 silent 禁用交互，但是这样其他效果（比如放大 hover 的扇形块）也会失效

Ovilia on 17 Sep 2018

series.emphasis.itemStyle.color 能否像 series.itemStyle.color 一样支持函数作为参数？