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

实现的代码如下:

javascript 复制代码
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
相关推荐
@小博的博客25 分钟前
C++初阶学习第十弹——深入讲解vector的迭代器失效
数据结构·c++·学习
南宫生1 小时前
贪心算法习题其四【力扣】【算法学习day.21】
学习·算法·leetcode·链表·贪心算法
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
懒惰才能让科技进步2 小时前
从零学习大模型(十二)-----基于梯度的重要性剪枝(Gradient-based Pruning)
人工智能·深度学习·学习·算法·chatgpt·transformer·剪枝
love_and_hope2 小时前
Pytorch学习--神经网络--搭建小实战(手撕CIFAR 10 model structure)和 Sequential 的使用
人工智能·pytorch·python·深度学习·学习
Chef_Chen2 小时前
从0开始学习机器学习--Day14--如何优化神经网络的代价函数
神经网络·学习·机器学习
芊寻(嵌入式)2 小时前
C转C++学习笔记--基础知识摘录总结
开发语言·c++·笔记·学习
hong1616883 小时前
跨模态对齐与跨领域学习
学习
阿伟来咯~4 小时前
记录学习react的一些内容
javascript·学习·react.js