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

最新推荐文章于 2024-04-26 00:15:37 发布
最新推荐文章于 2024-04-26 00:15:37 发布
阅读量523 收藏 5
点赞数 4
文章标签： react.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014582342/article/details/136423283
版权

前景

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

    • 大概流程就是获取到数据后执行初始化,因为先初始化后异步请求再设置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)),
        },
      );
      // 初始化echarts
      const 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 (
      <div
        ref={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 (
      <div
        ref={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({
      //实例化echart
      myEchartList: this.allRef.map((item) => echarts.init(item)),
    });
    //获取数据A
    this.initDataA();
    //获取数据B
    this.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>
        <div
          style={{ display: 'flex' }}
        >
          <div
            ref={(node) => {
              this.allRef.push(node);
            }}
            style={{ width: '401px', height: '400px' }}
          ></div>
          <div
            ref={(node) => {
              this.allRef.push(node);
            }}
            style={{ width: '402px', height: '400px' }}
          ></div>
          <div
            ref={(node) => {
              this.allRef.push(node);
            }}
            style={{ width: '403px', height: '400px' }}
          ></div>
          <div
            ref={(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
未成年梦想
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
swiper中使用echarts无法渲染_如何在React项目中使用ECharts图表库
weixin_42498206的博客
01-24 599
引言在项目的开发中，对于我们前端开发人员而言，总是无法避免需要对数据进行可视化分析和设计的需求。但事实上，如果单纯的依靠Html5 Canvas想要快速地创建简洁，美观，炫酷的可视化作品难度极大且可维护性差。而现如今随着技术的迭代更新发展，已经出现很多可靠，易用，操作便捷，可交互，跨平台的一些可视化解决方案如ECharts，HighCharts,，Chart.js等。于是在本文中，我们以EChar...
React中echarts封装，包括图例、图表的点击事件、控制tooltip显隐
qq_31644543的博客
03-22 966
在react中对echarts的封装，包括图例、图表的点击事件、控制tooltip显隐
react-native 一个页面使用多个Echarts图表 图表总有1、2个不显示 但数据是请求到后才渲染的图表
hzxOnlineOk的博客
06-21 1726
如下图所示，一共使用了2个图表（1柱状图、1饼图），正常情况是这样的： 是的，2个图表都出现了，但是有时候图表只展示1个，有时候2个都不展示，如下图： 为什么会出现这种现象？ 经排查，由于我们的echarts图表是用webview展示的，并且封装成了一个组件供调用，当多个组件同时调用echarts时，它只能处理一个，于是另外一个就出现渲染不出图表的情况，我称之为“竞引” 如何解...
解决vue一个页面中复用同一个echarts组件的问题
01-19
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图： 我需要这样一个饼图，并且接下来在很多次地方要用到。 直接复制官网的代码，再改改数据，需要用的时候直接拿来用。 但是接下来出现了一个问题：如果我在同一个页面多次使用这个组件，图表将不能正常显示。分析了一下， echarts通过id获取对象 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main’)); 当封装为组件使用的时候，id固定，同一个页面多次出现相同id，所以不能正常显示。 所以想出来以下解决方
完美解决vue 中多个echarts图表自适应的问题
10-15
主要介绍了完美解决vue 中多个echarts图表自适应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
React Echarts 使用教程 - 如何在 React 中加入图表（内附数据看板实战搭建案例）
蒋川@卡拉云
05-27 1441
Ehcarts 作为数据展示的组件，应用场景丰富，所以在 React 里引入 Echarts 图表是每个前端必会技能。而 Echarts配置项多且复杂，每个配置项都会细分很多个配置小项，并且还对外暴露了一套 API，包括图表实例，事件监听等，还是有一定的上手难度。本文手把手教大家如何在 React 里使用 Echarts，并结合实际使用场景，分享我是如何处理图表自适应等具体问题。 最后来一个实战教学，教大家如何结合 ant-design React UI 框架，开发企业级的「数字币走势数据看板」，帮助大家加
vue项目-Echarts组件封装，基于一个echarts实例封装多个图表，echarts自适应
ccyolo的博客
12-27 1486
echarts大屏
ECharts在React+Antd用法及常见错误
01-08
最近项目中开始使用ECharts做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。由于初次使用，很多代码优化空间很大，希望大家能帮我提出，感恩～ 最终效果 1、实现点击折线图上...
React Native使用百度Echarts显示图表的示例代码
11-26
Echarts是百度推出的免费开源的图表组件，...安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts。 目录结构如下图所示：   基础使用 native-echarts的使用方法基本和网页端的Echarts使用方法一致。
Echarts数据可视化驾驶舱页面20款.zip
02-18
Echarts数据可视化驾驶舱页面20款,前端大数据看板，实用，代码。
React Native一个页面使用多个Echarts图表出现错误
XKFC1的博客
05-25 175
React Native使用Echarts图表本质是通过webview展示的。 react-native-echarts-pro官网 安装 npm install react-native-echarts-pro --save 或者 yarn add react-native-echarts-pro 环境要求 react-native 版本大于或等于 0.59. react-native-webview 版本大于或等于 6.9.0. 使用案例 import React from "react"; impo
React echarts封装
樊小书生
02-26 953
做大屏的时候经常会遇到 echarts 展示，下面展示在 React （^18.2.0） 中对 echarts （^5.4.0） 的简单封装。文章首发于。
React中封装echarts图表组件以及自适应窗口变化
努力的鋜
11-20 653
React中封装echarts图表组件以及自适应窗口变化，而变化
React基础知识大汇总
qq_36828822的博客
04-21 932
如果在多个组件中使用了相同的useEffect或useState逻辑，推荐将这些相同的逻辑封装到函数中，这些函数被称为自定义的Hooks。下面举例3个自定义的Hooks的示例。useForceUpdate：返回一个让组件重新渲染的函数。// 调用 forceUpdate 函数来强制组件重新渲染usePrevVal：获取状态的上一次的值，它利用了Ref的可变性，以及effect在DOM被绘制到屏幕上才执行的特性。
React vs React Native写法上的不同
Ranye的博客
04-23 553
从标签和样式两个角度，快速从react过渡到react native
react引入iconfont的svg图标
qq_23858785的博客
04-23 299
react引入iconfont的svg图标
react之渲染与props
weixin_73918953的博客
04-23 881
要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。你可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。你可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。你不能改变 props。当你需要交互性时，你可以设置 state。
React 15~18每个阶段更新了什么
最新发布
04-26 429
React.createClass （弃用）class 组件函数组件（无状态、纯UI组件）堆栈diff（state1->state2->state3…、每个更新过程。
react的echarts
07-28
React与Echarts是两个不同的技术，React是一个用于构建用户界面的JavaScript库，而Echarts是一个基于JavaScript的数据可视化库。它们可以一起使用来创建交互式的数据可视化图表。 要在React中使用Echarts，你可以按照以下步骤进行操作： 1. 首先，确保你的React项目已经设置好并运行起来。 2. 安装Echarts库，可以使用npm或yarn命令来安装，例如运行命令：`npm install echarts --save`。 3. 在React组件中引入Echarts库：`import echarts from 'echarts'`。 4. 在React组件的渲染方法中创建一个DOM元素作为图表的容器。例如：`<div id="chart" style={{ width: '100%', height: '400px' }}></div>`。 5. 在React组件的生命周期方法中使用Echarts来创建和渲染图表。例如，在`componentDidMount`方法中： ```javascript componentDidMount() { // 获取容器元素 const chartContainer = document.getElementById('chart'); // 创建图表实例 const myChart = echarts.init(chartContainer); // 配置图表选项 const options = { // ...你的图表配置... }; // 设置图表选项 myChart.setOption(options); } ``` 6. 在React组件的`render`方法中返回你创建的图表容器元素：`return <div id="chart" style={{ width: '100%', height: '400px' }}></div>`。 这样，你就可以在React项目中使用Echarts来创建和展示图表了。记得根据你的具体需求进行相应的配置和样式调整。希望对你有所帮助！如果你有更多问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未成年梦想

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值