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
相关推荐
Red Red23 分钟前
网安基础知识|IDS入侵检测系统|IPS入侵防御系统|堡垒机|VPN|EDR|CC防御|云安全-VDC/VPC|安全服务
网络·笔记·学习·安全·web安全
Natural_yz2 小时前
大数据学习17之Spark-Core
大数据·学习·spark
qq_172805592 小时前
RUST学习教程-安装教程
开发语言·学习·rust·安装
一只小小汤圆2 小时前
opencascade源码学习之BRepOffsetAPI包 -BRepOffsetAPI_DraftAngle
c++·学习·opencascade
虾球xz2 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
LateBloomer7773 小时前
FreeRTOS——信号量
笔记·stm32·学习·freertos
legend_jz3 小时前
【Linux】线程控制
linux·服务器·开发语言·c++·笔记·学习·学习方法
Komorebi.py3 小时前
【Linux】-学习笔记04
linux·笔记·学习
weiabc3 小时前
学习electron
javascript·学习·electron
HackKong4 小时前
小白怎样入门网络安全?
网络·学习·安全·web安全·网络安全·黑客