您好,登錄后才能下訂單哦!
今天小編給大家分享一下React項(xiàng)目搭建與Echars工具使用的方法是什么的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
npx create-react-app react_echarts_demo
cd react_echarts_demo
npm start
終端對(duì)應(yīng)目錄下輸入 code . 打開 vs code
npm install echarts --save
npm install --save echarts-for-react
使用 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> <h2> 簡(jiǎn)單折線圖</h2> <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> ) } }
代碼如下:
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> <h2>燃盡圖</h2> <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' }} /> ) } }
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項(xiàng)目搭建與Echars工具使用的方法是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。