react中使用echarts就這麼簡單

01-24

我們真的需要react-echarts插件嗎？ NO！！！

在這裡，我使用echarts提供的模塊化載入方式，實現了幾個react-echarts圖表組件：react-echarts圖表在線渲染查看

你可以打開控制台，觀察每個圖表組件的載入情況。

但是，如果你認為僅僅是模塊導入echarts的tooltip、grid這些插件就完事了，那麼我也用不著寫這篇文章分享了，下面會講到另外一種非同步載入方式。

導入echarts，最煩人的是什麼？配置option是其一，其二就是極其龐大的echarts！特別是管理後台使用到echarts的時候，如果需要同個頁面展示數十種圖表類型，你就該好好考慮性能問題了。

插件版本號

"echarts": "^3.6.2", "react": "^15.6.1", "react-dom": "^15.6.1"

實現了哪些圖表組件

1、餅圖

2、柱狀圖

3、折線圖

4、散點圖

5、地圖

6、雷達圖

7、k線圖

我們不總是需要插件
實現這些echarts-react組件的目的，是告訴大家，react可以不需要引入第三方插件，使用echarts，不要懼怕react組件！

看過很多人說react難寫，因為他們習慣了在jQuery開發模式下導入echarts、swiper、d3等插件。而突然切換到react中，就產生了不知所措的感覺。

如何在react中導入第三方插件，成為了他們心中的痛點，所以一些人就認為需要別人封裝好的echarts-react插件或者其他react插件，才能使用，這種想法是錯的。

echarts體積太大，使用模塊化載入
以柱狀圖為例子，我們根據需要渲染的插件採取模塊導入，不渲染的組件不導入，最大程度減小js。

import echarts from "echarts/lib/echarts" //必須import "echarts/lib/component/tooltip"import "echarts/lib/component/grid"import "echarts/lib/chart/bar"

組件化開發的福音，react組件模塊化載入

demo中採用單個echarts組件非同步打包載入的模式，因為echarts組件普遍偏大，即使壓縮也效果不明顯，所以非同步載入是最好的方式。

import { pieOption, barOption, lineOption, scatterOption, mapOption, radarOption, candlestickOption } from "./optionConfig/options"const PieReact = asyncComponent(() => import(/* webpackChunkName: "PieReact" */"./EchartsDemo/PieReact")) //餅圖組件const BarReact = asyncComponent(() => import(/* webpackChunkName: "BarReact" */"./EchartsDemo/BarReact")) //柱狀圖組件const LineReact = asyncComponent(() => import(/* webpackChunkName: "LineReact" */"./EchartsDemo/LineReact")) //折線圖組件const ScatterReact = asyncComponent(() => import(/* webpackChunkName: "ScatterReact" */"./EchartsDemo/ScatterReact")) //散點圖組件const MapReact = asyncComponent(() => import(/* webpackChunkName: "MapReact" */"./EchartsDemo/MapReact")) //地圖組件const RadarReact = asyncComponent(() => import(/* webpackChunkName: "RadarReact" */"./EchartsDemo/RadarReact")) //雷達圖組件const CandlestickReact = asyncComponent(() => import(/* webpackChunkName: "CandlestickReact" */"./EchartsDemo/CandlestickReact")) //k線圖組件

### 啟動項目

//安裝npm install//啟動npm start

打包項目

npm run build

實現方案介紹

1、每個圖表單獨封裝成一個組件，通過參數傳遞數據，你會發現，圖表內部代碼幾乎完全一樣，只有import的類型不同。

2、非同步載入是提高圖表載入性能的最佳方式，不管是服務端還是客戶端渲染。

3、在這些demo中，我認為對你來說最有價值的是react組件非同步載入模式，很多人非同步載入組件是通過拆分路由的方式，而非路由組件的非同步載入，並不多人去嘗試。但我想告訴你的是，

非路由組件的非同步載入會將你的龐大的父組件拆分的更細，體積更小，載入的更加流暢。

===> 去往github查看非同步載入echarts源碼