大屏制作-echarts的引用,useref的使用

最新推荐文章于 2024-01-17 06:30:00 发布

小贤编程手记

最新推荐文章于 2024-01-17 06:30:00 发布

阅读量517

点赞数

文章标签： echarts javascript 前端

原文链接：https://juejin.cn/post/7099374408657010701

版权

本文介绍了如何在React中使用useRef绑定div元素，并利用其current属性与Echarts协作创建图表。重点讲解了useRef的基本概念，以及如何获取DOM元素并进行控制，最后展示了结合Echarts的具体实例。

摘要由CSDN通过智能技术生成

useRef绑定到一个div上

先准备好一个div

 <div  ref={divRef} className="chart">  </div>
复制代码

这个div上面绑定了ref元素,传给ref的是一个对象{divRef}；
{divRef}是一个什么东西；
divRef是一个useRef(), useRef()是用来获取DOM元素的，所以divRef也是来获取div这个DOM 元素的；
因为divRef是放在 <div className="chart"> </div>DOm元素里的，所以useRef获取的就是这个元素；

const divRef = useRef(null);
<div ref={divRef} className="chart">  </div>
复制代码

divRef打印出来是一个对象，里面只有一个属性current；
divRef.current的值就是绑定的<div ref={divRef} className="chart"> </div>这个dom元素；

echarts 在这个div上面进行图表的操作

接下来就是echarts的用法了

//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
复制代码

在我们的实例中，

var myChart = echarts.init(divRef.current);
复制代码

接着就可以在这个div里面添加一些图表了，下面就是echarts的用法了。

安装引入echarts

先在package.json查看，是否已安装echarts；
如果安装了，则直接在需要echarts的文档里引入

import * as echarts from 'echarts';
复制代码

什么是useRef

使用useRef的时候，首先引入

import {useRef} from 'react'
复制代码

useref返回一个可变的ref对象，其.current属性被初始化为传入的参数（initalValue），

返回的ref对象在组件的整个生命周期内持续存在。

使用useRef获取Dom元素

const refContainer = useRef(null)
console.log(refContainer)
复制代码

返回一个可变的ref对象，该对象只有current属性，初始值传入的参数为null；
可以把这个ref对象利用元素的ref属性绑定在dom元素上，示例如下：

import React,{useRf} from 'react'
import rectDom from 'react-dom
   //这里的inputE1.current就是input元素，所以可以调用原生input方法
}
 return(
 <div>
   <input type="text" ref={inputE1} />
   <button onClick={hClick}>表单获取焦点</button>
 
 </div>
 )

复制代码

小结： 通过useRef定义个inputEl变量，在input 元素上定义ref={inputEl},这样通过inputEl.current就可以获取到input Dom 元素，选中则调用下focus函数即可

绘制一个简单额图表

在绘制图表前，我们需要为Echarts准备一个定义高宽的DOM容器；

<body>
<div id="main" style="width:600px;height:400px;"></div>
</body>
复制代码

然后就可以通过echarts.init方法初始化一个echarts实例并通过setoption 方法生成一个简单的柱状图，下面是完整代码：

复制代码

useRef 的功效

useRef获取Dom元素和保存变量
- 它有两个主要的作用：
  - 1.用useRef获取DOM元素，获取后就可以控制DOM的任何东西了；
  - 2.用useRef来保存变量。
useRef获取DOM元素，

小贤编程手记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫