在前端開發(fā)過(guò)程中避免不會(huì)遇到需要進(jìn)行數(shù)據(jù)可視化的操作，但單單通過(guò)html5的Canvas實(shí)現(xiàn)起來(lái)比較麻煩，所以才會(huì)用到ECharts，HighCharts,，Chart.js等，今天小千就來(lái)教大家如何在React框架下使用ECharts制圖。

      一、開發(fā)前準(zhǔn)備

      如果在原生的JS應(yīng)用或者jQuery項(xiàng)目中，我們常用的方式就是直接去官網(wǎng)下載其核心js文件并導(dǎo)入我們的項(xiàng)目中使用，但是在React項(xiàng)目中，我們大可不必，由于React項(xiàng)目開發(fā)基于webpack做了二次封裝，而webpack又是基于 Node.js的前端項(xiàng)目部署打包工具，總而言之，React項(xiàng)目開發(fā)是在nodejs環(huán)境基礎(chǔ)上，所以可以直接利用npm包管理器將第三方工具模塊下載加入到項(xiàng)目中，并通過(guò)import引入對(duì)應(yīng)的模塊到相關(guān)頁(yè)面中使用，不需要關(guān)心其中的細(xì)節(jié)。

      具體操作流程

      二、案例

      1、通過(guò)極坐標(biāo)雙數(shù)值軸繪制愛(ài)心

      最終實(shí)現(xiàn)效果

      思路分析

      1.創(chuàng)建一個(gè)React組件，并且需要組件內(nèi)的狀態(tài)state，render函數(shù)，componentDidMount鉤子。

      2.render函數(shù)渲染需要容納Echart實(shí)例的容器元素,并需要聲明id，方便Echarts實(shí)例找到掛載的目標(biāo)。

      3.設(shè)置組件內(nèi)的狀態(tài)state，定義sourceData存放Echarts實(shí)例的數(shù)據(jù)源

      4.componentDidMount鉤子，當(dāng)render函數(shù)渲染完容器元素之后調(diào)用，主要作用如下:

      1）生成坐標(biāo)數(shù)據(jù)源，并更新到state中的sourceData上

      2）初始化Echarts實(shí)例，將其掛載到id為main的div元素上

      3）通過(guò)myChart.setOption(obj)將需要展示的數(shù)據(jù),整合成一個(gè)obj對(duì)象包括sourceData，繪制愛(ài)心圖形

      demo源碼

      2、南丁格爾玫瑰圖實(shí)現(xiàn)數(shù)據(jù)展示

      最終實(shí)現(xiàn)效果

      思路分析

      1.創(chuàng)建一個(gè)React組件，并且需要組件內(nèi)的狀態(tài)state，render函數(shù)，componentDidMount鉤子

      2.render函數(shù)渲染需要容納Echart實(shí)例的容器元素,并需要聲明id，方便Echarts實(shí)例找到掛載的目標(biāo)

      3.設(shè)置組件內(nèi)的狀態(tài)state，定義sourceData存放Echarts實(shí)例的數(shù)據(jù)源

      4.componentDidMount鉤子，當(dāng)render函數(shù)渲染完容器元素之后調(diào)用，主要作用如下

      1）初始化Echarts實(shí)例，將其掛載到id為main的div元素上

      2）通過(guò)myChart.setOption(obj)將需要展示的數(shù)據(jù)包括state的數(shù)據(jù)data，celldata,整合成一個(gè)obj對(duì)象,并繪制圖表。

      demo源碼

      學(xué)習(xí)web前端，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對(duì)從零基礎(chǔ)小白到web前端初級(jí)開發(fā)工程師，web前端高級(jí)開發(fā)工程師，后面的web前端大神級(jí)開發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對(duì)學(xué)習(xí)web前端開發(fā)需要掌握的知識(shí)有個(gè)清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來(lái)哦~~