最近想做一個統計文章點擊率,評論率和點贊率的功能,聽說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,結果氣泡出來了。
},
可能是分析能力太弱了,或許是對其配置不熟,導致老是做些莫名其妙的傻事!!下次啊,再用什么技術,還是得先摸清楚,使用它的前提條件是啥。
希望對大家有用。