react-love / React Echarts Modules
Licence: mit
这个例子给你提供在react中使用echarts的最优方案
Stars: ✭ 185
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Echarts Modules
Lazy Compile Webpack Plugin
Boost webpack startup time by lazily compiling dynamic imports
Stars: ✭ 106 (-42.7%)
Mutual labels: webpack, lazy
Conditioner
💆🏻 Frizz free, context-aware, JavaScript modules
Stars: ✭ 1,053 (+469.19%)
Mutual labels: webpack, import
Webpack Require From
Webpack plugin that allows to configure path or URL for fetching dynamic imports
Stars: ✭ 142 (-23.24%)
Mutual labels: webpack, import
Ts App
Boilerplate project for a TypeScript API (Express, tsoa) + UI (React/TSX)
Stars: ✭ 182 (-1.62%)
Mutual labels: webpack
Webpack Serve
Takes your webpack config and creates a development server with hot module reloading and error overlay
Stars: ✭ 177 (-4.32%)
Mutual labels: webpack
Bear Admin
一個簡潔的 antd-react-admin 應用。a clean antd-react-admin application
Stars: ✭ 176 (-4.86%)
Mutual labels: webpack
Advanced React Webpack Babel Setup
The advanced React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 176 (-4.86%)
Mutual labels: webpack
React Universal Saga
Universal React Starter Kit ft. Redux Saga
Stars: ✭ 184 (-0.54%)
Mutual labels: webpack
Webpack Livereload Plugin
LiveReload during webpack --watch
Stars: ✭ 183 (-1.08%)
Mutual labels: webpack
Typescript Webpack React Redux Boilerplate
React and Redux with TypeScript
Stars: ✭ 182 (-1.62%)
Mutual labels: webpack
Vue Admin Template
Sample Admin Template based on Vuejs & Vuetify.
Stars: ✭ 177 (-4.32%)
Mutual labels: webpack
Gas Clasp Starter
A starter template for Google Apps Script by clasp
Stars: ✭ 184 (-0.54%)
Mutual labels: webpack
React Hot Loader Loader
A Webpack Loader that automatically inserts react-hot-loader to your App 👨🔬
Stars: ✭ 176 (-4.86%)
Mutual labels: webpack
Jekyll Webpack Boilerplate
⚡️ A boilerplate with Jekyll and Webpack to make the most performant static websites
Stars: ✭ 182 (-1.62%)
Mutual labels: webpack
Sass Extract
Extract structured variables from sass files
Stars: ✭ 183 (-1.08%)
Mutual labels: webpack
Fed Note
我是Mokou, 📘 这里是写前端博客和备忘学习的地方。Vue3 源码解析连载中。喜欢请Star。
Stars: ✭ 180 (-2.7%)
Mutual labels: webpack
Webpack Deadcode Plugin
Webpack plugin to detect unused files and unused exports in used files
Stars: ✭ 180 (-2.7%)
Mutual labels: webpack
react16.5.0实现echarts4模块化加载
我们真的需要react-echarts插件吗?
NO
注意:该项目仅作为源码学习使用,不能采取npm install --save react-echarts-modules的方式导入你的项目,因为这不是一个插件!!
在这里,我使用echarts提供的模块化加载方式,实现了几个react-echarts图表组件
你可以打开控制台,观察每个图表组件的加载情况。
插件版本号
"echarts": "4.1.0",
"react": "16.5.0",
"react-dom": "16.5.0"
实现了哪些图表组件
1、饼图
2、柱状图
3、折线图
4、散点图
5、地图
6、雷达图
7、k线图
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: "Pie" */'./EchartsDemo/PieReact')) //饼图组件
const BarReact = asyncComponent(() => import(/* webpackChunkName: "Bar" */'./EchartsDemo/BarReact')) //柱状图组件
const LineReact = asyncComponent(() => import(/* webpackChunkName: "Line" */'./EchartsDemo/LineReact')) //折线图组件
const ScatterReact = asyncComponent(() => import(/* webpackChunkName: "Scatter" */'./EchartsDemo/ScatterReact')) //散点图组件
const MapReact = asyncComponent(() => import(/* webpackChunkName: "Map" */'./EchartsDemo/MapReact')) //地图组件
const RadarReact = asyncComponent(() => import(/* webpackChunkName: "Radar" */'./EchartsDemo/RadarReact')) //雷达图组件
const CandlestickReact = asyncComponent(() => import(/* webpackChunkName: "Candlestick" */'./EchartsDemo/CandlestickReact')) //k线图组件
启动项目
npm install
npm start
打包项目
npm run build
实现方案介绍
1、每个图表单独封装成一个组件,通过参数传递数据,你会发现,图表内部代码几乎完全一样,只有import的类型不同。
2、异步加载是提高图表加载性能的最佳方式,不管是服务端还是客户端渲染。
3、在这些demo中,我认为对你来说最有价值的是react组件异步加载模式,很多人异步加载组件是通过拆分路由的方式,而非路由组件的异步加载,并不多人去尝试。但我想告诉你的是, 非路由组件的异步加载会将你的庞大的父组件拆分的更细,体积更小,加载的更加流畅。
4、有时候,我会看到有些人把echarts打包到公共js文件里面,如果你的首屏不需要用到它,完全没有必要这样做。
附echarts各个模块导出路径
/**
* 导出echarts主模块
*/
module.exports = require('./lib/echarts');
// 各子模块路径
require('./lib/chart/line');
require('./lib/chart/bar');
require('./lib/chart/pie');
require('./lib/chart/scatter');
require('./lib/chart/radar');
require('./lib/chart/map');
require('./lib/chart/treemap');
require('./lib/chart/graph');
require('./lib/chart/gauge');
require('./lib/chart/funnel');
require('./lib/chart/parallel');
require('./lib/chart/sankey');
require('./lib/chart/boxplot');
require('./lib/chart/candlestick');
require('./lib/chart/effectScatter');
require('./lib/chart/lines');
require('./lib/chart/heatmap');
require('./lib/chart/pictorialBar');
require('./lib/chart/themeRiver');
require('./lib/chart/custom');
require('./lib/component/graphic');
require('./lib/component/grid');
require('./lib/component/legend');
require('./lib/component/tooltip');
require('./lib/component/axisPointer');
require('./lib/component/polar');
require('./lib/component/geo');
require('./lib/component/parallel');
require('./lib/component/singleAxis');
require('./lib/component/brush');
require('./lib/component/calendar');
require('./lib/component/title');
require('./lib/component/dataZoom');
require('./lib/component/visualMap');
require('./lib/component/markPoint');
require('./lib/component/markLine');
require('./lib/component/markArea');
require('./lib/component/timeline');
require('./lib/component/toolbox');
require('zrender/lib/vml/vml');
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].