React項(xiàng)目搭建與Echarts工具使用詳解
更新時(shí)間：2023年05月09日 10:24:34 作者：愛打羽球的碼猿
這篇文章主要介紹了React項(xiàng)目搭建與Echarts工具使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、React項(xiàng)目快速搭建
1、新建文件夾
2、直接在對(duì)應(yīng)目錄輸入 cmd ，打開終端
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 . 打開 vs code
1、刪除多于文件，使得結(jié)構(gòu)清晰
2、刪除剩余文件中多于的引用內(nèi)容
3、使用vs code打開終端，運(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去生成，不影響視覺效果
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)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- React?+?ECharts動(dòng)態(tài)折線圖完整實(shí)現(xiàn)代碼
- React19通用ECharts組件的使用示例
- 使用react+echarts實(shí)現(xiàn)變化趨勢(shì)縮略圖
- React中如何使用echarts寫出3d旋轉(zhuǎn)扇形圖
- React?echarts?組件的封裝使用案例
- React如何以Hook的方式使用Echarts
- react echarts刷新不顯示問題的解決方法
- react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式
- react使用echart繪制地圖的案例
- React-ChartJS?使用教程
相關(guān)文章
這篇文章主要為大家介紹了React?setState是異步還是同步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React中使用axios發(fā)送請(qǐng)求的幾種常用方法
本文主要介紹了React中使用axios發(fā)送請(qǐng)求的幾種常用方法，主要介紹了get和post請(qǐng)求，具有一定的參考價(jià)值，感興趣的可以了解一下2021-08-08
react實(shí)現(xiàn)無限循環(huán)滾動(dòng)信息
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)無限循環(huán)滾動(dòng)信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
最近,React 服務(wù)器組件受到了廣泛的關(guān)注和熱捧,這是因?yàn)?nbsp;React 服務(wù)器組件允許開發(fā)人員將與組件相關(guān)的任務(wù)外包給服務(wù)器,在本文中,我們將討論什么是 React 服務(wù)器組件,以及如何將它們集成到構(gòu)建應(yīng)用程序中,需要的朋友可以參考下2023-10-10
詳解react如何實(shí)現(xiàn)復(fù)合組件
在一些react項(xiàng)目開發(fā)中,常常會(huì)出現(xiàn)一些組合的情況出現(xiàn),這篇文章主要為大家介紹了復(fù)合組件的具體實(shí)現(xiàn),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
這篇文章主要為大家介紹了JS跨域解決方案react配置反向代理的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2021-11-11
React將組件（component）看成一個(gè)狀態(tài)機(jī)（State Machines），通過其內(nèi)部自定義的狀態(tài)（State）和生命周期（Lifecycle）實(shí)現(xiàn)并與用戶交互，維持組件的不同狀態(tài)2022-11-11
React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼
本篇文章主要介紹了使用react實(shí)現(xiàn)手機(jī)號(hào)的數(shù)據(jù)同步顯示功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你對(duì)這些問題還不是很明白，那么可以在這篇文章中找到答案2022-12-12