React多个echarts图表在一个页面的使用

前景

  • 很多情况下图标都是一个,我们大概率会像下面代码一样的做法

    • 大概流程就是获取到数据后执行初始化,因为先初始化后异步请求再设置state里面的数据回导致无法正常显示echarts(除非再次调用setOption)
    • 下面就记录下自己解决过程
    • 源码
      • https://github.com/superBiuBiuMan/react-class-test

根据ID获取DOM进行初始化

import React, { Component } from 'react';
import * as echarts from 'echarts';
import axios from 'axios';class TestEcharts extends Component {constructor(props) {super(props);this.state = {testData: '测试数据',list1: [],};}componentDidMount() {this.initEchartsData();}// 请求并初始化echarts数据initEchartsData() {axios.get('https://api.oick.cn/api/lishi').then((res) => {console.log(res);//处理数据this.setState({list1: res.data.result.map((item) => Math.round(Math.random() * 100)),},);// 初始化echartsconst myChart = echarts.init(document.getElementById('myChart'));myChart.setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data: this.state.list1,type: 'line',},],});});}render() {return (<div><div id="myChart" style={{ width: '400px', height: '400px' }}></div><div>{this.state.testData}</div></div>);}
}export default TestEcharts;

根据ref获取DOM进行初始化

import React, { Component,createRef  } from 'react';
import * as echarts from 'echarts';
import axios from 'axios';class TestEcharts extends Component {constructor(props) {super(props);this.state = {testData: '测试数据',list1: [],};this.echart1 = createRef();}componentDidMount() {this.initEchartsData();}// 请求并初始化echarts数据initEchartsData() {axios.get('https://api.oick.cn/api/lishi').then((res) => {console.log(res);//处理数据this.setState({list1: res.data.result.map((item) => Math.round(Math.random() * 100)),},);// 初始化echarts// const myChart = echarts.init(document.getElementById('myChart'));console.log(this.echart1.current);const myChart = echarts.init(this.echart1.current);myChart.setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data: this.state.list1,type: 'line',},],});});}render() {return (<div>{/* id="myChart" */}<div ref={this.echart1} style={{ width: '400px', height: '400px' }}></div><div>{this.state.testData}</div></div>);}
}export default TestEcharts;

如果有1个页面有多个echart图标怎么解决呢?

方式1-一个图表就是一个组件

数据获取到后再setOption

  • 主index.jsx
import React, { Component } from 'react'
import ShowData from "./component/showData/index";
export default class index extends Component {render() {return (<div><div>显示多个图表</div><div style={{ display:'flex' }}><ShowData/><ShowData/><ShowData/><ShowData/></div></div>)}
}
  • 图表ShowData.jsx
import React, { Component, createRef } from 'react';
import * as echarts from 'echarts';
import axios from 'axios';
export default class index extends Component {constructor(props) {super(props);this.state = {data: [],};this.echartDOM = createRef();}// 请求数据initData() {axios.get('https://api.oick.cn/api/lishi').then((res) => {console.log(res);//处理数据this.setState({data: res.data.result.map((item) => Math.round(Math.random() * 100)),},() => {this.initEchartsData();});});}//初始化echart图表initEchartsData(){const myChart = echarts.init(this.echartDOM.current);myChart.setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data: this.state.data,type: 'line',},],});}componentDidMount() {this.initData(); //初始化数据}render() {return (<divref={this.echartDOM}style={{ width: '400px', height: '400px' }}></div>);}
}

先setOption后再更新

  • 通过createRef获取DOM再保存echarts实例方式
  • 主index.jsx
import React, { Component } from 'react'
import ShowData from "./component/showData/index";
import ShowData2 from "./component/showData/index2";
export default class index extends Component {render() {return (<div><div>显示多个图表</div><div style={{ display:'flex' }}><ShowData2/><ShowData2/><ShowData2/><ShowData2/></div></div>)}
}
  • 图表ShowData2.jsx
import React, { Component, createRef } from 'react';
import * as echarts from 'echarts';
import axios from 'axios';
export default class index extends Component {constructor(props) {super(props);this.state = {data: [],myEchart: '',};this.echartDOM = createRef();}// 请求数据initData() {axios.get('https://api.oick.cn/api/lishi').then((res) => {console.log(res);//处理数据this.setState({data: res.data.result.map((item) => Math.round(Math.random() * 100)),},() => {this.state.myEchart.setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data: this.state.data,type: 'line',},],});});});}//初始化echart图表initEchartsData(){const myEchart = echarts.init(this.echartDOM.current);this.setState({myEchart,})myEchart.setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data: this.state.data,type: 'line',},],});}componentDidMount() {this.initData(); //初始化数据this.initEchartsData();//初始化数据}render() {return (<divref={this.echartDOM}style={{ width: '400px', height: '400px' }}></div>);}
}

方式2-都写在一个jsx\tsx文件中

  • 比较难的地方在于怎么获取到这么多个的DOM再进行统一的初始化,并且还可能后续不同操作需要更新不同的DOM
  • 这里只是数组简单的存储,你也可以通过Map来进行存储

  • 点击更新

  • 主index.jsx
import React, { Component } from 'react'
import ShowData from "./component/showData/index";
import ShowData2 from "./component/showData/index2";
import ShowData3 from "./component/showData/index3";
export default class index extends Component {render() {return (<div><div>显示多个图表</div>{/* 方式1 */}<h1>方式1</h1><div style={{ display:'flex' }}>{/* <ShowData2/><ShowData2/><ShowData2/><ShowData2/> */}</div>{/* 方式2 */}<h1>方式2</h1><div ><ShowData3/></div></div>)}
}
  • 图表ShowData.jsx
import React, { Component, createRef } from 'react';
import * as echarts from 'echarts';
import axios from 'axios';
export default class index3 extends Component {constructor(props) {super(props);this.state = {myEchartList: [], //实例化echart列表data1: [],data2: [],data3: [],data4: [],};this.allRef = []; //存储所有的ref}componentDidMount() {this.setState({//实例化echartmyEchartList: this.allRef.map((item) => echarts.init(item)),});//获取数据Athis.initDataA();//获取数据Bthis.initDataB();}initDataA = () => {axios.get('https://api.oick.cn/api/lishi').then((res) => {console.log(res,'来自initDataA');let data1 = res.data.result.map(() => Math.round(Math.random() * 100));let data2 = res.data.result.map(() => Math.round(Math.random() * 100));//处理数据this.setState({data1,data2,});this.state.myEchartList[0].setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data:data1,type: 'line',},],});this.state.myEchartList[1].setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data:data2,type: 'line',},],});});};initDataB = () => {axios.get('https://api.oick.cn/api/lishi').then((res) => {console.log(res,'来自initDataB');let data3 = res.data.result.map(() => Math.round(Math.random() * 100));let data4 = res.data.result.map(() => Math.round(Math.random() * 100));//处理数据this.setState({data3,data4,});this.state.myEchartList[2].setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data:data3,type: 'line',},],});this.state.myEchartList[3].setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{data:data4,type: 'line',},],});});};handleUpdate = () => {this.initDataA();};render() {return (<><button onClick={this.handleUpdate}>点击我更新2个图表数据</button><divstyle={{ display: 'flex' }}><divref={(node) => {this.allRef.push(node);}}style={{ width: '401px', height: '400px' }}></div><divref={(node) => {this.allRef.push(node);}}style={{ width: '402px', height: '400px' }}></div><divref={(node) => {this.allRef.push(node);}}style={{ width: '403px', height: '400px' }}></div><divref={(node) => {this.allRef.push(node);}}style={{ width: '404px', height: '400px' }}></div></div></>);}
}

总结

  • 可以了解下setOption的其他用法https://www.jb51.net/article/269766.htm

  • 也可以使用在react中

    • echarts-for-react: https://www.npmjs.com/package/echarts-for-react

  • 参考文章

    • https://blog.csdn.net/A15029296293/article/details/130500081

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/505486.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

VMware安装Centos7详细过程

VMware安装Centos7详细过程

1.硬件软件准备 软件&#xff1a;VMware16 硬件&#xff1a;因为是在宿主机上运行虚拟化软件安装centos&#xff0c;所以对宿主机的配置有一定的要求。最起码I5CPU双核、硬盘500G、内存4G以上。 镜像&#xff1a;centos7,镜像下载地址centos安装包下载_开源镜像站-阿里云 2…
阅读更多...
递归回溯剪枝-括号生成

递归回溯剪枝-括号生成

LCR 085. 括号生成 - 力扣&#xff08;LeetCode&#xff09; 一. 根据题意&#xff0c;分析出符合要求的括号组合需要满足以下两个条件&#xff1a; 1. 左括号数或者右括号数都不能超过 n&#xff1b; 2. 从最左侧开始的每一个子集&#xff0c;不可以出现右括号数大于左括号数&…
阅读更多...
使用python实现一个SCP小工具

使用python实现一个SCP小工具

源码地址&#xff1a; ssh_scp 工具截图&#xff1a; 一个简易的scp文件上传下载小工具&#xff0c;用来上传或下载一些小文件。 目前只适用于windows&#xff0c; 使用方法&#xff1a; 前提&#xff1a; 工具同级目录&#xff0c;创建一个ssh_commands.json文件。用来存储配…
阅读更多...
pikachu验证XXE漏洞

pikachu验证XXE漏洞

先随便输入一个内容查看 服务器有回显 接下来用bp抓包看下参数 有个xml参数&#xff0c;而且Content-Type: application/x-www-form-urlencoded&#xff0c;我们传入url编码后的xml内容试一下 <?xml version"1.0" encoding"UTF-8"?> <!DOCTYP…
阅读更多...
广搜（BFS）

广搜（BFS）

在我们日常刷题的过程中&#xff0c;我们会通过遍历来获取自己想要的数组&#xff0c;搜索算法就是典型的一种。 而搜索算法中也分深搜&#xff08;DFS&#xff09;&#xff0c;广搜&#xff08;BFS&#xff09;,而今天&#xff0c;我们来说说广搜。 什么是广搜 广搜全称叫广…
阅读更多...
Stwo：基于Circle STARK和M31的下一代STARK证明系统

Stwo：基于Circle STARK和M31的下一代STARK证明系统

1. 引言 StarkWare团队和Polygon Labs团队&#xff0c;历时数月&#xff0c;构造了基于Mersenne素数域M31的Circle STARK协议&#xff0c;通过使用M31 over a circle&#xff0c;可基于任意有限域构造高效STARKs&#xff0c;具体见2024年2月19日论文《Circle STARKs》。 基于…
阅读更多...
ES6 | （二）ES6 新特性（下） | 尚硅谷Web前端ES6教程

ES6 | （二）ES6 新特性（下） | 尚硅谷Web前端ES6教程

文章目录 &#x1f4da;迭代器&#x1f407;定义&#x1f407;工作原理&#x1f407;自定义遍历数据 &#x1f4da;生成器函数&#x1f407;声明和调用&#x1f407;生成器函数的参数传递&#x1f407;生成器函数案例 &#x1f4da;Promise&#x1f4da;Set&#x1f407;Set的定…
阅读更多...
Carla自动驾驶仿真九：车辆变道路径规划

Carla自动驾驶仿真九：车辆变道路径规划

文章目录 前言一、关键函数二、完整代码效果 前言 本文介绍一种在carla中比较简单的变道路径规划方法&#xff0c;主要核心是调用carla的GlobalRoutePlanner模块和PID控制模块实现变道&#xff0c;大体的框架如下图所示。 一、关键函数 1、get_spawn_point(),该函数根据指定r…
阅读更多...
Docker容器资源限制与优化全攻略：CPU、内存、磁盘IO一网打尽

Docker容器资源限制与优化全攻略：CPU、内存、磁盘IO一网打尽

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Docker入门到精通》 《k8s入门到实战》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、docker容器技术概述 2、资源限制与优化的重要性 …
阅读更多...
C++设计模式_创建型模式_工厂方法模式

C++设计模式_创建型模式_工厂方法模式

目录 C设计模式_创建型模式_工厂方法模式 一、简单工厂模式 1.1 简单工厂模式引入 1.2 简单工厂模式 1.3 简单工厂模式利弊分析 1.4 简单工厂模式的UML图 二、工厂方法模式 2.1 工厂模式和简单工厂模式比较 2.2 工厂模式代码实现 2.3 工厂模式UML 三、抽象工厂模式 3.1 战斗场景…
阅读更多...
IDEA的安装教程

IDEA的安装教程

1、下载软件安装包 官网下载&#xff1a;https://www.jetbrains.com/idea/ 2、开始安装IDEA软件 解压安装包&#xff0c;找到对应的idea可执行文件&#xff0c;右键选择以管理员身份运行&#xff0c;执行安装操作 3、运行之后&#xff0c;点击NEXT&#xff0c;进入下一步 4、…
阅读更多...
RISC-V特权架构 - 特权模式与指令

RISC-V特权架构 - 特权模式与指令

RV32/64 特权架构 - 特权模式与指令 1 特权模式2 特权指令2.1 mret&#xff08;从机器模式返回到先前的模式&#xff09;2.2 sret&#xff08;从监管模式返回到先前的模式&#xff09;2.3 wfi&#xff08;等待中断&#xff09;2.4 sfence.vma&#xff08;内存屏障&#xff09; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023