React 学习——react项目中加入echarts图

实现的代码如下:

import * as echarts from 'echarts'
import { useEffect, useRef } from 'react';
const Home = ()=>{const chartRef = useRef(null);useEffect(()=>{// const chartDom = document.getElementById('main');//使用id获取节点const chartDom = chartRef.current;//使用useRef获取节点const myChart = echarts.init(chartDom);const option = {xAxis: {type: 'category',data: ['vue', 'react', 'angular']},yAxis: {type: 'value'},series: [{data: [100, 150, 50],type: 'bar'}]};option && myChart.setOption(option);},[])return (<div> <div id='main' ref={chartRef} style={{width:'500px',height:'400px'}}></div></div>)
}export default Home

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/400921.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【区块链+乡村振兴】“蜜链盟”乡村振兴基层治理数字化平台 | FISCO BCOS应用案例

在国家战略政策推动和新一代信息化发展应用的合力之下&#xff0c;数字乡村是互联网化、信息化和数字化在农业农村经 济社会发展中的表现。为进一步加强乡村基层治理&#xff0c;根据《中共海南省委农村工作领导小组办公室海南省农业农 村厅关于在我省乡村治理中推广运用积分制…

用exceljs和file-saver插件实现纯前端表格导出Excel(支持样式配置,多级表头)

exceljs在Jquery&#xff08;HTML&#xff09;和vue项目中实现导出功能 前言Jquery&#xff08;HTML&#xff09;中实现导出第一步&#xff0c;先在项目本地中导入exceljs和file-saver包第二步&#xff0c;封装导出Excel方法&#xff08;可直接复制粘贴使用&#xff09;第三步&…

Java 实现 B树(通俗易懂)

目录 一.概念 二.节点定义 三.插入操作 1.查找位置 2.插入 3.分裂 四.B树和B*树 1.B树 2.B*树 一.概念 B树是一颗多叉平衡树&#xff0c;空树也是多叉平衡树。 一颗M阶的B树要满足以下条件&#xff1a; 1.根节点至少有两个孩子&#xff1b; 2.每个非根节点至少有(上…

机械学习—零基础学习日志(如何理解线性代数2)

零基础为了学人工智能&#xff0c;正在快乐学习&#xff0c;每天都长脑子 引言 在平面中&#xff0c;直线的定义可以理解为&#xff0c;任意缩放同一个平面向量得到所有点的集合。 所以要得到一个三维空间中的直线&#xff0c;只需要将这个向量改成三维向量即可。 什么是线…

uniapp加载第三方字体方案对比(附原生微信小程序方案)

文章目录 官方文档uniapp文档微信小程序文档 下载字体包引入方案限制微信小程序限制uniapp的限制 方案对比方案1&#xff1a;CSS本地加载方案2&#xff1a;CSS远程加载方案3&#xff1a;转换为base64&#xff0c;然后通过css引入方案4&#xff1a;使用uni.loadFontFace() 页面使…

(Jmeter、Fiddler)脚本转换Loadrunner脚本

背景&#xff1a;公司政治任务、各种体系文档要留档&#xff0c;但有些不在体系内的工具生成的脚本需要转化到体系内以备留档。 一、Loadrunner代理设置 开始录制配置&#xff1a; Record->Remote Application via LoadRunner Proxy LoadRrunner Proxy listens on port-…

米联客-FPGA程序设计Verilog语法入门篇连载-19 Verilog语法_低功耗设计

软件版本&#xff1a;无 操作系统&#xff1a;WIN10 64bit 硬件平台&#xff1a;适用所有系列FPGA 板卡获取平台&#xff1a;https://milianke.tmall.com/ 登录“米联客”FPGA社区 http://www.uisrc.com 视频课程、答疑解惑&#xff01; 1概述 本小节讲解Verilog语法的低功…

Spark MLlib 特征工程(下)

Spark MLlib 特征工程(下) 前面我们提到&#xff0c;典型的特征工程包含如下几个环节&#xff0c;即预处理、特征选择、归一化、离散化、Embedding 和向量计算&#xff0c;如下图所示。 在上一讲&#xff0c;我们着重讲解了其中的前 3 个环节&#xff0c;也就是预处理、特征选…

java---概念

一.配置环境&#xff08;三个变量&#xff09; 1.JAVA_HOME&#xff08;记录Java安装文件的路径&#xff09; 2.PATH&#xff08;系统直找的路径&#xff09; 3.CLASSPATH&#xff08;Java程序路径&#xff09; .;%JAVA_HOME%\lib 二.第一个Java程序 源代码&#xff1a; so…

使用kimi快速完成论文仿写的提示词,我帮你总结好了

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 在完成论文写作时&#xff0c;很多人都会想到“仿写”&#xff0c;但正确的做法是借鉴而非复制。今天我们将分享如何利用Kimi智能助手来提高论文写作的效率和质量&#xff0c;同时确保原…

Kubernetes快速入门

一、容器集群管理概述 1.1背景概述 容器技术的诞生虽解决了应用打包和发布的难题&#xff0c;但单一的容器技术工具并无 法支持起生产级大规模容器部署的场景。针对这一场景&#xff0c;容器管理与编排成为了容器技术发展的关键。Kubernetes 便是在这样的大背景下诞生的。 1.2…

【博客23】缤果Android_XXX调试助手模板(3款)V1.0(中级篇)

超级好用的Android_XXX调试助手模板 ( Android Studio Java) 备注: 仅模板无通信协议 开发工具: android-studio-2024.1.1.12-windows.exe 目录 一、软件概要&#xff1a; 二、软件界面&#xff1a; 1.App演示 2.其他扩展展示 2.1 自定义指令集 2.2 修改自定义指令集 …

IAM 编程访问和 AWS CLI

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; IAM 编程访问&#xff08;欢迎来到雲闪世界。&#xff09; IAM 编程访问是指使用访问密钥通过 API 和命令行工具访问 AWS 服务和资源。 当您为 IAM 用户启用编程访问时&#xff0c;您将生成可用于验证和…

Java-自定义注解中成员变量是Class<?>

在Java中,自定义注解可以包含各种类型的成员变量,包括 Class<?> 类型。这种类型的成员变量 通常用于表示某个类的类型信息。下面我将详细介绍如何定义一个包含 Class<?> 类型成员变量的 自定义注解,并给出一些示例代码。 1. 定义自定义注解 定义一个自定义…

行业大模型:信用评分大模型、生产优化大模型、库存管理大模型、物流行业大模型、零售行业大模型

金融行业大模型&#xff1a;信用评分大模型 信用评分模型在金融行业中扮演着至关重要的角色&#xff0c;它通过对个人或企业的信用状况进行评估&#xff0c;帮助金融机构有效控制风险&#xff0c;提高业务效率。以下是信用评分模型的特点及案例介绍&#xff1a; 信用评分模型…

高阶数据结构——B树

1. 常见的搜索结构 以上结构适合用于数据量相对不是很大&#xff0c;能够一次性存放在内存中&#xff0c;进行数据查找的场景。如果数据量很大&#xff0c;比如有100G数据&#xff0c;无法一次放进内存中&#xff0c;那就只能放在磁盘上了&#xff0c;如果放在磁盘上&#xff0…

[Unity]在场景中随机生成不同位置且不重叠的物体

1.前言 最近任务需要用到Unity在场景中随机生成物体&#xff0c;且这些物体不能重叠&#xff0c;简单记录一下。 参考资料:How to ensure that spawned targets do not overlap ? 2.结果与代码 结果如下所示&#xff1a; 代码如下所示&#xff1a; using System.Collec…

Java练习模拟考试答题系统小程序源码

&#x1f31f;高效备考秘籍&#xff01;如何玩转练习模拟考试答题系统✨ &#x1f4da; 引言&#xff1a;为什么选择模拟考试&#xff1f; 嘿小伙伴们&#xff0c;是不是每次临近大考都紧张得不行&#xff1f;别怕&#xff0c;今天就来揭秘一个备考神器——练习模拟考试答题系…

React使用useRef ts 报错

最近在写自己的React项目&#xff0c;我在使用useRef钩子函数的时候发现 TS2322: Type MutableRefObject<HTMLDivElement | undefined> is not assignable to type LegacyRef<HTMLDivElement> | undefined Type MutableRefObject<HTMLDivElement | undefined&g…

C++STL初阶(10):list的简易实现(下)

在上一文中我们完成了链表的多数基本接口&#xff0c;本文主要围绕构造函数进行补充 1. 链表的拷贝 在前文中我们没有手动实现拷贝构造&#xff0c;所以使用的就是编译器自动生成的浅拷贝 先使用一下编译器自动生成的浅拷贝&#xff1a; 我们在打印li2之前给li1加入一个数据&…