echarts使用踩坑實錄之氣泡圖


最近想做一個統計文章點擊率,評論率和點贊率的功能,聽說echarts可以輕易完成它,於是我就選擇使用echarts,考慮到我做的模塊上文章是沒有分類的,所以我的統計是基於一個個點,這一看嘛,感覺散點圖可以勝任。為了突出表現那篇文章點擊率或點贊率多,感覺氣泡圖就更能勝任這么回事。於是就選擇氣泡圖干這件事。

     簡單地從官網拷貝個案例,直接從后台傳遞需要的json數據,原以為會想直方圖那樣簡單,結果是數據加載了,然而默認沒看見意料中的氣泡!!怎么回事??

                      一開始我懷疑是我后台返回的數據不符合需求,於是我在后台強制請List類型轉為數組類型;前端用js給alert一個數據,發現數據已經是數組類型了!!

                      這就怪了,數據都沒問題,也是種格式怎么就顯示不出氣泡尼。更怪的是懸浮在legend上氣泡就可以看見。沒辦法,我轉眼想能不能手動觸發懸浮鼠標事件,

讓echarts圖一加載圖就可以和鼠標懸停那樣。后來,我放棄了,天,要我讀源碼,不符合我這初級碼農的水平。

                     沒辦法,百度吧...貌似也沒找到個啥。簡直發狂。

                      最后我只能把我的數據和官網給出的案例數據比較,然后不斷地改變大小,最后發現原來是數據數值太小...

                      

                var data = [
                                [[28604,77,17096869,'Australia',1990]]   這是一個氣泡所需要的數據

      series: [{
        name: '1990',
        data: data[0],
        type: 'scatter',
        symbolSize: function (data) {
        return Math.sqrt(data[2]) / 5e2;  data[2] --->17096869這就是控制氣泡的那個數據,我后台獲取的只有幾十的數值大小,這么個開根除法,特么氣泡大小就趨於零了,怎么能看得見他存在哦!!於是我反手就將Math.sqrt(data[2]) / 5e2;改成data[2]/50,結果氣泡出來了。
        },
              

                 可能是分析能力太弱了,或許是對其配置不熟,導致老是做些莫名其妙的傻事!!下次啊,再用什么技術,還是得先摸清楚,使用它的前提條件是啥。

                希望對大家有用。

 


免責聲明!

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



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