如何在React框架中使用ECharts图库表制图?
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何在React框架下使用ECharts制图。
一、开发前准备
如果在原生的JS应用或者jQuery项目中,我们常用的方式就是直接去官网下载其核心js文件并导入我们的项目中使用,但是在React项目中,我们大可不必,由于React项目开发基于webpack做了二次封装,而webpack又是基于 Node.js的前端项目部署打包工具,总而言之,React项目开发是在nodejs环境基础上,所以可以直接利用npm包管理器将第三方工具模块下载加入到项目中,并通过import引入对应的模块到相关页面中使用,不需要关心其中的细节。
具体操作流程
二、案例
1、通过极坐标双数值轴绘制爱心
最终实现效果
思路分析
1.创建一个React组件,并且需要组件内的状态state,render函数,componentDidMount钩子。
2.render函数渲染需要容纳Echart实例的容器元素,并需要声明id,方便Echarts实例找到挂载的目标。
3.设置组件内的状态state,定义sourceData存放Echarts实例的数据源
4.componentDidMount钩子,当render函数渲染完容器元素之后调用,主要作用如下:
1)生成坐标数据源,并更新到state中的sourceData上
2)初始化Echarts实例,将其挂载到id为main的div元素上
3)通过myChart.setOption(obj)将需要展示的数据,整合成一个obj对象包括sourceData,绘制爱心图形
demo源码
2、南丁格尔玫瑰图实现数据展示
最终实现效果
思路分析
1.创建一个React组件,并且需要组件内的状态state,render函数,componentDidMount钩子
2.render函数渲染需要容纳Echart实例的容器元素,并需要声明id,方便Echarts实例找到挂载的目标
3.设置组件内的状态state,定义sourceData存放Echarts实例的数据源
4.componentDidMount钩子,当render函数渲染完容器元素之后调用,主要作用如下
1)初始化Echarts实例,将其挂载到id为main的div元素上
2)通过myChart.setOption(obj)将需要展示的数据包括state的数据data,celldata,整合成一个obj对象,并绘制图表。
demo源码
本文来自千锋教育,转载请注明出处。
如何在React框架中使用ECharts图库表制图?相关推荐
- web前端教程之如何在React框架中使用ECharts图库表制图?
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...
- 如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
- React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
- 如何在React Native中写一个自定义模块
前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
- 如何在 React Native 中写一个自定义模块
前言 在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
- android studio点击图片,如何在Android Studio中的模拟器图库中添加图像?
如何在Android Studio中的模拟器图库中添加图像? 我正在开发图像过滤器应用程序. 但是,如果我没有任何图像,就无法真正尝试. 我知道我可以在电话中对其进行测试,但这并不相同,因为我需要错误 ...
- 如何在React Native中使用Redux Saga监视网络更改
by Pritish Vaidya 通过Pritish Vaidya 如何在React Native中使用Redux Saga监视网络更改 (How to monitor network change ...
- 如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
- react前端显示图片_如何在react项目中引用图片?
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...
最新文章
- java更新blob字段的值_对一个BLOB字段如何用update 来更新?? (100分)
- 2021年人工神经网络第四次作业-第一题:LeNet对于水果与动物进行分类
- 【QGIS入门实战精品教程】2.2:QGIS软件的下载与安装(Windows)
- hive数据库的哪些函数操作是否走MR
- android 加密显示银行卡号,Android银行卡输入框与卡号显示
- iOS--利用Fastlane实现自动化打包
- Gradle 4.8.1基本配置
- matlab轴向柱塞泵动力学仿真,基于ADAMS柔性模型的轴向柱塞泵动力学仿真
- GATK RNA-Seq Snps Indel 分析
- win7 快速启动栏 里的快捷方式存放路径
- sonar配置报错问题处理
- 关于group by的用法
- 低功耗SD\SPI NAND Flash芯片
- 基础知识贴----用好用活N93(完)
- 聊一聊KOA的洋葱模型
- 【高通平台】安卓平板,使用QQ 视频通话,视频旋转90度问题修改
- Python 发红包(用numpy)
- RocketMQ启动报错解决:Using the DefNew young collector with the CMS collector is deprecated and will likely
- 山建大计算机学院,山建大丨历数20年来建大学生作业设计表达的前世今生
- Pandas+Pyecharts | 全国吃穿住行消费排行榜,最‘抠门’的地区居然是北京!!!
热门文章
- HDU1599 find the mincost route Floyd算法求最小环
- c语言如何获取串口列表,如何通过串口来读写数据,请教达人
- 接口本地正常服务器报500_运维该如何解决服务器底层维护难题?
- 华为手机连电脑_华为手机微信聊天记录如何导出电脑的四大方法
- html自动执行的事件,js自执行事件
- javaweb和ajax使用查询出来的数据做下拉菜单_不会用Excel做数据筛选,老板叼的你没话说!...
- html页面右侧滚动,HTML5页面点击和左右滑动页面滚动
- QPS/TPS/并发量/系统吞吐量
- BugKuCTF 杂项 啊哒
- Colored Boots