ECharts柱狀圖關(guān)閉鼠標hover時的高亮樣式詳解

更新時間：2023年04月27日 10:27:14 作者：TuTu_wenjuan

為了方便使用,echarts的餅圖中給加入了默認的hover高亮效果,下面這篇文章主要給大家介紹了關(guān)于ECharts柱狀圖關(guān)閉鼠標hover時的高亮樣式的相關(guān)資料,需要的朋友可以參考下

最近在做圖表相關(guān)的需求，使用的是echarts來畫圖。

今天算是遇到一個比較坑的點了吧，就是兩根柱狀圖重疊對比，設(shè)計圖把某根柱狀圖的顏色設(shè)計得比較淺，因為echarts的柱狀圖本身hover到柱子上的時候，會有個高亮狀態(tài)，畫出來的圖形本身是這樣的：

鼠標hover上去的時候，因為預(yù)算的那根柱子的背景色設(shè)計得比較前，鼠標hover的時候，提示正常展示了，但是被echarts本身hover的時候高亮狀態(tài)，導(dǎo)致柱子看不見了：

因為影響到了圖表的效果，所以想要關(guān)閉echarts的高亮狀態(tài) ，查文檔，發(fā)現(xiàn)echarts是有給我們提供屬性來控制高亮是否展示的：

只需要把series.emphasis.disabled設(shè)置為ture,即可關(guān)閉hover時的高亮。

option = {
  series: [
    {
      name: '預(yù)算數(shù)據(jù)',
      type: 'bar',
      barWidth: '60%',
      color: '#EAF6FE',
      emphasis: {
        disabled: true,
        focus: 'none'
      },
      data: [100, 520, 200, 350, 400, 370, 260]
    },
    {
      name: '實際數(shù)據(jù)',
      type: 'bar',
      barWidth: '60%',
      color: '#60BBFD',
      barGap: '-100%',
      emphasis: {
        disabled: true,
        focus: 'none'
      },
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};