React項目搭建與Echarts工具使用詳解
更新時間：2023年05月09日 10:24:34 作者：愛打羽球的碼猿
這篇文章主要介紹了React項目搭建與Echarts工具使用詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
一、React項目快速搭建
1、新建文件夾
2、直接在對應目錄輸入 cmd ，打開終端
3、執(zhí)行指令完成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: '<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官網(wǎng)找對應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項目搭建與Echarts工具使用的文章就介紹到這了,更多相關React使用Echarts內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了React?setState是異步還是同步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
本文主要介紹了React中使用axios發(fā)送請求的幾種常用方法，主要介紹了get和post請求，具有一定的參考價值，感興趣的可以了解一下2021-08-08
這篇文章主要為大家詳細介紹了react實現(xiàn)無限循環(huán)滾動信息，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
最近,React 服務器組件受到了廣泛的關注和熱捧,這是因為 React 服務器組件允許開發(fā)人員將與組件相關的任務外包給服務器,在本文中,我們將討論什么是 React 服務器組件,以及如何將它們集成到構建應用程序中,需要的朋友可以參考下2023-10-10
在一些react項目開發(fā)中,常常會出現(xiàn)一些組合的情況出現(xiàn),這篇文章主要為大家介紹了復合組件的具體實現(xiàn),感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
這篇文章主要為大家介紹了JS跨域解決方案react配置反向代理的示例內容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-11-11
React將組件（component）看成一個狀態(tài)機（State Machines），通過其內部自定義的狀態(tài)（State）和生命周期（Lifecycle）實現(xiàn)并與用戶交互，維持組件的不同狀態(tài)2022-11-11
React-Router(V6)的權限控制實現(xiàn)示例
本文主要介紹了React-Router(V6)的權限控制實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
使用react實現(xiàn)手機號的數(shù)據(jù)同步顯示功能的示例代碼
本篇文章主要介紹了使用react實現(xiàn)手機號的數(shù)據(jù)同步顯示功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你對這些問題還不是很明白，那么可以在這篇文章中找到答案2022-12-12