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

news2024/9/22 15:37:58

实现的代码如下:

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.coloradmin.cn/o/2034421.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux系统驱动(十六)platform驱动

文章目录 一、简介&#xff08;一&#xff09;device、bus、driver模型&#xff08;二&#xff09;platform驱动原理 二、platform总线驱动的API&#xff08;一&#xff09;设备信息端&#xff08;二&#xff09;设备驱动端&#xff08;三&#xff09;驱动中获取设备信息函数&a…

【子豪兄】精讲CS231N斯坦福计算机视觉公开课学习笔记

wx 搜索 gzh 司南锤&#xff0c;回复 子豪兄231笔记 可获取笔记文件&#xff08;pdfdoc) 文章目录 学习链接:- 斯坦福大学公开课- 计算机视觉发展历史- 图像分类算法- 线性分类、损失函数与梯度下降- 神经网络与反向传播- 卷积神经网络- 可视化卷积神经网络- 训练神经网络 &…

关于WMS仓储管理系统的开发与应用

在当今这个全球化与数字化交织并进的时代&#xff0c;高效的仓储管理已经跃升为企业运营效能与市场竞争力提升的关键驱动力。仓库&#xff0c;这一供应链体系中的核心枢纽&#xff0c;其角色已远远超越了简单的货物存储功能&#xff0c;而是成为了推动货物流转效率与精准度的战…

软件测试之面试常见问题大全

软件测试之常见软件测试面试题 面试题解读&#xff0c;轻轻松松过面试&#xff0c;我以一个过来人的身份&#xff0c;写下这篇面试常见问题 1. 最常见的就是&#xff0c;为什么想进本公司&#xff0c;你了解本公司的业务吗&#xff1f; 再回答这个问题的时候是灵活的&#x…

DHCP学习笔记

1.DHCP快速配置 1.1配置接口IP R1: sysname R1 undo info-center enable interface Ethernet0/0/0 ip address 192.168.1.1 255.255.255.0 quit 1.2开启DHCP服务&#xff0c;接着在R1的e0/0/0配置DHCP Server功能 dhcp enable #全局下开启DHCP服务 interface Ethernet…

深度强化学习,模型改进

深度强化学习&#xff1a;DQN、PPO、DDPG、A3C、TD3、SAC、Rainbow、MADDPG、模仿学习&#xff0c;提供创新点&#xff0c;实验对比&#xff0c;代文章、润色 代码不收敛 菲涅尔模型 python深度学习算法模型定制

事务消息使用及方案选型思考

1. 事务消息概念与重要性 1.1 分布式系统中的事务问题 在分布式系统中&#xff0c;事务的一致性是一个核心问题。以电商登录送积分活动为例&#xff0c;用户登录成功后&#xff0c;系统需要执行两个关键操作&#xff1a;记录登录日志和发放积分。这两个操作需要保持一致性&am…

高性能的 C++ Web 开发框架 CPPCMS + WebSocket 模拟实现聊天与文件传输案例。

1. 项目结构 2. config.json {"service": {"api": "http","port": 8080,"ip": "0.0.0.0"},"http": {"script": "","static": "/static"} }3. CMakeLists.txt…

html+css+js网页设计 电商模版4个页面

htmlcssjs网页设计 电商模版4个页面 带js 网页作品代码简单&#xff0c;可使用任意HTML编辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&…

我把AI洗脑了!看了潘展乐、全红婵的采访,我才知道:远离人情世故,就是远离内耗——早读(逆天打工人爬取热门微信文章解读)

想无 引言Python 代码第一篇 洞见看了潘展乐、全红婵的采访&#xff0c;我才知道&#xff1a;远离人情世故&#xff0c;就是远离内耗第二篇 讲个鬼故事结尾 引言 昨天晚上把干货赶出来了 也就是昆虫小达人 大家可以看看 大概率能够让你心理上克服昆虫恐惧 今天没什么重点得事…

一、软件工程概述

软件工程概述 1. 软件的概念和特点2. 软件危机的产生3. 软件工程的概念和发展过程4. 软件工程知识体系与职业道德 1. 软件的概念和特点 软件定义 软件程序数据文档。 软件生存周期 问题定义&#xff1a;要解决的问题是什么&#xff1f;可行性分析&#xff1a;对于上阶段所确定…

智慧农业新篇章:实时监测与精细化管理

智慧农业&#xff0c;作为现代农业技术革命的先锋&#xff0c;正引领着一场深刻的产业变革。它通过融合物联网、大数据、人工智能等前沿科技&#xff0c;实现了对农业生产环境的实时监测与精细化管理&#xff0c;开启了农业发展的新篇章。这一转型不仅提升了农产品的质量与产量…

云仓酒庄湖南团队启航新征程:筑基新质生产力,深耕啤酒屋市场

原标题&#xff1a;云仓酒庄湖南团队启航新征程&#xff1a;筑基新质生产力&#xff0c;深耕啤酒屋市场 在当前经济转型升级的关键期&#xff0c;新质生产力的崛起正成为推动行业发展的重要引擎。云仓酒庄湖南团队积极响应市场变革&#xff0c;率先启动基础培训项目&#xff0…

基于paddlehub 未戴口罩检测算法

一、简介 以前大夏天戴着口罩别人觉得你不正常&#xff0c;现在上街不戴口罩你不正常。 本文要讲的未戴口罩算法是基于paddlehub提供的模型&#xff0c;paddlehub是百度飞浆(PaddlePaddle)下的深度学习模型开发工具。 PaddleHub旨在为开发者提供丰富的、高质量的、直接可用的…

beautifulsoup的简单使用

文章目录 beautifulsoup一. beautifulsoup的简单使用1、安装2、如何使用3、对象的种类 二、beautifulsoup的遍历文档树2.1 子节点.contents 和 .children descendants2.2 节点内容.string.text 2.3 多个内容.strings**.stripped_strings** 2.4 父节点.parent.parents 三、beaut…

AD如何在封装制作时添加禁止铺铜区域?

在PCB封装库中&#xff0c;选择“Top Layer”层执行菜单命令“放置→多边形铺铜挖空”&#xff0c; 然后画好所需要的挖空的区域即可&#xff0c;如果是设计完PCB之后才来进行铺铜挖空的&#xff0c;可以在添加完铺铜挖空之后选中器件右击点选“Update PCB With All”&#x…

PyFluent入门之旅(10)Fluent Python Console

之前的文章中都在介绍如何在Fluent外部环境使用PyFluent&#xff0c;那么是否有可能在Fluent内部使用PyFluent呢&#xff1f; 自Ansys 2023 R1开始&#xff0c;Ansys Fluent的内置控制台支持Python命令&#xff0c;这使在Fluent内部控制台使用PyFluent成为了可能。 准备工作 …

【SpringBoot】9 定时任务(Quartz)

介绍 实现方式 java定时任务调度的实现方式&#xff1a;Timer&#xff0c;ScheduledExecutor&#xff0c;Spring Scheduler&#xff0c;JCron Tab&#xff0c;Quartz 等。 Quartz Quartz是一个由Java开发的开源项目&#xff0c;它可以与J2EE、J2SE应用程序相结合也可以单独…

直播预约|8月14日,无人系统开发阶段故障注入与安全测试详解

电机失效故障硬件在环仿真 01 培训背景 卓翼飞思实验室暑期公益培训(第六期)将于8月14日&#xff0c;19:00开启&#xff01;通过【飞思实验室】视频号线上直播&#xff0c;由中南大学计算机学院特聘副教授&#xff0c;RflySim平台总研发负责人戴训华副教授主讲。 第六期培训将…

Navicat Premium15 下载与安装(免费版)以及链接SqlServer数据库

转自:https://blog.csdn.net/m0_75188141/article/details/139842565