文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React项目搭建与Echars工具使用详解

2023-03-20 14:53

关注

一、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使用Echars内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯