如何在React项目中使用ECharts图表库

引言
在项目的开发中，对于我们前端开发人员而言，总是无法避免需要对数据进行可视化分析和设计的需求。但事实上，如果单纯的依靠Html5 Canvas想要快速地创建简洁，美观，炫酷的可视化作品难度极大且可维护性差。而现如今随着技术的迭代更新发展，已经出现很多可靠，易用，操作便捷，可交互，跨平台的一些可视化解决方案如ECharts，HighCharts,，Chart.js等。于是在本文中，我们以ECharts为例，来尝试将可视化解决方案应用于React-当前最流行的前端框架之一。 ​ 因为React的性能优越，灵活性高，而ECharts 的实用性和性能相比于其他竞品都要略胜一筹，所以这两种技术栈的使用需求还是比较旺盛，将Echarts应用到React项目中的场景也比较常见。
一、开发前准备
如果在原生的JS应用或者jQuery项目中，我们常用的方式就是直接去官网下载其核心js文件并导入我们的项目中使用，但是在React项目中，我们大可不必，由于React项目开发基于webpack做了二次封装，而webpack又是基于 Node.js的前端项目部署打包工具，总而言之，React项目开发是在nodejs环境基础上，所以可以直接利用npm包管理器将第三方工具模块下载加入到项目中，并通过import引入对应的模块到相关页面中使用，不需要关心其中的细节。
具体操作流程

1.下载安装Echarts到项目中，通过npm/yarn包管理器:
        npm i -S echarts / yarn add echarts （注意需要安装到生产依赖）
2.将ECharts引入编写的react组件中并使用的范式:
import React, {
   
	Component
} from "react";
// 引入ECharts主模块 
import * as echarts from "echarts/lib/echarts";
//按需引入需要的Echart模块
...
class APP extends Component {
   
	componentDidMount() {
   
		// 初始化echarts实例，将其挂载到id为main的dom元素上展示 
		var myChart = echarts.init(document.getElementById("main"));
		// 绘制图表 
		myChart.setOption({
   
			...
		});
	}
	render() {
    //渲染需要陈放Echart实例的容器元素
		return <div id = "main"
		style = {
   
			{
   
				width: 400,
				height: 400
			}
		} > < /div>; 
	}
}
export default APP;

二、案例
1、通过极坐标双数值轴绘制爱心
最终实现效果

思路分析

1.创建一个React组件，并且需要组件内的状态state，render函数，componentDidMount钩子
2.render函数渲染需要容纳Echart实例的容器元素,并需要声明id，方便Echarts实例找到挂载的目标
3.设置组件内的状态state，定义sourceData存放Echarts实例的数据源
3.componentDidMount钩子，当render函数渲染完容器元素之后调用，主要作用如下:
1）生成坐标数据源，并更新到state中的sourceData上
2）初始化Echarts实例，将其挂载到id为main的div元素上
3）通过myChart.setOption(obj)将需要展示的数据,整合成一个obj对象包括sourceData，绘制爱心图形

demo源码

import React, {
    Component} from "react";
// 引入EChar