web前端教程之如何在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源码

想要学习web前端的同学，可以参考千锋成都web前端培训班提供的学习大纲；

web前端教程之如何在React框架中使用ECharts图库表制图？相关推荐

如何在React框架中使用ECharts图库表制图？
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...
[DT框架使用教程01]如何在DT框架中创建插件
[DT框架使用教程01]如何在DT框架中创建插件 DT框架代码地址: https://github.com/huifeng-kooboo/DT 由于国内访问速度的问题也可以访问gitee的地址: h ...
web前端教程分享：常见 React 面试题
React 中 keys 的作用是什么? Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () { return ( <ul> ...
零基础带你飞web前端教程带你探究web前端趋势
web前端教程带你探究web前端趋势,IT行业发展迅速,瞬息万变,很多想要学习Web前端进入IT行业的人都会担忧Web前端行业发展趋势如何.下面,老师就带大家了解一下2021年Web前端行业发展趋势如 ...
前后端解析_好程序员Web前端教程分享前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来的好程 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
js怎么定义combobox_好程序员web前端教程分享新手应该怎么学习webpack
好程序员web前端教程分享新手应该怎么学习webpack,什么是webpack?一句话概括:webpack是一个模块打包工具(module bundler).重点在于两个关键词"模块&quo ...
vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...
react前端显示图片_如何在react项目中引用图片？
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...

web前端教程之如何在React框架中使用ECharts图库表制图？

web前端教程之如何在React框架中使用ECharts图库表制图？相关推荐

最新文章

热门文章