echarts 手擼簡單動態markLine

2021-08-31 23:55:35 字數 2433 閱讀 2119

這就讓我很尷尬了啊.因為我接到乙個需求.

這個需求呢,是這樣的:

畫個圖, 三條線, 乙個代表上限, 乙個代表下限, 乙個是實際值.

實際值超過上限或者下限的地方標紅一下.

實際內容下來了之後呢…我就有點懵逼了…

怎麼這個上限和這個下限還是個陣列格式的呢…

什麼都沒有!!! 別人公司的需求都不上班的嗎!!!

行吧行吧,我想想辦法…想想辦法…啊啊啊啊啊啊啊啊啊啊我靠,echarts也不是我開發的啊

它支不支援我怎麼知道啊啊啊啊啊啊啊啊…有毒吧有毒吧…

好吧, 我熱愛這個世界…啊啊啊啊啊啊啊啊啊啊啊…

熱愛世界…熱愛世界…冷靜…冷靜…

其實我的思路也很簡單= =markline也是line, 我做兩個line放上去也行吧

說幹咱就幹,這個線其實畫起來也挺簡單的

看看這個樣式是不是很像markline.

option =

, yaxis:

, series:[}

}]};

好的,我們現在有這個markline線了,可以在data裡面自己填充資料.

我再看一下這個需求,嗯?超過還要紅色的線???

啊啊啊啊啊啊啊啊啊啊我刀呢我刀呢我刀呢!!! 人間不值得…

看了一眼自己的銀行卡餘額,算了算了,回來繼續寫…

怎麼個意思?

我定義了兩個變數:

const red: any =}}

;const normal: any =}}

;

可以說是相當簡單了,下圖示例是對應的程式部分

a代表當前實際值的座標, b代表下乙個實際值的座標

c代表當前最大值的座標,d代表下乙個最大值的座標

e代表當前最小值的座標,f代表下乙個最小值的座標

不明白的可以去看看官方示例:

(之前特別留意了這個特性是因為覺得空閒的時候可以用echarts畫個畫什麼的,沒想到還可以在這種地方有正經用途…)

if

(a.y > c.y && b.y > d.y)

else

if(a.y < e.y && b.y < f.y)

else

emmmmmmmmmmmmmmmmmm展示一下效果圖

這這這…雖然知道肯定會在精度方面有些問題,沒想到居然這麼醜…

出現這個的原因吧,是因為每兩個資料點之間太寬了,我自己造的資料太少了,就出現了這個情況.

但是實際情況中也會有這種情況.

強迫症如我那肯定是忍不了忍不了忍不了…唉,改吧改吧…

下面是我寫的func, 將兩條線ab和cd之間的交點求出,並將線段ab切成兩部分ax, xb

這個n1, n2就是我們y=kx + c的引數k, c1, c2就是引數c

(不知道是不是因為預感今天要做這個需求,昨晚我還夢見了我初中數學老師,噩夢阿…罵了我整整一宿, 不過也說不定是因為昨天我在做傅利葉變換的需求= =,唉,最近都是數學相關的, 不做噩夢才怪)

cross(a, b, c, d)
好了,交點也求出來了.

將之前的if…else…完善一下

我覺得我寫得可以說是精細入微了,從研究思路到具體操作都一步步寫的清清楚楚了.

沒看懂就多看幾遍吧, 基本都是遇到我覺得網上找不到的內容才會寫在部落格裡.

純手擼 堆排序

堆排序學習筆記 外婆的澎湖灣 前提 堆用完全二叉樹表示時,其表示方法不唯一,但可以確定的是樹的根結點要麼是無序表中的最小值,要麼是最大值。思想 步驟 二叉堆在實現的時候,是採取陣列的形式來儲存的。從二叉堆中刪除乙個元素,為了充分利用空間,其實我們是可以把刪除的元素直接存放在二叉堆的最後乙個元素那裡的...

劉老師手擼系列

自劉老師部落格 劉老師手擼系列之一 手擼orm 劉老師手擼系列之二 手擼web框架 劉老師手擼系列之三 手擼快取系統 劉老師手擼系列之四 手擼session 劉老師手擼系列之五 手擼rpc 遠端過程呼叫 劉老師手擼系列之六 手擼秒殺系統 持續更新.十天快速入門python python從入門到web...

手擼簡易spring框架(二)

private void refresh throws exception 完成beandefinitionreader中的構造方法,流程分為三步走 儲存了所有bean的classname private list registybeanclasses newarraylist public bea...