以下是一个环形图,鼠标未移到饼图上时
当鼠标移动到时长异常部分时,因为设置了高亮的原因再加上本身颜色就浅,看起来像换了种颜色
先看下优化后的样子
对比明显吧。
如何在设置了emphasis高亮配置时,保持扇形的颜色为本身的颜色呢,换句话说,想要保留高亮的其它配置,比如放大,边框等等,但颜色不要高亮展示,该如何设置呢?
option = {
series: [
{
"name":"运行状态",
"type":"pie",
"startAngle":90,
"radius":[
"58%",
"73%"
],
"center":[
"50%",
"50%"
],
animation: true,
"selectedoffset":3,
//这里设置统一悬停样式
emphasis:{
"scale": true,
"scalesize":6,
itemStyle:{
// "shadowBlur": 20,
// "shadowColor":"rgba(0,0,0,1)",
"borderWidth": 3,
"borderColor": "#fff",
}
},
"label":{
"padding":[
15,
0,
0,
0
],
"color":"#4E5969",
"fontSize":14,
"formatter":"{b|{b}} {d|{c}%}\n",
"rich":{
"b":{
"fontSize":14,
"color":"#4E5969"
},
"d":{
"fontSize":16,
"fontWeight":600,
"fontFamily":"DINAlternate-Bold, DINAlternate",
"color":"#4E5969"
}
}
},
"labelLine":{
"length2":4
},
"data":[
{
"name":"时长异常",
"value":41.63,
originalColor: "#91caff",
"itemStyle":{
"color":"#91caff",
"borderColor":"#fff",
"borderWidth":2
},
// 答案在这里--->>>鼠标悬停,颜色不高亮,且使用扇形本身颜色
emphasis:{
"itemStyle":{
"color":"#91caff",
}
}
},
{
"name":"时长正常",
"value":51.58,
"itemStyle":{
"color":"#358EFE",
"borderColor":"#fff",
"borderWidth":2
},
emphasis:{
"itemStyle":{
"color":"#358EFE",
}
}
},
{
"name":"无时长",
"value":6.79,
"itemStyle":{
"color":"#12C2C1",
"borderColor":"#fff",
"borderWidth":2
},
emphasis:{
"itemStyle":{
"color":"#12C2C1",
}
}
}
]
}
]
};
解决
设置了统一的悬停样式后,在单个data中设置下悬停时样式的color即可~Nice..
当然了,一般不会这么细致,但有时候确实会因为颜色的深浅影响UI视觉效果,这时候去找AI也没给出最简单的答案,AI要在统一悬停那设置color的函数,试了下,并不行。总之记录下,或许有人会用到。