起源

在技術(shù)群看到有人問(wèn)這個(gè)react插件，帶著好奇心看了一下。

標(biāo)題：基于echarts的帶流動(dòng)光效的折線圖 - 掘金
網(wǎng)址：https://juejin.cn/post/7090566240233586719

了解到這是個(gè)基于echarts的點(diǎn)流動(dòng)光效的折線圖插件。
可以在react中調(diào)用使用。

點(diǎn)子

我就突發(fā)奇想，想用這個(gè)帶流動(dòng)光效的折線圖來(lái)展示日k線。

發(fā)掘

說(shuō)干就干，我開(kāi)始研究echarts和react。

期間，學(xué)習(xí)react內(nèi)容遇到了難關(guān)。

并且，插件的用法也沒(méi)有弄懂。

沒(méi)有一絲進(jìn)展。

難題

我停下腳步思考。將這個(gè)插件跑起來(lái)需要什么樣的能力？

是不是react只需要入門(mén)成都就可以嗎？

思考了一下，我衡量了一下，自己練react都入門(mén)，想著問(wèn)題不如先耐下性子先去過(guò)一遍react入門(mén)教程。理解一個(gè)react app是如何運(yùn)行的。
所以我就照著react入門(mén)教程走了下去。
走到一半，我一知半解認(rèn)為可以再嘗試一下。
就按照自己的思路配置。
遇到了諸如以下問(wèn)題。

lowline-for-echarts 在使用中遇到的問(wèn)題

1. react 和 react-dome需要降版本

輸入命令：

• 查看最新版本

輸入命令：

• 后續(xù)升級(jí)最新版本

輸入命令：

2. @testing-library/react 需要降版本

輸入命令：

3. react版本低于18.x會(huì)報(bào)錯(cuò)

錯(cuò)誤信息：

經(jīng)查詢發(fā)現(xiàn)是因?yàn)閞eact降版本，前后兩個(gè)版本語(yǔ)法有差別。

解決方法

• 修改申明方式

由

改為

• 渲染路由

從

改為

最后

輸入命令：

完美渲染效果圖

總結(jié)

歷時(shí)三天將這個(gè)插件跑起來(lái)了。接下來(lái)我將把自己的點(diǎn)子運(yùn)用這個(gè)插件實(shí)現(xiàn)出來(lái)。