echarts餅圖默認狀態高亮顯示


需求:餅狀圖默認狀態下高亮顯示指定內容。

最常見的兩種:

一、餅圖中間始終默認展示數據總數和統計事項的名字(如下圖),這種實現方式比較簡單,就不多介紹

二、餅圖中間默認展示某一圖例的具體數據,鼠標放在誰身上中間就展示誰的數據(如下圖),這種需求實現起來相對比較麻煩,今天就來分享一下如何實現

上代碼前先講一下ECharts中的事件,因為會用到,ECharts中的事件分為兩種,一種是鼠標事件,在鼠標點擊某個圖形上會觸發,還有一種是調用dispatchAction后觸發的事件。官網上有dispatchAction的api,在這就不過多闡述,鏈接在此

https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction。

上代碼

光這樣還有問題:因為echarts默認鼠標移入legend圖例也就是下面的小點點時,也會高亮顯示該圖例的數據,這里需要把該事件取消,否則就會數據重疊展示

在series里面將legendHoverLink設置為false,即取消legend的hover事件

這樣就大功告成了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM