echarts饼图当鼠标移上去后,高亮色怎么设置为扇形本身的颜色?

86 阅读2分钟

以下是一个环形图,鼠标未移到饼图上时

图片.png

当鼠标移动到时长异常部分时,因为设置了高亮的原因再加上本身颜色就浅,看起来像换了种颜色

hover.png

先看下优化后的样子

-hover-ok.png

对比明显吧。

如何在设置了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的函数,试了下,并不行。总之记录下,或许有人会用到。