当前位置: 首页 > news >正文

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.lryc.cn/news/424454.html

相关文章:

  • 链表算法题一
  • Unity(2022.3.38LTS) - 基础概念
  • 无人机之飞手必看篇
  • 数据结构(11)——二叉搜索树
  • 如何使用和配置 AWS CLI 环境变量?
  • 七、流程控制
  • 【通过python启动指定的文件】
  • 区块链开源的项目有哪些?
  • 3152. 特殊数组 II(24.8.14)
  • Android 全系统版本文件读写最佳适配,CV 即用(适配到 Android 14)
  • 【日记】朋友和他女朋友领证了(368 字)
  • 行业大模型:信用评分大模型、生产优化大模型、库存管理大模型、物流行业大模型、零售行业大模型
  • VSCode 搭配 Windows 下各种 C/C++ 编译器使用
  • 【JavaEE】线程池和定时器
  • 《Unity3D网络游戏实战》通用服务器框架
  • LeetCode404 左叶子之和
  • nodejs操作redis的工具类
  • 关于wsl2与win11互联互通的问题
  • C++ 类型转换
  • 2024挖漏洞给报酬的网站汇总,兼职副业3天收益2k
  • 0到1学习Google广告(2):掌握展示位置及排名规则丨出海笔记
  • MySQL数据库读超时/SELECT查询超时 杂记
  • docker数据卷:
  • 【linux】linux中如何通过systemctl来创建和管理服务
  • WPF-实现多语言的静态(需重启)与动态切换(不用重启)
  • UE5学习笔记12-为角色添加蹲下的动作
  • 【笔记】Android 多用户模式和用户类型
  • SQL基础——MySQL的索引
  • 【开发语言】面向对象和面向过程开发思路的区别
  • 谷歌账号登录的时候提示被停用,原因是什么,账号还有救吗?该如何处理?