Echarts線圖在設(shè)置x軸高亮之后選中狀態(tài)下的線的symbol不顯示了

原因不是很清楚,但是我的解決思路是這樣的:

我們現(xiàn)在都知道讓線圖默認(rèn)自然展示情況下不顯示symbol 是通過將showSymbol 值賦值為false,但是這種時候,如果我們通過setOtion 方法設(shè)置x軸選中標(biāo)簽高亮?xí)r,symbol 顯示就會失效,于是我想通過其它辦法來實現(xiàn)相同的顯示效果,那就是

showSymbol屬性值改為true(這個點很關(guān)鍵),也就是從始至終都讓線圖有symbol 的展示,只是先將symbolSize值設(shè)置成和線的粗細(xì)一樣的大小,這樣就看不出來它的存在,在選中某一項時,再通過emphasis 高亮設(shè)置的屬性放大symbol以達(dá)到顯示出來的效果,樣式修改也是同理,如果需要邊框,那就默認(rèn)邊框無色,高亮?xí)r再通過itemStyle 給邊框顏色,具體核心代碼如下:

series:[{
…symbol:“circle”, showSymbol:true,? symbolize:4,itemStyle: { color: “#33A5FA”, lineStyle: { width: 4, color: “#33A5FA”}}, …
emphasis: { scale:? 3.75, itemStyle: { border color: “#fff”,borderWidth:? 3, color: “#33A5FA” } }
}]

這樣寫有兩個注意事項:

1.echarts版本

寫完可能發(fā)展這樣并不好用,那就要檢查一下echarts版本,官網(wǎng)上說明了高亮中scale屬性允許使用數(shù)字格式的版本,低版本會導(dǎo)致數(shù)值不生效,只支持布爾值

2.延時器

版本也給了還是不生效,那就要想一下有可能是什么原因?qū)е碌?,因為我這個項目的圖是帶有動畫渲染的,會有三秒左右的繪制時間,首次進(jìn)入頁面不生效,但是如果做了修改保存后,樣式就生效了,所以我懷疑是因為渲染速度的問題,可能是一開始這個初始化的圖還沒有渲染好就被我后面的setOption 打斷了或者是怎么樣,于是我給修改x高亮的方法放在了定時器里面,加了個五秒的延時,果然就好了,這個時間就按著各自實際情況給

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容