今天算是遇到一個(gè)比較坑的點(diǎn)了吧，就是兩根柱狀圖重疊對(duì)比，設(shè)計(jì)圖把某根柱狀圖的顏色設(shè)計(jì)得比較淺，因?yàn)閑charts的柱狀圖本身hover到柱子上的時(shí)候，會(huì)有個(gè)高亮狀態(tài)，畫出來(lái)的圖形本身是這樣的：

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

因?yàn)橛绊懙搅藞D表的效果，所以想要關(guān)閉echarts的高亮狀態(tài) ，查文檔，發(fā)現(xiàn)echarts是有給我們提供屬性來(lái)控制高亮是否展示的：

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

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í)際數(shù)據(jù)',
      type: 'bar',
      barWidth: '60%',
      color: '#60BBFD',
      barGap: '-100%',
      emphasis: {
        disabled: true,
        focus: 'none'
      },
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};

配置好這個(gè)屬性之后，鼠標(biāo)移動(dòng)到柱子上的時(shí)候，圖表也能不被影響，可以正常查看。

但是需要注意的一個(gè)點(diǎn)是，這個(gè)屬性，只有5.3.0之后的版本才支持，5.3.0之前的版本配置了是不會(huì)生效的！所以，如果是5.3.0之前的版本，你可以選擇聯(lián)系UI修改一下圖表的配色 or 升級(jí)你們項(xiàng)目的echarts版本啦。

總結(jié)

到此這篇關(guān)于ECharts柱狀圖關(guān)閉鼠標(biāo)hover時(shí)的高亮樣式的文章就介紹到這了,更多相關(guān)ECharts柱狀圖關(guān)閉高亮內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: