A very simple echarts(v3.0) wrapper for react.-优快云博客

本文介绍了一个简单的React图表组件echarts-for-react，该组件为ECharts v3.0提供了一个React封装。通过简单的安装步骤和示例代码，本文展示了如何在React应用中集成并使用ECharts进行数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echart-for-react

A very simple echarts(v3.0) wrapper for react. https://github.com/hustcc/echarts-for-react

install

npm install echart-for-react

How to run the demo:

git clone git@github.com:hustcc/echarts-for-react.git

npm install

npm start

then open http://127.0.0.1:8080/ in your browser. or see http://hustcc.github.io/echarts-for-react/

usage

Simple demo code: more can see: http://hustcc.github.io/echarts-for-react/

import React from 'react';
import ReactEcharts from '../src/echarts-for-react';

<ReactEcharts
    option={this.getOtion()} 
    height={300} 
    onEvents={onEvents} />

component props

option

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

height

the height of echart. number, with px as it's unit.

onChartReady

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

onEvents

binding the echarts event, will callback the function with the echart event parameter, and the echart object. e.g:

let onEvents = {
    'click': this.onChartClick,
    'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactEcharts
    option={this.getOtion()} 
    height={300} 
    onEvents={onEvents} />

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

TODO

theme props
echart API

LICENSE

MIT