add echarts 4.x supported, and add an demo of Sunburst

demo/src/App.jsx

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

demo/src/Chart.jsx

@@ -17,6 +17,7 @@ import Gcalendar from './charts/Gcalendar.jsx';
 import Graph from './charts/Graph.jsx';
 import Lunar from './charts/Lunar.jsx';
 import Treemap from './charts/Treemap.jsx';
+import Sunburst from './charts/Sunburst.jsx';
 
 const Components = {
   Simple,
@@ -34,6 +35,7 @@ const Components = {
   Gcalendar,
   Lunar,
   Gl,
+  Sunburst,
 };
 
 export default class Chart extends PureComponent {

demo/src/charts/Sunburst.jsx

@@ -0,0 +1,358 @@
+import React, { PureComponent } from 'react';
+import ReactEcharts from '../../../src/index';
+
+export default class Sunburst extends PureComponent {
+  getOption = () => {
+    const colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
+    const bgColor = '#2E2733';
+
+    const itemStyle = {
+      star5: {
+        color: colors[0]
+      },
+      star4: {
+        color: colors[1]
+      },
+      star3: {
+        color: colors[2]
+      },
+      star2: {
+        color: colors[3]
+      }
+    };
+
+    const data = [{
+      name: '虚构',
+      itemStyle: {
+        normal: {
+          color: colors[1]
+        }
+      },
+      children: [{
+        name: '小说',
+        children: [{
+          name: '5☆',
+          children: [{
+            name: '疼'
+          }, {
+            name: '慈悲'
+          }, {
+            name: '楼下的房客'
+          }]
+        }, {
+          name: '4☆',
+          children: [{
+            name: '虚无的十字架'
+          }, {
+            name: '无声告白'
+          }, {
+            name: '童年的终结'
+          }]
+        }, {
+          name: '3☆',
+          children: [{
+            name: '疯癫老人日记'
+          }]
+        }]
+      }, {
+        name: '其他',
+        children: [{
+          name: '5☆',
+          children: [{
+            name: '纳博科夫短篇小说全集'
+          }]
+        }, {
+          name: '4☆',
+          children: [{
+            name: '安魂曲'
+          }, {
+            name: '人生拼图版'
+          }]
+        }, {
+          name: '3☆',
+          children: [{
+            name: '比起爱你，我更需要你'
+          }]
+        }]
+      }]
+    }, {
+      name: '非虚构',
+      itemStyle: {
+        color: colors[2]
+      },
+      children: [{
+        name: '设计',
+        children: [{
+          name: '5☆',
+          children: [{
+            name: '无界面交互'
+          }]
+        }, {
+          name: '4☆',
+          children: [{
+            name: '数字绘图的光照与渲染技术'
+          }, {
+            name: '日本建筑解剖书'
+          }]
+        }, {
+          name: '3☆',
+          children: [{
+            name: '奇幻世界艺术\n&RPG地图绘制讲座'
+          }]
+        }]
+      }, {
+        name: '社科',
+        children: [{
+          name: '5☆',
+          children: [{
+            name: '痛点'
+          }]
+        }, {
+          name: '4☆',
+          children: [{
+            name: '卓有成效的管理者'
+          }, {
+            name: '进化'
+          }, {
+            name: '后物欲时代的来临',
+          }]
+        }, {
+          name: '3☆',
+          children: [{
+            name: '疯癫与文明'
+          }]
+        }]
+      }, {
+        name: '心理',
+        children: [{
+          name: '5☆',
+          children: [{
+            name: '我们时代的神经症人格'
+          }]
+        }, {
+          name: '4☆',
+          children: [{
+            name: '皮格马利翁效应'
+          }, {
+            name: '受伤的人'
+          }]
+        }, {
+          name: '3☆',
+        }, {
+          name: '2☆',
+          children: [{
+            name: '迷恋'
+          }]
+        }]
+      }, {
+        name: '居家',
+        children: [{
+          name: '4☆',
+          children: [{
+            name: '把房子住成家'
+          }, {
+            name: '只过必要生活'
+          }, {
+            name: '北欧简约风格'
+          }]
+        }]
+      }, {
+        name: '绘本',
+        children: [{
+          name: '5☆',
+          children: [{
+            name: '设计诗'
+          }]
+        }, {
+          name: '4☆',
+          children: [{
+            name: '假如生活糊弄了你'
+          }, {
+            name: '博物学家的神秘动物图鉴'
+          }]
+        }, {
+          name: '3☆',
+          children: [{
+            name: '方向'
+          }]
+        }]
+      }, {
+        name: '哲学',
+        children: [{
+          name: '4☆',
+          children: [{
+            name: '人生的智慧'
+          }]
+        }]
+      }, {
+        name: '技术',
+        children: [{
+          name: '5☆',
+          children: [{
+            name: '代码整洁之道'
+          }]
+        }, {
+          name: '4☆',
+          children: [{
+            name: 'Three.js 开发指南'
+          }]
+        }]
+      }]
+    }];
+
+    for (let j = 0; j < data.length; ++ j) {
+      const level1 = data[j].children;
+      for (let i = 0; i < level1.length; ++ i) {
+        const block = level1[i].children;
+        const bookScore = [];
+        let bookScoreId;
+        for (let star = 0; star < block.length; ++ star) {
+          let style = (function (name) {
+            switch (name) {
+              case '5☆':
+                bookScoreId = 0;
+                return itemStyle.star5;
+              case '4☆':
+                bookScoreId = 1;
+                return itemStyle.star4;
+              case '3☆':
+                bookScoreId = 2;
+                return itemStyle.star3;
+              case '2☆':
+                bookScoreId = 3;
+                return itemStyle.star2;
+            }
+          })(block[star].name);
+
+          block[star].label = {
+            color: style.color,
+            downplay: {
+              opacity: 0.5
+            }
+          };
+
+          if (block[star].children) {
+            style = {
+              opacity: 1,
+              color: style.color
+            };
+            block[star].children.forEach(function (book) {
+              book.value = 1;
+              book.itemStyle = style;
+
+              book.label = {
+                color: style.color
+              };
+
+              let value = 1;
+              if (bookScoreId === 0 || bookScoreId === 3) {
+                value = 5;
+              }
+
+              if (bookScore[bookScoreId]) {
+                bookScore[bookScoreId].value += value;
+              }
+              else {
+                bookScore[bookScoreId] = {
+                  color: colors[bookScoreId],
+                  value: value
+                };
+              }
+            });
+          }
+        }
+
+        level1[i].itemStyle = {
+          color: data[j].itemStyle.color
+        };
+      }
+    }
+
+    return {
+      backgroundColor: bgColor,
+      color: colors,
+      series: [{
+        type: 'sunburst',
+        center: ['50%', '48%'],
+        data: data,
+        sort: function (a, b) {
+          if (a.depth === 1) {
+            return b.getValue() - a.getValue();
+          }
+          else {
+            return a.dataIndex - b.dataIndex;
+          }
+        },
+        label: {
+          rotate: 'radial',
+          color: bgColor
+        },
+        itemStyle: {
+          borderColor: bgColor,
+          borderWidth: 2
+        },
+        levels: [{}, {
+          r0: 0,
+          r: 40,
+          label: {
+            rotate: 0
+          }
+        }, {
+          r0: 40,
+          r: 105
+        }, {
+          r0: 115,
+          r: 140,
+          itemStyle: {
+            shadowBlur: 2,
+            shadowColor: colors[2],
+            color: 'transparent'
+          },
+          label: {
+            rotate: 'tangential',
+            fontSize: 10,
+            color: colors[0]
+          }
+        }, {
+          r0: 140,
+          r: 145,
+          itemStyle: {
+            shadowBlur: 80,
+            shadowColor: colors[0]
+          },
+          label: {
+            position: 'outside',
+            textShadowBlur: 5,
+            textShadowColor: '#333',
+          },
+          downplay: {
+            label: {
+              opacity: 0.5
+            }
+          }
+        }]
+      }]
+    };
+  };
+  render() {
+    let code = "<ReactEcharts \n" +
+      "  option={this.getOtion()} \n" +
+      "  style={{height: '600px', width: '100%'}}  \n" +
+      "  className='react_for_echarts' />";
+    return (
+      <div className='examples'>
+        <div className='parent'>
+          <label> Sunburst chart </label>
+          <ReactEcharts
+            option={this.getOption()}
+            style={{height: '600px', width: '100%'}}
+            className='react_for_echarts' />
+          <label> code below: </label>
+          <pre>
+            <code>{code}</code>
+          </pre>
+        </div>
+      </div>
+    );
+  }
+}

index.html

@@ -10,7 +10,7 @@
 	<div id="wrapper">
 
 	</div>
-	  <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
+	  <script src="https://cdn.bootcss.com/echarts/4.0.0/echarts.min.js"></script>
   	<script type="text/javascript" src="demo/dist/bundle.js"></script>
   	<!-- sorry for ad -->
   	<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>