起源
在技术群看到有人问这个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
完美渲染效果图
总结
历时三天将这个插件跑起来了。接下来我将把自己的点子运用这个插件实现出来。
原文地址：http://www.cnblogs.com/futurelifekin/p/16921539.html
