add props opts for echarts@4.x svg renderer, #138

Author: hustcc

README.md

@@ -39,7 +39,8 @@ import ReactEcharts from 'echarts-for-react';  // or var ReactEcharts = require(
   lazyUpdate={true}
   theme={"theme_name"}
   onChartReady={this.onChartReadyCallback}
-  onEvents={EventsDict} />
+  onEvents={EventsDict}
+  opts={} />
 ```
 
 ### typescript
@@ -49,12 +50,13 @@ 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} />
+  option={this.getOption()}
+  notMerge={true}
+  lazyUpdate={true}
+  theme={"theme_name"}
+  onChartReady={this.onChartReadyCallback}
+  onEvents={EventsDict}
+  opts={} />
 ```
 
 If you have only used bar chart (or others), you can import echarts modules manually to reduce bundle file size, e.g.
@@ -77,7 +79,8 @@ import 'echarts/lib/component/tooltip';
   lazyUpdate={true}
   theme={"theme_name"}
   onChartReady={this.onChartReadyCallback}
-  onEvents={EventsDict} />
+  onEvents={EventsDict}
+  opts={} />
 ```
 
 
@@ -107,7 +110,6 @@ the `class` of echarts div. you can setting the css style of charts by class nam
 
 the `theme` of echarts. `string`, should `registerTheme` before use it (theme object format: [https://github.com/ecomfe/echarts/blob/master/theme/dark.js](https://github.com/ecomfe/echarts/blob/master/theme/dark.js)). e.g.
 
-
 ```js
 // import echarts
 import echarts from 'echarts';
@@ -154,6 +156,18 @@ let onEvents = {
 ```
 for more event key name, see: [http://echarts.baidu.com/api.html#events](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](http://echarts.baidu.com/api.html#echarts.init).
+
+```js
+<ReactEcharts
+  option={this.getOption()}
+  style={{height: '300px'}}
+  opts={{renderer: 'svg'}} // use svg to render the chart.
+/>
+```
+
 
 # 4. Component API & Echarts API
 
@@ -185,7 +199,23 @@ You can use the API to do:
 4. `release` the charts.
 
 
-# 5. LICENSE
+# 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:
+
+
+```js
+<ReactEcharts
+  option={this.getOption()}
+  style={{height: '300px'}}
+  opts={{renderer: 'svg'}} // use svg to render the chart.
+/>
+```
+
+
+# 6. LICENSE
 
 MIT@[hustcc](https://github.com/hustcc).
 

__tests__/core.spec.jsx

@@ -34,6 +34,7 @@ describe('core.js', () => {
     expect(typeof component.props().onChartReady).toEqual('function');
     expect(component.props().showLoading).toEqual(false);
     expect(component.props().onEvents).toEqual({});
+    expect(component.props().opts).toEqual({});
   });
 
   test('override props', () => {
@@ -50,6 +51,7 @@ describe('core.js', () => {
       showLoading
       onEvents={{ onClick: testFunc }}
       echarts={echarts}
+      opts={{ renderer: 'svg' }}
     />);
 
     // default props
@@ -62,6 +64,7 @@ describe('core.js', () => {
     expect(typeof component.props().onChartReady).toEqual('function');
     expect(component.props().showLoading).toEqual(true);
     expect(component.props().onEvents).toEqual({ onClick: testFunc });
+    expect(component.props().opts).toEqual({ renderer: 'svg' });
 
     expect(testOnChartReadyFunc).toBeCalled();
   });

__tests__/index.spec.jsx

@@ -99,7 +99,8 @@ describe('index.js', () => {
     expect(component.instance().getEchartsInstance().id.substring(0, 3)).toBe('ec_');
   });
 
-  test('upadte theme', () => {
+  // update theme, should dispose echarts instance.
+  test('update theme', () => {
     const component = mount(<EchartsReact
       option={option}
       theme="hello"
@@ -115,6 +116,32 @@ describe('index.js', () => {
     expect(preId).not.toBe(component.instance().getEchartsInstance().id);
   });
 
+  // update opts, should dispose echarts instance.
+  test('update opts', () => {
+    const component = mount(<EchartsReact
+      option={option}
+      opts={{renderer: 'svg'}}
+
+    />);
+
+    const preId = component.instance().getEchartsInstance().id;
+    // udpate props
+    component.setProps({
+      opts: {renderer: 'svg'}
+    });
+
+    component.update(); // force update
+    expect(preId).toBe(component.instance().getEchartsInstance().id);
+
+    // udpate props
+    component.setProps({
+      opts: {renderer: 'canvas'}
+    });
+
+    component.update(); // force update
+    expect(preId).not.toBe(component.instance().getEchartsInstance().id);
+  });
+
   test('unmount', () => {
     const component = mount(<EchartsReact
       option={option}

demo/dist/bundle.js

@@ -34,7 +34,8 @@ export default class App extends PureComponent {
           <Link to="/echarts/gcalendar">GCalendar</Link> |
           <Link to="/echarts/lunar">Lunar</Link> |
           <Link to="/echarts/gl">gl</Link> |
-          <Link to="/echarts/sunburst">Sunburst</Link>
+          <Link to="/echarts/sunburst">Sunburst</Link> |
+          <Link to="/echarts/svg">SVG</Link>
         </h4>
         { children || <Dynamic /> }
 

demo/src/App.jsx

@@ -18,6 +18,7 @@ import Graph from './charts/Graph.jsx';
 import Lunar from './charts/Lunar.jsx';
 import Treemap from './charts/Treemap.jsx';
 import Sunburst from './charts/Sunburst.jsx';
+import Svg from './charts/Svg.jsx';
 
 const Components = {
   Simple,
@@ -36,6 +37,7 @@ const Components = {
   Lunar,
   Gl,
   Sunburst,
+  Svg,
 };
 
 export default class Chart extends PureComponent {

demo/src/Chart.jsx

@@ -0,0 +1,47 @@
+import React, { PureComponent } from 'react';
+import ReactEcharts from '../../../src/index';
+
+export default class Svg extends PureComponent {
+  getOption = () => ({
+    title: {
+      text: 'ECharts 入门示例'
+    },
+    tooltip: {},
+    legend: {
+      data:['销量']
+    },
+    xAxis: {
+      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+    },
+    yAxis: {},
+    series: [{
+      name: '销量',
+      type: 'bar',
+      data: [5, 20, 36, 10, 10, 20]
+    }]
+  })
+
+  render() {
+    let code = "<ReactEcharts \n" +
+      "  option={this.getOtion()} \n" +
+      "  style={{height: '400px', width: '100%'}}  \n" +
+      "  opts={{renderer: 'svg'}}  \n" +
+      "  className='react_for_echarts' />";
+    return (
+      <div className='examples'>
+        <div className='parent'>
+          <label> SVG renderer chart </label>
+          <ReactEcharts
+            option={this.getOption()}
+            style={{height: '400px', width: '100%'}}
+            opts={{ renderer: 'svg' }}
+            className='react_for_echarts' />
+          <label> code below: </label>
+          <pre>
+            <code>{code}</code>
+          </pre>
+        </div>
+      </div>
+    );
+  }
+}

demo/src/charts/Svg.jsx

@@ -42,7 +42,7 @@ var EchartsReactCore = function (_Component) {
     var _this = _possibleConstructorReturn(this, (EchartsReactCore.__proto__ || Object.getPrototypeOf(EchartsReactCore)).call(this, props));
 
     _this.getEchartsInstance = function () {
-      return _this.echartsInstance.getInstanceByDom(_this.echartsElement) || _this.echartsInstance.init(_this.echartsElement, _this.props.theme);
+      return _this.echartsInstance.getInstanceByDom(_this.echartsElement) || _this.echartsInstance.init(_this.echartsElement, _this.props.theme, _this.props.opts);
     };
 
     _this.dispose = function () {
@@ -125,8 +125,9 @@ var EchartsReactCore = function (_Component) {
       var echartObj = this.renderEchartDom();
       this.bindEvents(echartObj, this.props.onEvents || {});
 
-      // 切换 theme 的时候，需要 dispost 之后才新建
-      if (this.props.theme !== prevProps.theme) {
+      // 1. 切换 theme 的时候，需要 dispose 之后再新建
+      // 2. 修改 opts 的时候，需要 dispose 之后再新建
+      if (this.props.theme !== prevProps.theme || !isEqual(prevProps.opts, this.props.opts)) {
         this.dispose();
 
         this.rerender(); // 重建
@@ -200,7 +201,13 @@ EchartsReactCore.propTypes = {
   onChartReady: _propTypes2['default'].func,
   showLoading: _propTypes2['default'].bool,
   loadingOption: _propTypes2['default'].object, // eslint-disable-line react/forbid-prop-types
-  onEvents: _propTypes2['default'].object // eslint-disable-line react/forbid-prop-types
+  onEvents: _propTypes2['default'].object, // eslint-disable-line react/forbid-prop-types
+  opts: _propTypes2['default'].shape({
+    devicePixelRatio: _propTypes2['default'].number,
+    renderer: _propTypes2['default'].oneOf(['canvas', 'svg']),
+    width: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].oneOf([null, undefined, 'auto'])]),
+    height: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].oneOf([null, undefined, 'auto'])])
+  })
 };
 
 EchartsReactCore.defaultProps = {
@@ -213,5 +220,6 @@ EchartsReactCore.defaultProps = {
   onChartReady: function onChartReady() {},
   showLoading: false,
   loadingOption: null,
-  onEvents: {}
+  onEvents: {},
+  opts: {}
 };

lib/core.js

@@ -1,6 +1,6 @@
 {
   "name": "echarts-for-react",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "baidu Echarts(v3.x & v4.x) components for react.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -16,7 +16,6 @@
     "demo": "webpack",
     "dev": "webpack --watch",
     "build": "npm run clean && cross-env NODE_ENV=production babel src -d lib && npm run demo",
-    "prepublish": "npm run build",
     "cover": "jest --coverage",
     "coveralls": "cat ./coverage/lcov.info | coveralls"
   },

package.json

@@ -21,8 +21,9 @@ export default class EchartsReactCore extends Component {
     const echartObj = this.renderEchartDom();
     this.bindEvents(echartObj, this.props.onEvents || {});
 
-    // 切换 theme 的时候，需要 dispost 之后才新建
-    if (this.props.theme !== prevProps.theme) {
+    // 1. 切换 theme 的时候，需要 dispose 之后再新建
+    // 2. 修改 opts 的时候，需要 dispose 之后再新建
+    if (this.props.theme !== prevProps.theme || !isEqual(prevProps.opts, this.props.opts)) {
       this.dispose();
 
       this.rerender(); // 重建
@@ -43,7 +44,7 @@ export default class EchartsReactCore extends Component {
 
   // return the echart object
   getEchartsInstance = () => this.echartsInstance.getInstanceByDom(this.echartsElement) ||
-    this.echartsInstance.init(this.echartsElement, this.props.theme);
+    this.echartsInstance.init(this.echartsElement, this.props.theme, this.props.opts);
 
   // dispose echarts and element-resize-event
   dispose = () => {
@@ -132,7 +133,19 @@ EchartsReactCore.propTypes = {
   onChartReady: PropTypes.func,
   showLoading: PropTypes.bool,
   loadingOption: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  onEvents: PropTypes.object // eslint-disable-line react/forbid-prop-types
+  onEvents: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  opts: PropTypes.shape({
+    devicePixelRatio: PropTypes.number,
+    renderer: PropTypes.oneOf(['canvas', 'svg']),
+    width: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null, undefined, 'auto'])
+    ]),
+    height: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.oneOf([null, undefined, 'auto'])
+    ]),
+  })
 };
 
 EchartsReactCore.defaultProps = {
@@ -146,4 +159,5 @@ EchartsReactCore.defaultProps = {
   showLoading: false,
   loadingOption: null,
   onEvents: {},
+  opts: {},
 };