Echarts繪製不均勻資料軸(y)

2021-10-10 15:20:47 字數 1653 閱讀 6789

現有一組資料:最小的數是50000(5萬),最大的數是3000000000(30億)

如果按照echarts正常的畫法,我們只需提取出來這些資料然後交給echarts顯示即可。

在圖中,y 軸的數值均勻分布,最高的柱子在x軸 第五值為30億,但是x軸 第一值為5萬的柱子,根本看不見,因為差距太大了,包括x軸 第二值為500萬的軸,我們也是只能看到一點點紅色。

為了要顯示出來小一點的值,我們期望的 y 軸排列應該是這樣的:

0    10萬    100萬     1千萬    1億     10億       20億      30億
這樣的數值分布規則就完美符合我們的要求。

所以,我們要做的就是打破 y 軸均勻顯示的規則(本質上並沒有)。

針對這種數值大的資料,我們不免會懷念小數值的好處:

所以,打破規則用到的思想就是縮小資料體量

那麼,我們能不能把上面資料裡上億的數值按照一定的規則讓其變成 很小的資料來在圖里展示呢?

答案是可以的。

這裡可以算是對我在echarts gallery 上發布的乙個不均勻資料軸圖表**的講解了。

直達連線:投資計畫——不均勻資料軸(y)

首先我們看一組資料:

// 資料來源

const sourcedata =[,

,,,,

,,,,

];

這一組資料裡,最大值是 30億 最小值是 5萬。我們怎麼處理資料呢?

第一步:設定資料間隔。

// 間隔(0——30億)

// 0 10萬 100萬 1千萬 1億 10億 20億 30億

const datainterval =[0

,100000

,1000000

,10000000

,100000000

,1000000000

,2000000000

,3000000000

];

可以理解為我們以自己的想法對 0 到 30億 的資料 劃分了顯示的間隔。

第二步:按照間隔處理資料。

const investamount = sourcedata.

map(item =>;}

).filter

(x => x)

;

**解釋:

第三步:渲染資料

這一步最主要的地方是當使用者滑鼠放到圖上時我們肯定不能顯示我們處理過後的數,所以要 formatter 一下:

tooltip:

, formatter:

(v)=>

金額:$

(萬)`

}}

現在你可能就明白了,為什麼我前面說本質上並沒有打破均勻顯示規則表面上看確實改變了,但實際y軸依然是均勻分布的數值,不過我們改變了表象,轉換了資料而已。

完結·撒花

去光照不均勻

matlab clc,close all tic im imread test.png figure imshow im title 原圖 h,s,v rgb2hsv im 轉到hsv空間,對亮度h處理 高斯濾波 hsize min size im,1 size im,2 高斯卷積核尺寸 q sqr...

redis集群redisKey分步不均勻問題

專案中使用了redis集群,但是生產上發現rediskey 80 都被分配到了同乙個節點,導致該節點磁碟容量報警,其餘節點閒置的情況 專案中為了保持資料的準確性,當系統傳送異常時 單例項上的mset是乙個原子性 atomic 操作,所有給定 key 都會在同一時間內被設定,某些給定 key 被更新而...

MongoDB雜湊分片為什麼分布不均勻?

今天接到乙個使用者反饋的問題,sharding集群,使用wiredtiger引擎,某個db下集合全部用的hash分片,show dbs發現其中乙個shard裡該db的大小,跟其他的集合差別很大,其他基本在60g左右,而這個shard在200g左右?由於這個db下有大量的集合及索引,一眼也看不出問題,...