如何在react里使用Echarts并把生成的页面导成组件插入到另一个页面的简单Demo

最新推荐文章于 2023-11-28 18:15:58 发布
最新推荐文章于 2023-11-28 18:15:58 发布
阅读量325 收藏
点赞数
文章标签： 前端 react.js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alice_44/article/details/119387400
版权
本文演示了在React应用中如何安装Echarts，创建一个子组件，并将生成的图表组件插入到主页面的过程。通过实例展示了从Echarts官网获取示例代码并应用于React组件的方法。
摘要由CSDN通过智能技术生成

1）在终端进行安装Echarts的相关包

 2）创建2个文件

其中function1作为子组件插入到index里

 3）在function1.jsx里

导入

再在里面搭一个框架      class创建组件Function1并导出

 4）在Echarts官网里随便找一个案例做测试

 复杂下面蓝色部分代码，白色部分不用，因为option上面已经定义了

最低0.47元/天 解锁文章
Alice_44
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react封装导出组件
超美腻的程序媛的博客
06-27 1150
业务场景: 1 有一个表格数据需要导出，服务端返回的是blob格式的数据，我们希望将blob数据导出为xls表格 2 这个表格数据导出同时需要筛选条件，比如选择不同的条件导出结果不同的数据 3 封装一个导出组件处于发送请求状态时置为不可用，导出成功后可用 使用效果图： 前置知识处理blob格式数据： 利用a标签的href属性，模拟其click点击事件，就可以下载文件 const linkNode = document.createElement('a'); linkN
react将一个页面作为子组件的使用方法
jsyxiaoba的博客
07-03 523
其实这个并没有什么好说的，只是当时的业务和权限控制有关联，脑子突然有点短路了，把我整不会了，后来突然想明白了，权限不也是数据嘛，把权限数据传给这个页面组件不就行了。下面说说具体的操作： 先说场景： 有个 DT 页面，上面有一些按钮，需要用权限控制这些按钮的显示隐藏，其实就是不同的用户的权限分配问题。 有 A B C 三个页面，从这三个页面分别进入 DT 页面，看到的其他数据是不一样的，看到的按钮也得是不一样的，只是 UI 布局和字段名相同而已。 解决方法： 将 DT 页面作为公用的子组件使用 增加三个路
react使用echarts完整细节实例（后台数据渲染&&布局实现）
WebView
04-15 1846
1、这是我使用echarts实现的两种图表 折线图 柱状图 2、折线图实现 首先导入必须的包,在这之前进行安装 npm install echarts --save // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入柱状图 import 'echarts/lib/chart/line'; // 引...
react系列（9）混入mixins
@黄小泽的个人博客
11-27 3364
混入（混合）是指定义一个对象，让组件去继承该对象的方法和状态的过程，该对象也被称为混入（混合）对象。若组件和被继承的混合对象具体相同的生命钩子函数将要被执行，则混合对象的函数会优先执行，然后再到组件内相同函数执行，但仅限于生命钩子函数。 另外，组件内不允许有和混合对象相同命名的方法（非生命钩子函数），如例子中的handlAction，否则会报错。ReactClassInterface: You ...
将ECharts绘制的饼图渲染到shiny的应用程序中
qq_36733408的博客
05-17 441
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片.
echarts 加入下拉列表_实现输入框与下拉框联动 - echart
weixin_28946193的博客
01-14 2856
本文主要介绍了jQuery插件echarts实现的循环生成图效果,结合完整实例形式分析了echarts插件循环输出数字图形的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下，希望能帮助到大家。1、...下面我就为大家分享一篇实时监控input框,实现输入框与下拉框联动的实例，具有很好的参考价值，希望对大家有所帮助。如图：html代码奖励类型：---请选择---{for...
cra-ts-pro-reactRouter6-rtk
weixin_57135131的博客
03-06 763
基于react的购物网站后台管理系统保姆级代码
使用 ElementUI 组件构建 Window 桌面应用探索与实践（WPF）
余衫马的博客
11-18 1250
基于 CEF 实现 Vue + Vite + ElementUI 组件构建 Window 桌面应用（WPF）
使用VuePress搭建一个类型element ui文档
热门推荐
无聊者进来逛逛
06-04 1万+
网站成果样式 项目书写步骤   github地址:https://github.com/xuhuihui/dataCom 官网：http://caibaojian.com/vuepress/guide/getting-started.html 参考文章：https://www.javascriptcn.com/read-31206.html 前言：我先git clone官方gith...
react-Echarts的React封装各种配置项可以写成子组件的形式
08-15
Echarts 的 React 封装，各种配置项可以写成子组件的形式
如何在React框架中使用ECharts图库表制图？
xiaoxijinger的博客
04-06 328
在前端开发过程中避免不会遇到需要进行数据可视化的操作，但单单通过html5的Canvas实现起来比较麻烦，所以才会用到ECharts，HighCharts,，Chart.js等，今天小千就来教大家如何在React框架下使用ECharts制图。 一、开发前准备 如果在原生的JS应用或者jQuery项目中，我们常用的方式就是直接去官网下载其核心js文件并导入我们的项目中使用，但是在React项目中，我们大可不必，由于React项目开发基于webpack做了二次封装，而webpack又是基于 Node.js的前端
react xxx 不能用作 JSX 组件-工作中遇到的问题
qq_43853213的博客
04-29 4298
最近总是遇到这样的问题 之前百度没有找到问题 直接使用忽略TS 提示可以隐藏掉这个报错 {/* @ts-ignore */} // @ts-ignore
react 按需导入 Echarts 图表
前端、python爱好者
04-13 2607
一、安装Echarts Echarts官网：https://echarts.apache.org/handbook/zh/basics/download/ npm install echarts --save 或 yarn add echarts 二、基本示例 在Echarts示例位置找到自己项目需要的图例，地址：https://echarts.apache.org/examples/zh/index.html#chart-type-scatter 该示例是基本示例，可以通过Echats的 配置项手册进行图
react/umi中导入Echarts图表
最新发布
m0_74060440的博客
11-28 1076
在umi/react中引入Echarts图表
React中提示XXX不能用作JSX组件
weixin_72237725的博客
03-06 4555
React中提示"XXX"不能用作JSX组件
vue封装echarts组件，数据动态渲染
蓝胖子的博客
01-05 1309
需求：显示默认时间为当前时间至7天之前时间 去请求数据 实现效果： 1.安装Echarts cnpm install echarts -S 2.在vue项目中使用Echarts 父组件使用子组件的代码 template区的使用 <BarChart :labelList="chartData.labelList" :checkOutValueList="chartData.checkOutValueList" :putInValueList
echarts模板二
longbao_1的博客
05-19 537
一、界面效果 二、代码实现 数据： newData: { ydata: [ { name: "8080", value: 1000, }, { name: "28", value: 2000, }, { name: "6979", value: 3000, .
一个html引入多个柱状图,在react项目中使用ECharts在页面显示多个柱状图
weixin_30814159的博客
07-02 727
最近项目比较赶，又跑来做前端了，简单写一下逻辑吧。import React, { Component } from 'react';//引入需要的标签import { Table,Input,Row,Col } from 'apollo-react';// 引入 ECharts 主模块import echarts from 'echarts/lib/echarts';// 引入柱状图import ...
react中怎么把一个页面嵌入到另一个页面
06-10
在 React 中，可以使用组件来实现一个页面嵌入到另一个页面的效果。具体来说，可以创建一个包含嵌入页面的组件，然后在另一个页面中使用该组件。以下是一些实现嵌入页面的方法： 1.使用 React Router: React Router...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值