mirror of
https://github.com/hustcc/echarts-for-react.git
synced 2025-12-08 20:16:09 +00:00
add echarts API, v1.1.0
This commit is contained in:
aTool
parent
d355023ee5
commit
384995b0e4
31
README.md
31
README.md
@ -97,9 +97,36 @@ let onEvents = {
|
||||
for more event key name, see: [http://echarts.baidu.com/api.html#events](http://echarts.baidu.com/api.html#events)
|
||||
|
||||
|
||||
# TODO
|
||||
# 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:
|
||||
|
||||
```js
|
||||
// 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](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.
|
||||
|
||||
1. echart API
|
||||
|
||||
|
||||
# LICENSE
|
||||
|
||||
129
demo/ChartAPIComponent.jsx
Normal file
129
demo/ChartAPIComponent.jsx
Normal file
@ -0,0 +1,129 @@
|
||||
import React from 'react';
|
||||
import ReactEcharts from '../src/echarts-for-react';
|
||||
|
||||
const ChartAPIComponent = React.createClass({
|
||||
propTypes: {
|
||||
},
|
||||
getOtion: function() {
|
||||
const option = {
|
||||
title: {
|
||||
text: '漏斗图',
|
||||
subtext: '纯属虚构'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c}%"
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: {readOnly: false},
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['展现','点击','访问','咨询','订单']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '预期',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}预期'
|
||||
},
|
||||
emphasis: {
|
||||
position:'inside',
|
||||
formatter: '{b}预期: {c}%'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.7
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 60, name: '访问'},
|
||||
{value: 40, name: '咨询'},
|
||||
{value: 20, name: '订单'},
|
||||
{value: 80, name: '点击'},
|
||||
{value: 100, name: '展现'}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
maxSize: '80%',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inside',
|
||||
formatter: '{c}%',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
position:'inside',
|
||||
formatter: '{b}实际: {c}%'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 30, name: '访问'},
|
||||
{value: 10, name: '咨询'},
|
||||
{value: 5, name: '订单'},
|
||||
{value: 50, name: '点击'},
|
||||
{value: 80, name: '展现'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return option;
|
||||
},
|
||||
clickBtn: function() {
|
||||
window.open(this.refs.echarts_react.getEchartsInstance().getDataURL(), '_blank');
|
||||
},
|
||||
render: function() {
|
||||
let code = "<ReactEcharts ref='echartsInstance' \n" +
|
||||
" option={this.getOtion()} \n" +
|
||||
" height={300} /> \n" +
|
||||
"\n" +
|
||||
"// use echarts API: http://echarts.baidu.com/api.html#echartsInstance" +
|
||||
"this.refs.echarts_react.getEchartsInstance().getDataURL();";
|
||||
return (
|
||||
<div className='examples'>
|
||||
<div className='parent'>
|
||||
<label> use echarts API With <strong> getEchartsInstance() </strong>: (the API will return the echarts instance, then you can use any API of echarts.)</label>
|
||||
<ReactEcharts ref='echarts_react'
|
||||
option={this.getOtion()}
|
||||
height={300} />
|
||||
<div>
|
||||
<button className='a_line' onClick={this.clickBtn}>click here to get the DataURL of chart.</button>
|
||||
</div>
|
||||
<label> code below: (echarts API list see: http://echarts.baidu.com/api.html#echartsInstance)</label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default ChartAPIComponent;
|
||||
@ -4,6 +4,8 @@ import SimpleChartComponent from './SimpleChartComponent.jsx';
|
||||
import ChartWithEventComponent from './ChartWithEventComponent.jsx';
|
||||
import ThemeChartComponent from './ThemeChartComponent.jsx';
|
||||
import ChartShowLoadingComponent from './ChartShowLoadingComponent.jsx';
|
||||
import ChartAPIComponent from './ChartAPIComponent.jsx';
|
||||
|
||||
|
||||
const MainPageComponent = React.createClass({
|
||||
propTypes: {
|
||||
@ -15,6 +17,7 @@ const MainPageComponent = React.createClass({
|
||||
<h3> A very simple echarts(v3.0) wrapper for React. <a href='https://github.com/hustcc/echarts-for-react'>hustcc/echarts-for-react</a></h3>
|
||||
<SimpleChartComponent />
|
||||
<ChartShowLoadingComponent />
|
||||
<ChartAPIComponent />
|
||||
<ChartWithEventComponent />
|
||||
<ThemeChartComponent />
|
||||
|
||||
|
||||
@ -100,6 +100,11 @@ button:hover {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.a_line {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nsg-tag {
|
||||
border-color: #14204f;
|
||||
}
|
||||
|
||||
44
demo/dist/bundle.js
vendored
44
demo/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
@ -69,7 +69,7 @@ var ReactEcharts = _react2.default.createClass({
|
||||
// render the dom
|
||||
renderEchartDom: function renderEchartDom() {
|
||||
// init the echart object
|
||||
var echartObj = _echarts2.default.getInstanceByDom(this.refs.echartsDom) || _echarts2.default.init(this.refs.echartsDom, this.props.theme);
|
||||
var echartObj = this.getEchartsInstance();
|
||||
// set the echart option
|
||||
echartObj.setOption(this.props.option);
|
||||
|
||||
@ -78,6 +78,10 @@ var ReactEcharts = _react2.default.createClass({
|
||||
|
||||
return echartObj;
|
||||
},
|
||||
getEchartsInstance: function getEchartsInstance() {
|
||||
// return the echart object
|
||||
return _echarts2.default.getInstanceByDom(this.refs.echartsDom) || _echarts2.default.init(this.refs.echartsDom, this.props.theme);
|
||||
},
|
||||
render: function render() {
|
||||
var height = this.props.height;
|
||||
// for render
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "echarts-for-react",
|
||||
"version": "1.0.4",
|
||||
"version": "1.1.0",
|
||||
"description": "baidu Echarts(v3.0) components for react",
|
||||
"main": "lib/echarts-for-react",
|
||||
"scripts": {
|
||||
|
||||
@ -43,7 +43,7 @@ const ReactEcharts = React.createClass({
|
||||
// render the dom
|
||||
renderEchartDom() {
|
||||
// init the echart object
|
||||
let echartObj = echarts.getInstanceByDom(this.refs.echartsDom) || echarts.init(this.refs.echartsDom, this.props.theme);
|
||||
let echartObj = this.getEchartsInstance();
|
||||
// set the echart option
|
||||
echartObj.setOption(this.props.option);
|
||||
|
||||
@ -53,7 +53,10 @@ const ReactEcharts = React.createClass({
|
||||
|
||||
return echartObj;
|
||||
},
|
||||
|
||||
getEchartsInstance() {
|
||||
// return the echart object
|
||||
return echarts.getInstanceByDom(this.refs.echartsDom) || echarts.init(this.refs.echartsDom, this.props.theme);
|
||||
},
|
||||
render() {
|
||||
let { height } = this.props
|
||||
// for render
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user