同步操作将从 小为/echarts-for-react 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
A very simple echarts(v3.0) wrapper for react.
npm install echarts-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://git.hust.cc/echarts-for-react/
Simple demo code. for more example can see: http://git.hust.cc/echarts-for-react/
import React from 'react';
import ReactEcharts from 'echarts-for-react';
<ReactEcharts
option={this.getOtion()}
height={300}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />
option
(required, object)the echarts option config, can see http://echarts.baidu.com/option.html#title.
height
(required, number)the height
of echarts. number
, with px
as it's unit.
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.getOtion()}
height={300}
theme='my_theme' />
onChartReady
(optional, function)when the chart is ready, will callback the function with the echarts object
as it's paramter.
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.getOtion()}
height={300}
onEvents={onEvents} />
for more event key name, see: http://echarts.baidu.com/api.html#events
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='echarts_react'
option={this.getOtion()}
height={300} />
// then get the `ReactEcharts` use this.refs.echarts_react
let echarts_instance = this.refs.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:
binding / unbinding
event.dynamic charts
with dynamic data.release
the charts.MIT
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。