React项目搭建与Echars工具使用
React项目搭建与Echars工具使用
- 一、React项目快速搭建
- 1、新建文件夹
- 2、直接在对应目录输入 cmd ,打开终端
- 3、执行指令完成React应用建立
- 二、React项目结构和分析
- 1、删除多于文件,使得结构清晰
- 2、删除剩余文件中多于的引用内容
- 3、使用vs code打开终端,运行项目
- 三、Echarts工具使用
- 1、npm安装依赖
- 2、简单折线图 使用 echarts-for-react
- 3、燃尽图 使用echarts
- 4、不同的图形,Echarts官网找对应Option内容复制即可
一、React项目快速搭建
1、新建文件夹
2、直接在对应目录输入 cmd ,打开终端
3、执行指令完成React应用建立
npx create-react-app react_echarts_demo
cd react_echarts_demo
npm start
二、React项目结构和分析
- 终端对应目录下输入 code . 打开 vs code
1、删除多于文件,使得结构清晰
2、删除剩余文件中多于的引用内容
3、使用vs code打开终端,运行项目
三、Echarts工具使用
1、npm安装依赖
npm install echarts --save
npm install --save echarts-for-react
2、简单折线图 使用 echarts-for-react
- 引用代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import LineCharts from './LineCharts';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<div> <h1> 简单折线图</h1><LineCharts></LineCharts></div>
);
- 组件代码
import React, {Component} from 'react';
import ReactECharts from 'echarts-for-react';// 在此组件中绘制一个简单的折线图
export default class LineCharts extends Component{// 返回折线图的配置对象option = {xAxis: {type: 'category',data: ['A', 'B', 'C']},yAxis: {type: 'value'},series: [{data: [120, 200, 150],type: 'line'}]};render() {return(<div><ReactECharts option={this.option} /></div>)}
}
3、燃尽图 使用echarts
- 代码如下:
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import LineEChartsDemo from './LineEchartsDemo';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<div> <h1>燃尽图</h1><LineEChartsDemo></LineEChartsDemo></div>
);
LineEchartsDemo.jsx
import React, { Component } from 'react'
import LineECharts from './LineECharts'class LineEchartsDemo extends Component{constructor(props) {super(props)this.state = {data: {x: ['2023-03-18', '2023-03-19', '2023-03-20', '2023-03-22', '2023-03-23', '2023-03-24', '2023-03-25'],y: [100, 93, 80, 70, 53, 36, 0]}}}componentDidMount() { }render() {return (<LineECharts data={this.state.data} yname="进度/%" /> )}
}export default LineEchartsDemo
LineECharts.jsx
import React, {Component} from 'react';import * as echarts from 'echarts';export default class LineECharts extends Component{constructor(props) {super(props)this.state = {}}// 挂载完成之后,因为React初始化echarts时长宽可能会获取到顶层,所以延迟200去生成,不影响视觉效果componentDidMount() {setTimeout(() => {this.initEchart(this.props.data)}, 200)}// 更新props以后调用componentWillReceiveProps(newProps) {this.initEchart(newProps.data)}initEchart = (data) => {let myEcharts = echarts.init(this.echartsBox)let option = {title: {text: this.props.title || '',left: 'center',top: '0'},tooltip: {show: true,trigger: 'axis',formatter: '{b}<br/>进度:{c}%',extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'},xAxis: {type: 'category',data: data.x, },yAxis: {name: this.props.yname,nameGap: 15,position: 'left',axisLabel: {formatter: '{value}'}},series: [{name: '汇总',type: 'line',data: data.y,smooth: false,lineStyle: {color: '#00CC99',width: 2},}]}myEcharts.setOption(option)myEcharts.on('finished', () => {myEcharts.resize()})}render() {return (<div ref={(c) => { this.echartsBox = c }} style={{ width: '500px', height: '500px' }} />)}
}
4、不同的图形,Echarts官网找对应Option内容复制即可
option = {xAxis: {data: ['A', 'B', 'C', 'D', 'E']},yAxis: {},series: [{data: [10, 22, 28, 43, 49],type: 'line',stack: 'x'},{data: [5, 4, 3, 5, 10],type: 'line',stack: 'x'}]
};
React项目搭建与Echars工具使用相关推荐
- react项目搭建(基础学习笔记)
react项目搭建(基础学习) 安装 局部安装 1.npm init -y或yarn init -y初始化项目 2.全局安装creact-react-app.使用npm install -D crea ...
- react项目搭建,步骤最全,附源码git地址(react+router+typescript+redux+axios+antdesign+mock+eslint)
企业级react项目搭建流程,基于官网推荐脚手架create-react-app搭建的项目基本框架,在该基础上增加项目所需要的功能插件等.代码git地址base分支:https://github.co ...
- react项目搭建--相对较全面
前言:简单记录一下第一次搭建react项目框架,之前只是在已搭建好的框架内去开发实现项目,没有自己动手搭建过,亲自动手实际操作,还遇到挺多问题的.参考了不少文献,帮助我解决并完成整个项目搭建的文献,都 ...
- 搭建react项目 搭建ts react项目 使用vite搭建react项目
创建react 项目 注意: 网上有一些生成react 的方法,但是也有一些是过时的. 使用官方脚手架creact-react-app 全局安装 creact-react-app 这个脚手架 这个脚手 ...
- React 项目搭建与部署,搭建Node服务器
环境配置与项目搭建 安装node,官网 直接下载 安装webpack : npm install -g webpack 安装淘宝镜像(可选): npm install -g cnpm --regist ...
- react 项目搭建
创建一个React项目 默认电脑已经安装了npm和nodejs node 版本要至少8.0以上的 使用create-react-app脚手架构建react应用程序 create-react-app是 ...
- React项目搭建及环境配置
React 脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的.用于快速构建开发环境的脚手架工具 create-react ...
- react项目搭建教程
搭建步骤 安装环境 参考 菜鸟教程[https://www.runoob.com/nodejs/nodejs-tutorial.html] 安装所需要的node环境 创建项目 环境安装好之后我们进行项 ...
- react打包服务器文件,react项目搭建及打包发布
一.创建项目 1.npm install -g create-react-app: 2.create-react-app my-app(my-app为项目名字): 这样一个react项目就初始化好了, ...
最新文章
- 为什么数组是从0开始的
- LeetCode 1144. 递减元素使数组呈锯齿状(奇偶分别遍历)
- Oracle EBS:追踪PO全过程
- Java Redis 做分布式锁
- BCB屏幕截图(抓图)程序-转
- 锐起无盘4.2服务器设置,锐起无盘4.5免费版
- win7的桌面计算机被误删,win7电脑桌面便签内容被误删怎么办?该如何恢复?
- 如何使用摸瓜快速查手机apk加壳
- 1.按钮点击的四种方式
- 黑马2021最新版 SpringCloud基础篇全技术栈导学(RabbitMQ+Docker+Redis+搜索+分布式)
- 机架服务器怎么安装系统,华三服务器安装系统步骤(图解华三服务器怎么安装)...
- Apache APISIX 社区成员助力 openEuler 发布第一个社区创新版
- 安全知识云服务器ip端口网络 socket 编程 端口 大全
- poj 1036 Gangsters
- 大数据之路—— 事实表设计
- 用openssl签发证书
- 美国马萨诸塞州修订法律,称旨在保护消费者免受数据泄露侵害
- 概率图模型学习笔记:HMM、MEMM、CRF
- 手把手教你制作Android 在线图片浏览器demo
- testbench文件显示波形_各种仿真波形文件
热门文章
- PDA(windows moble )与 服务器 通信
- 游戏原画设计需要那些基础知识
- BlockChain区块链+IoT物联网的技术结合
- 辉芒FT62F13X触摸仿真步骤
- 普通人应知的18条理财常识有哪些?无妨来看看吧。
- Delphi D10.1 移动开发中APP界面基本布局(一)
- python入门基础(完整)
- 淘品牌“出淘”上市:韩都衣舍挂牌新三板
- Daily English Dictation Number Eight
- 第7章第35节:五图排版:一张背景四张交错对齐布局 [PowerPoint精美幻灯片实战教程]