npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

echarts-for-react

v2.0.15-beta.0

baidu Echarts(v3.x & v4.x) components for react.

Downloads

55,317

Readme

echarts-for-react

A very simple echarts(v3.0 & v4.0) wrapper for react.

Build Status Coverage Status npm npm npm echarts supported react supported

1. install

npm install --save echarts-for-react

# `echarts` is the peerDependence of `echarts-for-react`, you can install echarts with your own version.
npm install --save echarts

Then use it.

import ReactEcharts from 'echarts-for-react';

// render echarts option.
<ReactEcharts option={this.getOption()} />

You can run demo by:

git clone [email protected]:hustcc/echarts-for-react.git

npm install

npm start

then open http://127.0.0.1:8080/ in your browser. or see http://git.hust.cc/echarts-for-react/

2. usage

Code of a simple demo code showed below. For more example can see: http://git.hust.cc/echarts-for-react/

javascript

import React from 'react';
import ReactEcharts from 'echarts-for-react';  // or var ReactEcharts = require('echarts-for-react');

<ReactEcharts
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={} />

typescript

import * as React from "react";
import ReactEcharts from "echarts-for-react";

<ReactEcharts
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={} />

Import ECharts.js modules manually to reduce bundle size

import React from 'react';
// import the core library.
import ReactEchartsCore from 'echarts-for-react/lib/core';

// then import echarts modules those you have used manually.
import echarts from 'echarts/lib/echarts';
// import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/pie';
// import 'echarts/lib/chart/scatter';
// import 'echarts/lib/chart/radar';

// import 'echarts/lib/chart/map';
// import 'echarts/lib/chart/treemap';
// import 'echarts/lib/chart/graph';
// import 'echarts/lib/chart/gauge';
// import 'echarts/lib/chart/funnel';
// import 'echarts/lib/chart/parallel';
// import 'echarts/lib/chart/sankey';
// import 'echarts/lib/chart/boxplot';
// import 'echarts/lib/chart/candlestick';
// import 'echarts/lib/chart/effectScatter';
// import 'echarts/lib/chart/lines';
// import 'echarts/lib/chart/heatmap';

// import 'echarts/lib/component/graphic';
// import 'echarts/lib/component/grid';
// import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/polar';
// import 'echarts/lib/component/geo';
// import 'echarts/lib/component/parallel';
// import 'echarts/lib/component/singleAxis';
// import 'echarts/lib/component/brush';

import 'echarts/lib/component/title';

// import 'echarts/lib/component/dataZoom';
// import 'echarts/lib/component/visualMap';

// import 'echarts/lib/component/markPoint';
// import 'echarts/lib/component/markLine';
// import 'echarts/lib/component/markArea';

// import 'echarts/lib/component/timeline';
// import 'echarts/lib/component/toolbox';

// import 'zrender/lib/vml/vml';

// The usage of ReactEchartsCore are same with above.
<ReactEchartsCore
  echarts={echarts}
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={} />

3. component props

  • option (required, object)

the echarts option config, can see http://echarts.baidu.com/option.html#title.

  • notMerge (optional, object)

when setOption, not merge the data, default is false. See http://echarts.baidu.com/api.html#echartsInstance.setOption.

  • lazyUpdate (optional, object)

when setOption, lazy update the data, default is false. See http://echarts.baidu.com/api.html#echartsInstance.setOption.

  • style (optional, object)

the style of echarts div. object, default is {height: '300px'}.

  • className (optional, string)

the class of echarts div. you can setting the css style of charts by class name.

  • theme (optional, string)

the theme of echarts. string, should registerTheme before use it (theme object format: https://github.com/ecomfe/echarts/blob/master/theme/dark.js). e.g.

// import echarts
import echarts from 'echarts';
...
// register theme object
echarts.registerTheme('my_theme', {
  backgroundColor: '#f4cccc'
});
...
// render the echarts use option `theme`
<ReactEcharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  className='echarts-for-echarts'
  theme='my_theme' />
  • onChartReady (optional, function)

when the chart is ready, will callback the function with the echarts object as it's paramter.

  • loadingOption (optional, object)

the echarts loading option config, can see http://echarts.baidu.com/api.html#echartsInstance.showLoading.

  • showLoading (optional, bool, default: false)

bool, when the chart is rendering, show the loading mask.

  • onEvents (optional, array(string=>function) )

binding the echarts event, will callback with the echarts event object, and the echart object as it's paramters. e.g:

let onEvents = {
  'click': this.onChartClick,
  'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactEcharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  onEvents={onEvents} />

for more event key name, see: http://echarts.baidu.com/api.html#events

  • opts (optional, object)

the opts of echarts. object, will be used when initial echarts instance by echarts.init. Document here.

<ReactEcharts
  option={this.getOption()}
  style={{height: '300px'}}
  opts={{renderer: 'svg'}} // use svg to render the chart.
/>

4. Component API & Echarts API

the Component only has one API named getEchartsInstance.

  • getEchartsInstance() : get the echarts instance object, then you can use any API of echarts.

for example:

// render the echarts component below with rel
<ReactEcharts ref={(e) => { this.echarts_react = e; }}
  option={this.getOption()} />

// then get the `ReactEcharts` use this.echarts_react

let echarts_instance = this.echarts_react.getEchartsInstance();
// then you can use any API of echarts.
let base64 = echarts_instance.getDataURL();

About API of echarts, can see http://echarts.baidu.com/api.html#echartsInstance.

You can use the API to do:

  1. binding / unbinding event.
  2. dynamic charts with dynamic data.
  3. get the echarts dom / dataURL / base64, save the chart to png.
  4. release the charts.

5. Q & A

  • How to render the chart with svg when using echarts 4.x

Use the props opts of component with renderer = 'svg'. For example:

<ReactEcharts
  option={this.getOption()}
  style={{height: '300px'}}
  opts={{renderer: 'svg'}} // use svg to render the chart.
/>

6. LICENSE

[email protected]hustcc.