React項(xiàng)目搭建與Echarts工具使用詳解
更新時(shí)間：2023年05月09日 10:24:34 作者：愛(ài)打羽球的碼猿
這篇文章主要介紹了React項(xiàng)目搭建與Echarts工具使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、React項(xiàng)目快速搭建
1、新建文件夾
2、直接在對(duì)應(yīng)目錄輸入 cmd ，打開(kāi)終端
3、執(zhí)行指令完成React應(yīng)用建立
npx create-react-app react_echarts_demo
cd react_echarts_demo
npm start
二、React項(xiàng)目結(jié)構(gòu)和分析
終端對(duì)應(yīng)目錄下輸入 code . 打開(kāi) vs code
1、刪除多于文件，使得結(jié)構(gòu)清晰
2、刪除剩余文件中多于的引用內(nèi)容
3、使用vs code打開(kāi)終端，運(yùn)行項(xiàng)目
三、Echarts工具使用
1、npm安裝依賴
npm install echarts --save
npm install --save echarts-for-react
2、簡(jiǎn)單折線圖
使用 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> 簡(jiǎn)單折線圖</h1>
<LineCharts></LineCharts>
</div>
);組件代碼
import React, {Component} from 'react';
import ReactECharts from 'echarts-for-react';
// 在此組件中繪制一個(gè)簡(jiǎn)單的折線圖
export default class LineCharts extends Component{
// 返回折線圖的配置對(duì)象
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="進(jìn)度/%" /> )
}
}
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 = {
}
}
// 掛載完成之后，因?yàn)镽eact初始化echarts時(shí)長(zhǎng)寬可能會(huì)獲取到頂層，所以延遲200去生成，不影響視覺(jué)效果
componentDidMount() {
setTimeout(() => {
this.initEchart(this.props.data)
}, 200)
}
// 更新props以后調(diào)用
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: '<br/>進(jìn)度：{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官網(wǎng)找對(duì)應(yīng)Option內(nèi)容復(fù)制即可
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'
}
]
};到此這篇關(guān)于React項(xiàng)目搭建與Echarts工具使用的文章就介紹到這了,更多相關(guān)React使用Echarts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React中事件綁定this指向三種方法的實(shí)現(xiàn)
這篇文章主要介紹了React中事件綁定this指向三種方法的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
現(xiàn)在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開(kāi)發(fā)深深的吸引了我，下面來(lái)跟我一起領(lǐng)略ReactJs的風(fēng)采吧~~ 文章有點(diǎn)長(zhǎng)，耐心讀完，你會(huì)有很大收獲哦2021-04-04
詳解React開(kāi)發(fā)必不可少的eslint配置
本篇文章主要介紹了詳解React開(kāi)發(fā)必不可少的eslint配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了Redux的工作流程,redux是一個(gè)專門用于做狀態(tài)管理的JS庫(kù)，它可以在react、angular、vue等項(xiàng)目中，但基本與react配合使用，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了react-native封裝插件swiper的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本篇文章主要介紹了React-Native中props具體使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了詳解react關(guān)于事件綁定this的四種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
React中的Props類型校驗(yàn)和默認(rèn)值詳解
這篇文章主要為大家詳細(xì)介紹了React中的Props類型校驗(yàn)和默認(rèn)值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
使用React-Window實(shí)現(xiàn)虛擬滾動(dòng)效果的示例代碼
React-Window?是一個(gè)為?React?應(yīng)用程序中高效渲染大數(shù)據(jù)集而設(shè)計(jì)的庫(kù),它基于窗口化或虛擬化的原則運(yùn)行,本文將使用React-Window實(shí)現(xiàn)虛擬滾動(dòng)效果,感興趣的可以了解下2024-01-01
快速創(chuàng)建React項(xiàng)目并配置webpack
這篇文章主要介紹了創(chuàng)建React項(xiàng)目并配置webpack,在這里需要注意，Create?React?App?requires?Node?14?or?higher.需要安裝高版本的node，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-01-01