基于echarts的带流动光效的折线图-lowline-for-echarts使用记录

起源

在技术群看到有人问这个react插件，带着好奇心看了一下。

标题：基于echarts的带流动光效的折线图 - 掘金

网址：https://juejin.cn/post/7090566240233586719

了解到这是个基于echarts的点流动光效的折线图插件。

可以在react中调用使用。

点子

我就突发奇想，想用这个带流动光效的折线图来展示日k线。

发掘

说干就干，我开始研究echarts和react。

期间，学习react内容遇到了难关。

并且，插件的用法也没有弄懂。

没有一丝进展。

难题

我停下脚步思考。将这个插件跑起来需要什么样的能力？

是不是react只需要入门成都就可以吗？

思考了一下，我衡量了一下，自己练react都入门，想着问题不如先耐下性子先去过一遍react入门教程。理解一个react app是如何运行的。

所以我就照着react入门教程走了下去。

走到一半，我一知半解认为可以再尝试一下。

就按照自己的思路配置。

遇到了诸如以下问题。

lowline-for-echarts 在使用中遇到的问题

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

输入命令：

npm install react@17.x react-dom@17.x --save

• 查看最新版本

输入命令：

npm info react

• 后续升级最新版本

输入命令：

npm install react@18.0.0 react-dom@18.0.0 --save

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

输入命令：

npm install @testing-library/react@12.x

3. react版本低于18.x会报错

错误信息：

Module not found: Error: Can‘t resolve ‘react-dom/client‘

经查询发现是因为react降版本，前后两个版本语法有差别。

解决方法

• 修改申明方式

由

import ReactDOM from 'react-dom/client';

改为

import ReactDOM from 'react-dom';

• 渲染路由

从

 const root = ReactDOM.createRoot(document.getElementById("root"));

 root.render(<App />);

改为

ReactDOM.render(

  <App />, document.getElementById('root')

);

最后

输入命令：

npm start

完美渲染效果图

总结

历时三天将这个插件跑起来了。接下来我将把自己的点子运用这个插件实现出来。