关于html5:如何在React框架中使用ECharts图库表制图

在前端开发过程中防止不会遇到须要进行数据可视化的操作，但单单通过html5的Canvas实现起来比拟麻烦，所以才会用到ECharts，HighCharts,，Chart.js等，如何在React框架下应用ECharts制图。

  如果在原生的JS利用或者jQuery我的项目中，咱们罕用的形式就是间接去官网下载其外围js文件并导入咱们的我的项目中应用，然而在React我的项目中，咱们大可不必，因为React我的项目开发基于webpack做了二次封装，而webpack又是基于 Node.js的前端我的项目部署打包工具，总而言之，React我的项目开发是在nodejs环境根底上，所以能够间接利用npm包管理器将第三方工具模块下载退出到我的项目中，并通过import引入对应的模块到相干页面中应用，不须要关怀其中的细节。  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函数，www.cungun.comcomponentDidMount钩子  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对象,并绘制图表。