├── .eslintignore ├── src ├── utils │ ├── bindEvents.js │ └── filterMap.js ├── components │ ├── Series.js │ ├── Bar.js │ ├── Line.js │ ├── Map.js │ ├── Pie.js │ ├── Graph.js │ ├── Cloud.js │ ├── ChartBase.js │ └── Chart.js └── index.js ├── .gitignore ├── lib ├── utils │ ├── bindEvents.js │ └── filterMap.js ├── components │ ├── Series.js │ ├── Bar.js │ ├── Map.js │ ├── Pie.js │ ├── Line.js │ ├── Graph.js │ ├── Cloud.js │ ├── ChartBase.js │ └── Chart.js └── index.js ├── .babelrc ├── example ├── index.html ├── app.js ├── server.js ├── line │ └── index.js ├── pie │ └── index.js ├── webpack.config.js ├── bar │ └── index.js ├── scatter │ └── index.js └── graph │ └── index.js ├── .eslintrc ├── CHANGELOG.md ├── LICENSE ├── package.json └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/utils/bindEvents.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | *.sh 3 | -------------------------------------------------------------------------------- /lib/utils/bindEvents.js: -------------------------------------------------------------------------------- 1 | "use strict"; -------------------------------------------------------------------------------- /src/components/Series.js: -------------------------------------------------------------------------------- 1 | import ChartBase from './ChartBase'; 2 | 3 | export default class chart extends ChartBase {} 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 0, 3 | "optional": "runtime", 4 | "loose": "all", 5 | "plugins": [ 6 | "typecheck" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Bar.js: -------------------------------------------------------------------------------- 1 | import ChartBase from './ChartBase'; 2 | 3 | export default class bar extends ChartBase { 4 | static defaultProps = { 5 | type: 'bar' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Line.js: -------------------------------------------------------------------------------- 1 | import ChartBase from './ChartBase'; 2 | 3 | export default class line extends ChartBase { 4 | static defaultProps = { 5 | type: 'line' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Map.js: -------------------------------------------------------------------------------- 1 | import ChartBase from './ChartBase'; 2 | 3 | export default class map extends ChartBase { 4 | static defaultProps = { 5 | type: 'map' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Pie.js: -------------------------------------------------------------------------------- 1 | import ChartBase from './ChartBase'; 2 | 3 | export default class pie extends ChartBase { 4 | static defaultProps = { 5 | type: 'pie' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Graph.js: -------------------------------------------------------------------------------- 1 | import ChartBase from './ChartBase'; 2 | 3 | export default class graph extends ChartBase { 4 | static defaultProps = { 5 | type: 'graph' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Cloud.js: -------------------------------------------------------------------------------- 1 | import ChartBase from './ChartBase'; 2 | 3 | export default class wordCloud extends ChartBase { 4 | static defaultProps = { 5 | type: 'wordCloud' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React echarts example 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /src/utils/filterMap.js: -------------------------------------------------------------------------------- 1 | export default function filterMap(filterArray, props) { 2 | const options = {}; 3 | filterArray.map((key) => { 4 | const option = props[key]; 5 | if (option !== undefined) { 6 | options[key] = option; 7 | } 8 | }); 9 | return options; 10 | } 11 | -------------------------------------------------------------------------------- /lib/utils/filterMap.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | exports.__esModule = true; 4 | exports["default"] = filterMap; 5 | 6 | function filterMap(filterArray, props) { 7 | var options = {}; 8 | filterArray.map(function (key) { 9 | var option = props[key]; 10 | if (option !== undefined) { 11 | options[key] = option; 12 | } 13 | }); 14 | return options; 15 | } 16 | 17 | module.exports = exports["default"]; -------------------------------------------------------------------------------- /src/components/ChartBase.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | export default class ChartBase extends Component { 4 | static propTypes = { 5 | hasChart: React.PropTypes.bool, 6 | }; 7 | 8 | constructor(props) { 9 | super(props); 10 | if (this.props.hasChart !== true) { 11 | throw new Error('There is no Chart wrapper.'); 12 | } 13 | } 14 | 15 | render() { 16 | return null; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Series from './components/Series'; 2 | import ChartLine from './components/Line'; 3 | import ChartPie from './components/Pie'; 4 | import ChartBar from './components/Bar'; 5 | import ChartCloud from './components/Cloud'; 6 | import ChartMap from './components/Map'; 7 | import ChartGraph from './components/Graph'; 8 | import Chart from './components/Chart'; 9 | 10 | Chart.Series = Series; 11 | Chart.Line = ChartLine; 12 | Chart.Pie = ChartPie; 13 | Chart.Bar = ChartBar; 14 | Chart.Cloud = ChartCloud; 15 | Chart.Map = ChartMap; 16 | Chart.Graph = ChartGraph; 17 | 18 | export default Chart; 19 | -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Router, { Route } from 'react-router'; 4 | import Line from './line'; 5 | import Bar from './bar'; 6 | import Pie from './pie'; 7 | import Graph from './graph'; 8 | import Scatter from './scatter'; 9 | 10 | ReactDOM.render(( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ), document.getElementById('chart')); 19 | 20 | -------------------------------------------------------------------------------- /example/server.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var WebpackDevServer = require('webpack-dev-server'); 4 | var config = require('./webpack.config'); 5 | 6 | new WebpackDevServer(webpack(config), { 7 | contentBase: __dirname, 8 | publicPath: config.output.publicPath, 9 | hot: true, 10 | historyApiFallback: true, 11 | stats: { 12 | colors: true 13 | }, 14 | headers: {"Access-Control-Allow-Origin": "*"} 15 | }).listen(8080, 'localhost', function (err) { 16 | if (err) { 17 | console.log(err); 18 | } 19 | console.log('✅ Server is listening at http://localhost:8080'); 20 | }); -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-airbnb", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "mocha": true, 7 | }, 8 | "rules": { 9 | "no-redeclare": 0, //暂时屏蔽该规则, 因为这会导致一个 bug: https://github.com/babel/babel-eslint/pull/209 10 | "react/jsx-uses-react": 2, 11 | "react/jsx-uses-vars": 2, 12 | "react/react-in-jsx-scope": 2, 13 | "react/jsx-quotes": 0, 14 | "jsx-quotes": 2, 15 | "comma-dangle": 0, 16 | "indent": [2, 2, {"SwitchCase": 1}], 17 | "no-console": 0, 18 | "no-alert": 0, 19 | "id-length": [2, {"min": 2, "max": 50, "properties": "never", "exceptions": ["$"]}] 20 | }, 21 | "plugins": [ 22 | "react" 23 | ], 24 | "globals": { 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /lib/components/Series.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 4 | 5 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 6 | 7 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 8 | 9 | exports.__esModule = true; 10 | 11 | var _ChartBase2 = require('./ChartBase'); 12 | 13 | var _ChartBase3 = _interopRequireDefault(_ChartBase2); 14 | 15 | var chart = (function (_ChartBase) { 16 | _inherits(chart, _ChartBase); 17 | 18 | function chart() { 19 | _classCallCheck(this, chart); 20 | 21 | _ChartBase.apply(this, arguments); 22 | } 23 | 24 | return chart; 25 | })(_ChartBase3['default']); 26 | 27 | exports['default'] = chart; 28 | module.exports = exports['default']; -------------------------------------------------------------------------------- /example/line/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from '../../src'; 3 | 4 | export default class App extends Component { 5 | ready(chart) { 6 | chart.on('click', ()=>{ 7 | alert('click'); 8 | }); 9 | } 10 | 11 | render() { 12 | const options = { 13 | legend: { 14 | data: ['最高气温', '最低气温'], 15 | }, 16 | xAxis: [{ 17 | type: 'category', 18 | boundaryGap: false, 19 | data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], 20 | }], 21 | yAxis: [{ 22 | type: 'value', 23 | axisLabel: { 24 | formatter: '{value} °C' 25 | } 26 | }], 27 | }; 28 | return ( 29 | 30 | 33 | 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | v0.1.0 2 | --------------------------------------- 3 | 4 | - [added] 添加折线图 5 | - [added] 添加柱状图 6 | - [added] 添加饼图 7 | - [added] 添加地图 8 | - [added] 添加标签云 9 | 10 | v0.1.1 11 | --------------------------------------- 12 | 13 | - [fixed] 部分series无法传入 14 | 15 | v0.1.2 16 | --------------------------------------- 17 | 18 | - [added] 添加Chart组件，用于传入type，默认暴露Charts 19 | 20 | v0.1.3 21 | --------------------------------------- 22 | 23 | - [fixed] 去掉echarts渲染的setTimeout，多次渲染会有问题 24 | 25 | v0.1.4 26 | --------------------------------------- 27 | 28 | - [fixed] 图表类型改为默认props，从class的名称拿在压缩时会有问题 29 | 30 | v0.1.5 31 | --------------------------------------- 32 | 33 | - [added] 添加onready属性，里面暴露echarts对象，可在里面进行事件绑定等操作 34 | 35 | v0.2.0 36 | --------------------------------------- 37 | 38 | - [update] 升级为echarts3 39 | 40 | v0.3.0 41 | --------------------------------------- 42 | 43 | - [update] 向下兼容echarts原生写法 44 | 45 | v0.3.1 46 | --------------------------------------- 47 | 48 | - [fixed] 修复onReady只执行一次的bug 49 | -------------------------------------------------------------------------------- /lib/components/Bar.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 4 | 5 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 6 | 7 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 8 | 9 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 10 | 11 | exports.__esModule = true; 12 | 13 | var _ChartBase2 = require('./ChartBase'); 14 | 15 | var _ChartBase3 = _interopRequireDefault(_ChartBase2); 16 | 17 | var bar = (function (_ChartBase) { 18 | _inherits(bar, _ChartBase); 19 | 20 | function bar() { 21 | _classCallCheck(this, bar); 22 | 23 | _ChartBase.apply(this, arguments); 24 | } 25 | 26 | _createClass(bar, null, [{ 27 | key: 'defaultProps', 28 | value: { 29 | type: 'bar' 30 | }, 31 | enumerable: true 32 | }]); 33 | 34 | return bar; 35 | })(_ChartBase3['default']); 36 | 37 | exports['default'] = bar; 38 | module.exports = exports['default']; -------------------------------------------------------------------------------- /lib/components/Map.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 4 | 5 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 6 | 7 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 8 | 9 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 10 | 11 | exports.__esModule = true; 12 | 13 | var _ChartBase2 = require('./ChartBase'); 14 | 15 | var _ChartBase3 = _interopRequireDefault(_ChartBase2); 16 | 17 | var map = (function (_ChartBase) { 18 | _inherits(map, _ChartBase); 19 | 20 | function map() { 21 | _classCallCheck(this, map); 22 | 23 | _ChartBase.apply(this, arguments); 24 | } 25 | 26 | _createClass(map, null, [{ 27 | key: 'defaultProps', 28 | value: { 29 | type: 'map' 30 | }, 31 | enumerable: true 32 | }]); 33 | 34 | return map; 35 | })(_ChartBase3['default']); 36 | 37 | exports['default'] = map; 38 | module.exports = exports['default']; -------------------------------------------------------------------------------- /lib/components/Pie.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 4 | 5 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 6 | 7 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 8 | 9 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 10 | 11 | exports.__esModule = true; 12 | 13 | var _ChartBase2 = require('./ChartBase'); 14 | 15 | var _ChartBase3 = _interopRequireDefault(_ChartBase2); 16 | 17 | var pie = (function (_ChartBase) { 18 | _inherits(pie, _ChartBase); 19 | 20 | function pie() { 21 | _classCallCheck(this, pie); 22 | 23 | _ChartBase.apply(this, arguments); 24 | } 25 | 26 | _createClass(pie, null, [{ 27 | key: 'defaultProps', 28 | value: { 29 | type: 'pie' 30 | }, 31 | enumerable: true 32 | }]); 33 | 34 | return pie; 35 | })(_ChartBase3['default']); 36 | 37 | exports['default'] = pie; 38 | module.exports = exports['default']; -------------------------------------------------------------------------------- /lib/components/Line.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 4 | 5 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 6 | 7 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 8 | 9 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 10 | 11 | exports.__esModule = true; 12 | 13 | var _ChartBase2 = require('./ChartBase'); 14 | 15 | var _ChartBase3 = _interopRequireDefault(_ChartBase2); 16 | 17 | var line = (function (_ChartBase) { 18 | _inherits(line, _ChartBase); 19 | 20 | function line() { 21 | _classCallCheck(this, line); 22 | 23 | _ChartBase.apply(this, arguments); 24 | } 25 | 26 | _createClass(line, null, [{ 27 | key: 'defaultProps', 28 | value: { 29 | type: 'line' 30 | }, 31 | enumerable: true 32 | }]); 33 | 34 | return line; 35 | })(_ChartBase3['default']); 36 | 37 | exports['default'] = line; 38 | module.exports = exports['default']; -------------------------------------------------------------------------------- /lib/components/Graph.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 4 | 5 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 6 | 7 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 8 | 9 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 10 | 11 | exports.__esModule = true; 12 | 13 | var _ChartBase2 = require('./ChartBase'); 14 | 15 | var _ChartBase3 = _interopRequireDefault(_ChartBase2); 16 | 17 | var graph = (function (_ChartBase) { 18 | _inherits(graph, _ChartBase); 19 | 20 | function graph() { 21 | _classCallCheck(this, graph); 22 | 23 | _ChartBase.apply(this, arguments); 24 | } 25 | 26 | _createClass(graph, null, [{ 27 | key: 'defaultProps', 28 | value: { 29 | type: 'graph' 30 | }, 31 | enumerable: true 32 | }]); 33 | 34 | return graph; 35 | })(_ChartBase3['default']); 36 | 37 | exports['default'] = graph; 38 | module.exports = exports['default']; -------------------------------------------------------------------------------- /lib/components/Cloud.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 4 | 5 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 6 | 7 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 8 | 9 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 10 | 11 | exports.__esModule = true; 12 | 13 | var _ChartBase2 = require('./ChartBase'); 14 | 15 | var _ChartBase3 = _interopRequireDefault(_ChartBase2); 16 | 17 | var wordCloud = (function (_ChartBase) { 18 | _inherits(wordCloud, _ChartBase); 19 | 20 | function wordCloud() { 21 | _classCallCheck(this, wordCloud); 22 | 23 | _ChartBase.apply(this, arguments); 24 | } 25 | 26 | _createClass(wordCloud, null, [{ 27 | key: 'defaultProps', 28 | value: { 29 | type: 'wordCloud' 30 | }, 31 | enumerable: true 32 | }]); 33 | 34 | return wordCloud; 35 | })(_ChartBase3['default']); 36 | 37 | exports['default'] = wordCloud; 38 | module.exports = exports['default']; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /lib/components/ChartBase.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 4 | 5 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 6 | 7 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 8 | 9 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 10 | 11 | exports.__esModule = true; 12 | 13 | var _react = require('react'); 14 | 15 | var _react2 = _interopRequireDefault(_react); 16 | 17 | var ChartBase = (function (_Component) { 18 | _inherits(ChartBase, _Component); 19 | 20 | _createClass(ChartBase, null, [{ 21 | key: 'propTypes', 22 | value: { 23 | hasChart: _react2['default'].PropTypes.bool 24 | }, 25 | enumerable: true 26 | }]); 27 | 28 | function ChartBase(props) { 29 | _classCallCheck(this, ChartBase); 30 | 31 | _Component.call(this, props); 32 | if (this.props.hasChart !== true) { 33 | throw new Error('There is no Chart wrapper.'); 34 | } 35 | } 36 | 37 | ChartBase.prototype.render = function render() { 38 | return null; 39 | }; 40 | 41 | return ChartBase; 42 | })(_react.Component); 43 | 44 | exports['default'] = ChartBase; 45 | module.exports = exports['default']; -------------------------------------------------------------------------------- /example/pie/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from '../../src'; 3 | 4 | export default class App extends Component { 5 | 6 | render() { 7 | const options = { 8 | title : { 9 | text: '某站点用户访问来源', 10 | subtext: '纯属虚构', 11 | x:'center' 12 | }, 13 | tooltip : { 14 | trigger: 'item', 15 | formatter: "{a}
{b} : {c} ({d}%)" 16 | }, 17 | legend: { 18 | orient: 'vertical', 19 | left: 'left', 20 | data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] 21 | }, 22 | }; 23 | return ( 24 | 25 | 44 | 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | var webpack = require('webpack'); 4 | var babelrc = fs.readFileSync(path.join(__dirname, '../.babelrc')); 5 | var babelLoaderQuery = {}; 6 | 7 | try { 8 | babelLoaderQuery = JSON.parse(babelrc); 9 | } catch (err) { 10 | console.error('ERROR: Error parsing your .babelrc.'); 11 | console.error(err); 12 | } 13 | 14 | babelLoaderQuery.plugins = babelLoaderQuery.plugins || []; 15 | babelLoaderQuery.plugins.push('react-transform'); 16 | babelLoaderQuery.extra = babelLoaderQuery.extra || {}; 17 | babelLoaderQuery.extra['react-transform'] = { 18 | transforms: [{ 19 | transform: 'react-transform-hmr', 20 | imports: ['react'], 21 | locals: ['module'] 22 | }] 23 | }; 24 | 25 | module.exports = { 26 | devtool: 'cheap-module-eval-source-map', 27 | entry: [ 28 | 'webpack-dev-server/client?http://localhost:8080', 29 | 'webpack/hot/only-dev-server', 30 | path.join(__dirname, './app') 31 | ], 32 | output: { 33 | path: path.join(__dirname, 'debug'), 34 | filename: 'index.js', 35 | publicPath: 'http://localhost:8080/' 36 | }, 37 | plugins: [ 38 | new webpack.HotModuleReplacementPlugin() 39 | ], 40 | module: { 41 | loaders: [ 42 | { test: /\.js$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery)] } 43 | ] 44 | } 45 | }; 46 | 47 | -------------------------------------------------------------------------------- /example/bar/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from '../../src'; 3 | 4 | export default class App extends Component { 5 | 6 | render() { 7 | const options = { 8 | title : { 9 | text: '某地区蒸发量和降水量', 10 | subtext: '纯属虚构' 11 | }, 12 | tooltip : { 13 | trigger: 'axis' 14 | }, 15 | legend: { 16 | data:['蒸发量','降水量'] 17 | }, 18 | toolbox: { 19 | show : true, 20 | feature : { 21 | dataView : {show: true, readOnly: false}, 22 | magicType : {show: true, type: ['line', 'bar']}, 23 | restore : {show: true}, 24 | saveAsImage : {show: true} 25 | } 26 | }, 27 | calculable : true, 28 | xAxis : [ 29 | { 30 | type : 'category', 31 | data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] 32 | } 33 | ], 34 | yAxis : [ 35 | { 36 | type : 'value' 37 | } 38 | ] 39 | }; 40 | return ( 41 | 42 | 51 | 54 | 55 | ); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rc-echarts", 3 | "version": "0.3.1", 4 | "description": "react echarts", 5 | "keywords": [ 6 | "react", 7 | "echarts", 8 | "chart", 9 | "charts" 10 | ], 11 | "author": { 12 | "name": "somonus", 13 | "email": "guiqi.zh@gmail.com" 14 | }, 15 | "homepage": "https://github.com/somonus/react-echarts", 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/somonus/react-echarts.git" 19 | }, 20 | "main": "lib/index.js", 21 | "license": [ 22 | { 23 | "type": "MIT", 24 | "url": "http://mit-license.org" 25 | } 26 | ], 27 | "dependencies": { 28 | "echarts": "3.1.10", 29 | "babel-runtime": "5.8.25" 30 | }, 31 | "peerDependencies": { 32 | "react": ">=0.14.2", 33 | "react-dom": ">=0.14.2" 34 | }, 35 | "devDependencies": { 36 | "babel": "5.8.23", 37 | "babel-core": "5.8.25", 38 | "babel-eslint": "4.1.3", 39 | "babel-loader": "5.3.2", 40 | "babel-plugin-react-transform": "1.1.1", 41 | "babel-plugin-typecheck": "1.3.0", 42 | "eslint": "1.6.0", 43 | "eslint-config-airbnb": "0.1.0", 44 | "eslint-loader": "1.0.0", 45 | "eslint-plugin-react": "3.5.0", 46 | "lodash": "~3.10.1", 47 | "react-hot-loader": "1.3.0", 48 | "react-kendo": "~0.13.11", 49 | "react-router": "1.0.0", 50 | "react-transform-catch-errors": "~1.0.1", 51 | "react-transform-hmr": "~1.0.1", 52 | "webpack": "1.12.4", 53 | "webpack-dev-server": "1.12.1" 54 | }, 55 | "scripts": { 56 | "build": "rm -rf lib && node_modules/.bin/babel src --out-dir lib", 57 | "start": "node example/server.js" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 4 | 5 | exports.__esModule = true; 6 | 7 | var _componentsSeries = require('./components/Series'); 8 | 9 | var _componentsSeries2 = _interopRequireDefault(_componentsSeries); 10 | 11 | var _componentsLine = require('./components/Line'); 12 | 13 | var _componentsLine2 = _interopRequireDefault(_componentsLine); 14 | 15 | var _componentsPie = require('./components/Pie'); 16 | 17 | var _componentsPie2 = _interopRequireDefault(_componentsPie); 18 | 19 | var _componentsBar = require('./components/Bar'); 20 | 21 | var _componentsBar2 = _interopRequireDefault(_componentsBar); 22 | 23 | var _componentsCloud = require('./components/Cloud'); 24 | 25 | var _componentsCloud2 = _interopRequireDefault(_componentsCloud); 26 | 27 | var _componentsMap = require('./components/Map'); 28 | 29 | var _componentsMap2 = _interopRequireDefault(_componentsMap); 30 | 31 | var _componentsGraph = require('./components/Graph'); 32 | 33 | var _componentsGraph2 = _interopRequireDefault(_componentsGraph); 34 | 35 | var _componentsChart = require('./components/Chart'); 36 | 37 | var _componentsChart2 = _interopRequireDefault(_componentsChart); 38 | 39 | _componentsChart2['default'].Series = _componentsSeries2['default']; 40 | _componentsChart2['default'].Line = _componentsLine2['default']; 41 | _componentsChart2['default'].Pie = _componentsPie2['default']; 42 | _componentsChart2['default'].Bar = _componentsBar2['default']; 43 | _componentsChart2['default'].Cloud = _componentsCloud2['default']; 44 | _componentsChart2['default'].Map = _componentsMap2['default']; 45 | _componentsChart2['default'].Graph = _componentsGraph2['default']; 46 | 47 | exports['default'] = _componentsChart2['default']; 48 | module.exports = exports['default']; -------------------------------------------------------------------------------- /example/scatter/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from '../../src'; 3 | 4 | export default class App extends Component { 5 | render() { 6 | const options = { 7 | title: { 8 | text: '大规模散点图' 9 | }, 10 | tooltip : { 11 | trigger: 'axis', 12 | showDelay : 0, 13 | axisPointer:{ 14 | show: true, 15 | type : 'cross', 16 | lineStyle: { 17 | type : 'dashed', 18 | width : 1 19 | } 20 | }, 21 | zlevel: 1 22 | }, 23 | legend: { 24 | data:['sin','cos'] 25 | }, 26 | toolbox: { 27 | show : true, 28 | feature : { 29 | mark : {show: true}, 30 | dataZoom : {show: true}, 31 | dataView : {show: true, readOnly: false}, 32 | restore : {show: true}, 33 | saveAsImage : {show: true} 34 | } 35 | }, 36 | xAxis : [ 37 | { 38 | type : 'value', 39 | scale:true 40 | } 41 | ], 42 | yAxis : [ 43 | { 44 | type : 'value', 45 | scale:true 46 | } 47 | ], 48 | series : [ 49 | { 50 | name:'sin', 51 | type:'scatter', 52 | large: true, 53 | symbolSize: 3, 54 | data: (function () { 55 | var d = []; 56 | var len = 10000; 57 | var x = 0; 58 | while (len--) { 59 | x = (Math.random() * 10).toFixed(3) - 0; 60 | d.push([ 61 | x, 62 | //Math.random() * 10 63 | (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0 64 | ]); 65 | } 66 | //console.log(d) 67 | return d; 68 | })() 69 | }, 70 | { 71 | name:'cos', 72 | type:'scatter', 73 | large: true, 74 | symbolSize: 2, 75 | data: (function () { 76 | var d = []; 77 | var len = 20000; 78 | var x = 0; 79 | while (len--) { 80 | x = (Math.random() * 10).toFixed(3) - 0; 81 | d.push([ 82 | x, 83 | //Math.random() * 10 84 | (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0 85 | ]); 86 | } 87 | //console.log(d) 88 | return d; 89 | })() 90 | } 91 | ] 92 | }; 93 | 94 | return ( 95 | 96 | ); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /example/graph/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Chart from '../../src'; 3 | 4 | export default class App extends Component { 5 | ready(chart) { 6 | chart.on('click', (params)=>{ 7 | console.log(params); 8 | if (params.seriesType === 'graph') { 9 | if (params.dataType === 'edge') { 10 | alert("line" + params.name); 11 | } 12 | else { 13 | alert("node" + params.name); 14 | } 15 | } 16 | }); 17 | } 18 | 19 | render() { 20 | const options = { 21 | title : { 22 | text: '某站点用户访问来源', 23 | x:'center' 24 | }, 25 | tooltip : { 26 | trigger: 'item', 27 | formatter: "{a}
{b} : {c} ({d}%)" 28 | }, 29 | legend: { 30 | orient: 'vertical', 31 | left: 'left', 32 | data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] 33 | }, 34 | series: [{ 35 | type: 'graph', 36 | layout: 'none', 37 | symbolSize: 50, 38 | roam: true, 39 | label: { 40 | normal: { 41 | show: true 42 | } 43 | }, 44 | edgeSymbol: ['circle', 'arrow'], 45 | edgeSymbolSize: [4, 10], 46 | edgeLabel: { 47 | normal: { 48 | textStyle: { 49 | fontSize: 20 50 | } 51 | } 52 | }, 53 | data: [{ 54 | name: '节点1', 55 | x: 300, 56 | y: 300 57 | }, { 58 | name: '节点2', 59 | x: 800, 60 | y: 300 61 | }, { 62 | name: '节点3', 63 | x: 550, 64 | y: 100 65 | }, { 66 | name: '节点4', 67 | x: 550, 68 | y: 500 69 | }], 70 | // links: [], 71 | links: [{ 72 | source: 0, 73 | target: 1, 74 | symbolSize: [5, 20], 75 | label: { 76 | normal: { 77 | show: true 78 | } 79 | }, 80 | lineStyle: { 81 | normal: { 82 | width: 5, 83 | curveness: 0.2 84 | } 85 | } 86 | }, { 87 | source: '节点2', 88 | target: '节点1', 89 | label: { 90 | normal: { 91 | show: true 92 | } 93 | }, 94 | lineStyle: { 95 | normal: { curveness: 0.2 } 96 | } 97 | }, { 98 | source: '节点1', 99 | target: '节点3' 100 | }, { 101 | source: '节点2', 102 | target: '节点3' 103 | }, { 104 | source: '节点2', 105 | target: '节点4' 106 | }, { 107 | source: '节点1', 108 | target: '节点4' 109 | }], 110 | lineStyle: { 111 | normal: { 112 | opacity: 0.9, 113 | width: 2, 114 | curveness: 0 115 | } 116 | } 117 | }] 118 | }; 119 | 120 | return ( 121 | 122 | ); 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /src/components/Chart.js: -------------------------------------------------------------------------------- 1 | import React, { Component, cloneElement } from 'react'; 2 | import echarts from 'echarts'; 3 | import filterMap from '../utils/filterMap'; 4 | 5 | export default class Charts extends Component { 6 | static propTypes = { 7 | height: React.PropTypes.number, 8 | width: React.PropTypes.number, 9 | backgroundColor: React.PropTypes.string, 10 | animation: React.PropTypes.bool, 11 | calculable: React.PropTypes.bool, 12 | renderAsImage: React.PropTypes.bool, 13 | style: React.PropTypes.object, 14 | theme: React.PropTypes.object, 15 | timeline: React.PropTypes.object, 16 | title: React.PropTypes.object, 17 | toolbox: React.PropTypes.object, 18 | tooltip: React.PropTypes.object, 19 | legend: React.PropTypes.object, 20 | dataRange: React.PropTypes.object, 21 | dataZoom: React.PropTypes.object, 22 | roamController: React.PropTypes.object, 23 | grid: React.PropTypes.object, 24 | color: React.PropTypes.array, 25 | children: React.PropTypes.node, 26 | xAxis: React.PropTypes.oneOfType([ 27 | React.PropTypes.object, 28 | React.PropTypes.array, 29 | ]), 30 | yAxis: React.PropTypes.oneOfType([ 31 | React.PropTypes.object, 32 | React.PropTypes.array, 33 | ]), 34 | onReady: React.PropTypes.func, 35 | }; 36 | 37 | static defaultProps = { 38 | height: 400, 39 | }; 40 | 41 | constructor(props) { 42 | super(props); 43 | } 44 | 45 | componentDidMount() { 46 | const { onReady } = this.props; 47 | this.drawChart(); 48 | if (onReady) { 49 | onReady(this.chart); 50 | } 51 | } 52 | 53 | componentDidUpdate(prevProps) { 54 | const { onReady } = this.props; 55 | 56 | if (this.props.options) { 57 | if (prevProps.options !== this.props.options) { 58 | this.drawChart(); 59 | if (onReady) { 60 | onReady(this.chart); 61 | } 62 | } 63 | } else { 64 | const prevPropsArray = React.Children.map(prevProps.children, (preChild) => preChild.props); 65 | const propsArray = React.Children.map(this.props.children, (child) => child.props); 66 | propsArray.map((props, index) => { 67 | if (props !== prevPropsArray[index]) { 68 | this.drawChart(); 69 | if (onReady) { 70 | onReady(this.chart); 71 | } 72 | } 73 | }); 74 | } 75 | } 76 | 77 | componentWillUnmount() { 78 | this.chart.dispose(); 79 | } 80 | 81 | getChartData(options) { 82 | options.series = []; 83 | React.Children.map(this.props.children, (child) => { 84 | options.series.push({...child.props}); 85 | }); 86 | } 87 | 88 | drawChart() { 89 | const node = this.refs.chart; 90 | let options; 91 | if (this.props.options) { 92 | options = this.props.options; 93 | } else { 94 | options = filterMap([ 95 | 'backgroundColor', 96 | 'animation', 97 | 'calculable', 98 | 'renderAsImage', 99 | 'timeline', 100 | 'title', 101 | 'toolbox', 102 | 'tooltip', 103 | 'legend', 104 | 'dataRange', 105 | 'dataZoom', 106 | 'roamController', 107 | 'grid', 108 | 'color', 109 | 'xAxis', 110 | 'yAxis', 111 | 'series', 112 | ], this.props); 113 | this.getChartData(options); 114 | } 115 | const chart = echarts.getInstanceByDom(node); 116 | if (!chart) { 117 | this.chart = echarts.init(node); 118 | } 119 | this.chart.setOption(options, this.props.theme); 120 | } 121 | 122 | renderChildren() { 123 | return React.Children.map(this.props.children, (child) => { 124 | return cloneElement(child, { 125 | hasChart: true 126 | }); 127 | }); 128 | } 129 | 130 | render() { 131 | const { width, height, style, ...props } = this.props; 132 | return ( 133 |
141 | {this.renderChildren()} 142 |
143 | ); 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # rc-echarts 2 | 3 | [![NPM Version](https://img.shields.io/npm/v/rc-echarts.svg?style=flat)](https://www.npmjs.org/package/rc-echarts) 4 | [![npm](https://img.shields.io/npm/dm/rc-echarts.svg?style=flat)](https://www.npmjs.org/package/rc-echarts) 5 | 6 | ## install 7 | 8 | $ npm install rc-echarts 9 | 10 | ## Usage 11 | 12 | ###用法一 13 | 14 | 完全和echarts一致，将echarts的options传给组件。通过onReady能获取到echarts对象，从而进行绑定事件等一系列操作。 15 | 16 | ```js 17 | import Chart from 'rc-echarts'; 18 | import React from 'react'; 19 | import ReactDOM from 'react-dom'; 20 | 21 | const myChart = React.creatClass({ 22 | ready(echart) { 23 | console.log(echart); 24 | echart.on('click', (params)=>{ 25 | console.log(params); 26 | alert("click"); 27 | }); 28 | } 29 | 30 | render() { 31 | 32 | } 33 | }) 34 | ReactDOM.render(, container); 35 | 36 | ``` 37 | 38 | ###用法二 39 | 40 | 将options中的series抽离成单独的react组件。 41 | 42 | 注：以下示例中，options为echarts官方的options除了series的所有选项，详见[文档](http://echarts.baidu.com/option.html)。series为echarts官方series的选项，详见[文档](http://echarts.baidu.com/option.html#series) 43 | 44 | *折线图* 45 | ```js 46 | import Chart from 'rc-echarts'; 47 | import React from 'react'; 48 | import ReactDOM from 'react-dom'; 49 | 50 | const myChart = React.creatClass({ 51 | render() { 52 | 53 | 54 | 55 | 56 | } 57 | }) 58 | ReactDOM.render(, container); 59 | 60 | ``` 61 | 62 | *柱状图* 63 | ```js 64 | import Chart from 'rc-echarts'; 65 | import React from 'react'; 66 | import ReactDOM from 'react-dom'; 67 | 68 | const myChart = React.creatClass({ 69 | render() { 70 | 71 | 72 | 73 | } 74 | }) 75 | ReactDOM.render(, container); 76 | ``` 77 | 78 | *饼图* 79 | ```js 80 | import Chart from 'rc-echarts'; 81 | import React from 'react'; 82 | import ReactDOM from 'react-dom'; 83 | 84 | const myChart = React.creatClass({ 85 | render() { 86 | 87 | 88 | 89 | } 90 | }) 91 | ReactDOM.render(, container); 92 | ``` 93 | 94 | *标签云图* 95 | ```js 96 | import Chart from 'rc-echarts'; 97 | import React from 'react'; 98 | import ReactDOM from 'react-dom'; 99 | 100 | const myChart = React.creatClass({ 101 | render() { 102 | 103 | 104 | 105 | } 106 | }) 107 | ReactDOM.render(, container); 108 | ``` 109 | 110 | *地图* 111 | ```js 112 | import Chart from 'rc-echarts'; 113 | import React from 'react'; 114 | import ReactDOM from 'react-dom'; 115 | 116 | const myChart = React.creatClass({ 117 | render() { 118 | 119 | 120 | 121 | } 122 | }) 123 | ReactDOM.render(, container); 124 | ``` 125 | *未指定类型的series* 126 | 127 | 如果想要导入非前面几种类型的图表，可使用Chart.Series。自己指定类型。 128 | 129 | ```js 130 | import Chart from 'rc-echarts'; 131 | import React from 'react'; 132 | import ReactDOM from 'react-dom'; 133 | 134 | const myChart = React.creatClass({ 135 | render() { 136 | 137 | 138 | 139 | } 140 | }) 141 | ReactDOM.render(, container); 142 | ``` 143 | 144 | *获取echarts对象* 145 | 146 | 可使用onReady属性来获取echarts对象，对其进行官方提供的各种操作，如绑定事件等。 147 | 148 | ```js 149 | import Chart from 'rc-echarts'; 150 | import React from 'react'; 151 | import ReactDOM from 'react-dom'; 152 | 153 | const myChart = React.creatClass({ 154 | ready(chart) { 155 | chart.on('click', ()=>{ 156 | alert('click'); 157 | }); 158 | } 159 | 160 | render() { 161 | const options = { 162 | legend: { 163 | data: ['最高气温', '最低气温'], 164 | }, 165 | xAxis: [{ 166 | type: 'category', 167 | boundaryGap: false, 168 | data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], 169 | }], 170 | yAxis: [{ 171 | type: 'value', 172 | axisLabel: { 173 | formatter: '{value} °C' 174 | } 175 | }], 176 | }; 177 | return ( 178 | 179 | 182 | 185 | 186 | ); 187 | } 188 | }) 189 | ReactDOM.render(, container); 190 | ``` 191 | 192 | ##Example 193 | 194 | *run demo* 195 | 196 | ``` 197 | npm install 198 | npm start 199 | ``` 200 | open [http://localhost:8080/](http://localhost:8080/) 201 | 202 | ## License 203 | 204 | rc-echart is released under the MIT license. 205 | -------------------------------------------------------------------------------- /lib/components/Chart.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _inherits = require('babel-runtime/helpers/inherits')['default']; 4 | 5 | var _createClass = require('babel-runtime/helpers/create-class')['default']; 6 | 7 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default']; 8 | 9 | var _extends = require('babel-runtime/helpers/extends')['default']; 10 | 11 | var _objectWithoutProperties = require('babel-runtime/helpers/object-without-properties')['default']; 12 | 13 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default']; 14 | 15 | exports.__esModule = true; 16 | 17 | var _react = require('react'); 18 | 19 | var _react2 = _interopRequireDefault(_react); 20 | 21 | var _echarts = require('echarts'); 22 | 23 | var _echarts2 = _interopRequireDefault(_echarts); 24 | 25 | var _utilsFilterMap = require('../utils/filterMap'); 26 | 27 | var _utilsFilterMap2 = _interopRequireDefault(_utilsFilterMap); 28 | 29 | var Charts = (function (_Component) { 30 | _inherits(Charts, _Component); 31 | 32 | _createClass(Charts, null, [{ 33 | key: 'propTypes', 34 | value: { 35 | height: _react2['default'].PropTypes.number, 36 | width: _react2['default'].PropTypes.number, 37 | backgroundColor: _react2['default'].PropTypes.string, 38 | animation: _react2['default'].PropTypes.bool, 39 | calculable: _react2['default'].PropTypes.bool, 40 | renderAsImage: _react2['default'].PropTypes.bool, 41 | style: _react2['default'].PropTypes.object, 42 | theme: _react2['default'].PropTypes.object, 43 | timeline: _react2['default'].PropTypes.object, 44 | title: _react2['default'].PropTypes.object, 45 | toolbox: _react2['default'].PropTypes.object, 46 | tooltip: _react2['default'].PropTypes.object, 47 | legend: _react2['default'].PropTypes.object, 48 | dataRange: _react2['default'].PropTypes.object, 49 | dataZoom: _react2['default'].PropTypes.object, 50 | roamController: _react2['default'].PropTypes.object, 51 | grid: _react2['default'].PropTypes.object, 52 | color: _react2['default'].PropTypes.array, 53 | children: _react2['default'].PropTypes.node, 54 | xAxis: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.object, _react2['default'].PropTypes.array]), 55 | yAxis: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.object, _react2['default'].PropTypes.array]), 56 | onReady: _react2['default'].PropTypes.func 57 | }, 58 | enumerable: true 59 | }, { 60 | key: 'defaultProps', 61 | value: { 62 | height: 400 63 | }, 64 | enumerable: true 65 | }]); 66 | 67 | function Charts(props) { 68 | _classCallCheck(this, Charts); 69 | 70 | _Component.call(this, props); 71 | } 72 | 73 | Charts.prototype.componentDidMount = function componentDidMount() { 74 | var onReady = this.props.onReady; 75 | 76 | this.drawChart(); 77 | if (onReady) { 78 | onReady(this.chart); 79 | } 80 | }; 81 | 82 | Charts.prototype.componentDidUpdate = function componentDidUpdate(prevProps) { 83 | var _this = this; 84 | 85 | var onReady = this.props.onReady; 86 | 87 | if (this.props.options) { 88 | if (prevProps.options !== this.props.options) { 89 | this.drawChart(); 90 | if (onReady) { 91 | onReady(this.chart); 92 | } 93 | } 94 | } else { 95 | (function () { 96 | var prevPropsArray = _react2['default'].Children.map(prevProps.children, function (preChild) { 97 | return preChild.props; 98 | }); 99 | var propsArray = _react2['default'].Children.map(_this.props.children, function (child) { 100 | return child.props; 101 | }); 102 | propsArray.map(function (props, index) { 103 | if (props !== prevPropsArray[index]) { 104 | _this.drawChart(); 105 | if (onReady) { 106 | onReady(_this.chart); 107 | } 108 | } 109 | }); 110 | })(); 111 | } 112 | }; 113 | 114 | Charts.prototype.componentWillUnmount = function componentWillUnmount() { 115 | this.chart.dispose(); 116 | }; 117 | 118 | Charts.prototype.getChartData = function getChartData(options) { 119 | options.series = []; 120 | _react2['default'].Children.map(this.props.children, function (child) { 121 | options.series.push(_extends({}, child.props)); 122 | }); 123 | }; 124 | 125 | Charts.prototype.drawChart = function drawChart() { 126 | var node = this.refs.chart; 127 | var options = undefined; 128 | if (this.props.options) { 129 | options = this.props.options; 130 | } else { 131 | options = _utilsFilterMap2['default'](['backgroundColor', 'animation', 'calculable', 'renderAsImage', 'timeline', 'title', 'toolbox', 'tooltip', 'legend', 'dataRange', 'dataZoom', 'roamController', 'grid', 'color', 'xAxis', 'yAxis', 'series'], this.props); 132 | this.getChartData(options); 133 | } 134 | this.chart = _echarts2['default'].init(node); 135 | this.chart.setOption(options, this.props.theme); 136 | }; 137 | 138 | Charts.prototype.renderChildren = function renderChildren() { 139 | return _react2['default'].Children.map(this.props.children, function (child) { 140 | return _react.cloneElement(child, { 141 | hasChart: true 142 | }); 143 | }); 144 | }; 145 | 146 | Charts.prototype.render = function render() { 147 | var _props = this.props; 148 | var width = _props.width; 149 | var height = _props.height; 150 | var style = _props.style; 151 | 152 | var props = _objectWithoutProperties(_props, ['width', 'height', 'style']); 153 | 154 | return _react2['default'].createElement( 155 | 'div', 156 | _extends({ 157 | ref: 'chart', 158 | style: _extends({ 159 | height: height, 160 | width: width 161 | }, style) 162 | }, props), 163 | this.renderChildren() 164 | ); 165 | }; 166 | 167 | return Charts; 168 | })(_react.Component); 169 | 170 | exports['default'] = Charts; 171 | module.exports = exports['default']; --------------------------------------------------------------------------------