关于前端:如何在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 函数渲染完容器元素之后调用，次要作用如下:

  生成游戏坐标数据源，并更新到 state 中的 sourceData 如 www.sangpi.com 初始化 Echarts 实例，将其挂载到 id 为 main 的 div 元素上通过 myChart.setOption(obj) 将须要展现的数据, 整合成一个 obj 对象包含 sourceData，绘制爱心图形

 



  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 源码