ECharts柱狀圖關(guān)閉鼠標(biāo)hover時(shí)的高亮樣式詳解
最近在做圖表相關(guān)的需求，使用的是echarts來畫圖。
今天算是遇到一個(gè)比較坑的點(diǎn)了吧，就是兩根柱狀圖重疊對比，設(shè)計(jì)圖把某根柱狀圖的顏色設(shè)計(jì)得比較淺，因?yàn)閑charts的柱狀圖本身hover到柱子上的時(shí)候，會(huì)有個(gè)高亮狀態(tà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是有給我們提供屬性來控制高亮是否展示的：
只需要把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 升級你們項(xiàng)目的echarts版本啦。
總結(jié)
到此這篇關(guān)于ECharts柱狀圖關(guān)閉鼠標(biāo)hover時(shí)的高亮樣式的文章就介紹到這了,更多相關(guān)ECharts柱狀圖關(guān)閉高亮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
所謂的遞歸函數(shù)就是在函數(shù)體內(nèi)調(diào)用本函數(shù)。使用遞歸函數(shù)一定要注意，處理不當(dāng)就會(huì)進(jìn)入死循環(huán)。遞歸函數(shù)只有在特定的情況下使用 ，比如階乘問題2012-10-10
swiper.js插件實(shí)現(xiàn)pc端文本上下滑動(dòng)功能示例
這篇文章主要介紹了swiper.js插件實(shí)現(xiàn)pc端文本上下滑動(dòng)功能,結(jié)合實(shí)例形式分析了swiper.js插件的具體引用與相關(guān)使用技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈幕墻、祝福墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了webpack踩坑之路圖片的路徑與打包，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
stream.js 一個(gè)很小、完全獨(dú)立的Javascript類庫
stream.js 是一個(gè)很小、完全獨(dú)立的Javascript類庫，它為你提供了一個(gè)新的Javascript數(shù)據(jù)結(jié)構(gòu)：streams2011-10-10
JS與SQL方式隨機(jī)生成高強(qiáng)度密碼示例
這篇文章主要介紹了JS與SQL方式隨機(jī)生成高強(qiáng)度密碼,結(jié)合實(shí)例形式分析了javascript方式與SQL方式生成高強(qiáng)度密碼的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
淺談JavaScript 執(zhí)行環(huán)境、作用域及垃圾回收
下面小編就為大家?guī)硪黄獪\談JavaScript:執(zhí)行環(huán)境、作用域及垃圾回收。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
純JavaScript基于notie.js插件實(shí)現(xiàn)消息提示特效
這篇文章主要介紹了純JavaScript基于notie.js插件實(shí)現(xiàn)消息提示特效，可以制作Alert提示框，確認(rèn)框和帶輸入的消息框，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要給大家介紹了關(guān)于利用微信小程序?qū)崿F(xiàn)皮膚功能，也就是實(shí)現(xiàn)夜間模式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
詳解ES6數(shù)組方法find()、findIndex()的總結(jié)
這篇文章主要介紹了詳解ES6數(shù)組方法find()、findIndex()的總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05