xlsdg / React Echarts V3
Licence: mit
React.js(v16.x+) component wrap for ECharts.js(v3.x+)
Stars: ✭ 48
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Echarts V3
React Component Echarts
React component echarts. 组件式百度图表。
Stars: ✭ 175 (+264.58%)
Mutual labels: chart, react-component, echarts
Vue Echarts V3
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)
Stars: ✭ 884 (+1741.67%)
Mutual labels: library, chart, echarts
Sparklinelayout
Simple and lightweight library for drawing sparklines / graphs. Support markers and gradients.
Stars: ✭ 291 (+506.25%)
Mutual labels: library, chart
Echarts For React
⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
Stars: ✭ 3,441 (+7068.75%)
Mutual labels: react-component, echarts
Chart Race React
📊 Seamless bar chart race component for React.
Stars: ✭ 406 (+745.83%)
Mutual labels: chart, react-component
datart
Datart is a next generation Data Visualization Open Platform
Stars: ✭ 1,042 (+2070.83%)
Mutual labels: chart, echarts
Esp Dash
A blazing fast library to create a functional dashboard for ESP8266 and ESP32
Stars: ✭ 548 (+1041.67%)
Mutual labels: library, chart
Echarts For Weixin
Apache ECharts (incubating) 的微信小程序版本
Stars: ✭ 5,479 (+11314.58%)
Mutual labels: chart, echarts
Wunderbar
Simple horizontal bar chart printer for your terminal
Stars: ✭ 572 (+1091.67%)
Mutual labels: library, chart
React Image Fallback
stop displaying broken images, have another image to fallback on.
Stars: ✭ 106 (+120.83%)
Mutual labels: library, react-component
Timeline Chart View
An android view to represent data over a timeline.
Stars: ✭ 100 (+108.33%)
Mutual labels: library, chart
Echarts Php
Echarts-PHP a PHP library that works as a wrapper for the Echarts js library
Stars: ✭ 253 (+427.08%)
Mutual labels: chart, echarts
Angular Echarts
💹 angularjs bindings for baidu echarts
Stars: ✭ 367 (+664.58%)
Mutual labels: chart, echarts
Flutter echarts
A Flutter widget to use Apache ECharts (incubating) in a reactive way.
Stars: ✭ 420 (+775%)
Mutual labels: chart, echarts
Timesheet.js
JavaScript library for HTML5 & CSS3 time sheets
Stars: ✭ 6,881 (+14235.42%)
Mutual labels: library, chart
Echarts For Vue
📊📈 ECharts wrapper component for Vue 3 and 2
Stars: ✭ 42 (-12.5%)
Mutual labels: chart, echarts
react-echarts-v3
React.js
v16.x+
component wrap for ECharts.jsv3.x+
Feature
- Lightweight, efficient, on-demand binding events;
- Support for importing ECharts.js charts and components on demand;
- Support component resize event auto update view;
Installation
$ npm install --save echarts react-echarts-v3
Usage
-
Change webpack config
For webpack 1.x:
{ test: /\.jsx?$/, loader: 'babel', include: [ - path.join(prjRoot, 'src') + path.join(prjRoot, 'src'), + path.join(prjRoot, 'node_modules/react-echarts-v3/src') ], - exclude: /node_modules/ + exclude: /node_modules(?![\\/]react-echarts-v3[\\/]src[\\/])/ },
For webpack 2.x+:
{ test: /\.jsx?$/, loader: 'babel-loader', - include: [resolve('src'), resolve('test')] + include: [resolve('src'), resolve('test'), resolve('node_modules/react-echarts-v3/src')] }
-
Import all charts and components
import IEcharts from 'react-echarts-v3/src/full.js'; const option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; const onEvents = { 'click': function(params) { // the 'this' variable can get echarts instance console.log(params); } }; return ( <IEcharts option={option} onEvents={onEvents} /> );
-
Import ECharts.js modules manually to reduce bundle size
import IEcharts from 'react-echarts-v3/src/lite.js'; // Import all charts and components // require('echarts/lib/chart/line'); require('echarts/lib/chart/bar'); // require('echarts/lib/chart/pie'); // require('echarts/lib/chart/scatter'); // require('echarts/lib/chart/radar'); // require('echarts/lib/chart/map'); // require('echarts/lib/chart/treemap'); // require('echarts/lib/chart/graph'); // require('echarts/lib/chart/gauge'); // require('echarts/lib/chart/funnel'); // require('echarts/lib/chart/parallel'); // require('echarts/lib/chart/sankey'); // require('echarts/lib/chart/boxplot'); // require('echarts/lib/chart/candlestick'); // require('echarts/lib/chart/effectScatter'); // require('echarts/lib/chart/lines'); // require('echarts/lib/chart/heatmap'); // require('echarts/lib/component/graphic'); // require('echarts/lib/component/grid'); // require('echarts/lib/component/legend'); // require('echarts/lib/component/tooltip'); // require('echarts/lib/component/polar'); // require('echarts/lib/component/geo'); // require('echarts/lib/component/parallel'); // require('echarts/lib/component/singleAxis'); // require('echarts/lib/component/brush'); // require('echarts/lib/component/title'); // require('echarts/lib/component/dataZoom'); // require('echarts/lib/component/visualMap'); // require('echarts/lib/component/markPoint'); // require('echarts/lib/component/markLine'); // require('echarts/lib/component/markArea'); // require('echarts/lib/component/timeline'); // require('echarts/lib/component/toolbox'); // require('zrender/lib/vml/vml'); const option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; return ( <IEcharts option={option} /> );
propTypes
className: PropTypes.string,
style: PropTypes.object,
group: PropTypes.string,
theme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
initOpts: PropTypes.object,
option: PropTypes.object.isRequired,
notMerge: PropTypes.bool,
lazyUpdate: PropTypes.bool,
onReady: PropTypes.func,
onResize: PropTypes.func,
loading: PropTypes.bool,
resizable: PropTypes.bool,
optsLoading: PropTypes.object,
onEvents: PropTypes.object
defaultProps
className: 'react-echarts',
style: { width: '100%', height: '100%' },
notMerge: false,
lazyUpdate: false,
onReady: function(instance, ECharts) {},
onResize: function(width, height) {},
loading: false,
resizable: false,
optsLoading: {
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
},
onEvents: {}
Demo
License
MIT
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].