Skip to content

Commit 70ad2a8

Browse files
hustcchustcc
committed
add echarts 4.x supported, and add an demo of Sunburst
1 parent b1016c2 commit 70ad2a8

File tree

6 files changed

+369
-8
lines changed

6 files changed

+369
-8
lines changed

‎demo/dist/bundle.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/src/App.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ export default class App extends PureComponent {
3333
<Link to="/echarts/gauge">Gauge</Link> |
3434
<Link to="/echarts/gcalendar">GCalendar</Link> |
3535
<Link to="/echarts/lunar">Lunar</Link> |
36-
<Link to="/echarts/gl">gl</Link>
36+
<Link to="/echarts/gl">gl</Link> |
37+
<Link to="/echarts/sunburst">Sunburst</Link>
3738
</h4>
3839
{ children || <Dynamic /> }
3940

‎demo/src/Chart.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Gcalendar from './charts/Gcalendar.jsx';
1717
import Graph from './charts/Graph.jsx';
1818
import Lunar from './charts/Lunar.jsx';
1919
import Treemap from './charts/Treemap.jsx';
20+
import Sunburst from './charts/Sunburst.jsx';
2021

2122
const Components = {
2223
Simple,
@@ -34,6 +35,7 @@ const Components = {
3435
Gcalendar,
3536
Lunar,
3637
Gl,
38+
Sunburst,
3739
};
3840

3941
export default class Chart extends PureComponent {

‎demo/src/charts/Sunburst.jsx

+358
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
import React, { PureComponent } from 'react';
2+
import ReactEcharts from '../../../src/index';
3+
4+
export default class Sunburst extends PureComponent {
5+
getOption = () => {
6+
const colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
7+
const bgColor = '#2E2733';
8+
9+
const itemStyle = {
10+
star5: {
11+
color: colors[0]
12+
},
13+
star4: {
14+
color: colors[1]
15+
},
16+
star3: {
17+
color: colors[2]
18+
},
19+
star2: {
20+
color: colors[3]
21+
}
22+
};
23+
24+
const data = [{
25+
name: '虚构',
26+
itemStyle: {
27+
normal: {
28+
color: colors[1]
29+
}
30+
},
31+
children: [{
32+
name: '小说',
33+
children: [{
34+
name: '5☆',
35+
children: [{
36+
name: '疼'
37+
}, {
38+
name: '慈悲'
39+
}, {
40+
name: '楼下的房客'
41+
}]
42+
}, {
43+
name: '4☆',
44+
children: [{
45+
name: '虚无的十字架'
46+
}, {
47+
name: '无声告白'
48+
}, {
49+
name: '童年的终结'
50+
}]
51+
}, {
52+
name: '3☆',
53+
children: [{
54+
name: '疯癫老人日记'
55+
}]
56+
}]
57+
}, {
58+
name: '其他',
59+
children: [{
60+
name: '5☆',
61+
children: [{
62+
name: '纳博科夫短篇小说全集'
63+
}]
64+
}, {
65+
name: '4☆',
66+
children: [{
67+
name: '安魂曲'
68+
}, {
69+
name: '人生拼图版'
70+
}]
71+
}, {
72+
name: '3☆',
73+
children: [{
74+
name: '比起爱你，我更需要你'
75+
}]
76+
}]
77+
}]
78+
}, {
79+
name: '非虚构',
80+
itemStyle: {
81+
color: colors[2]
82+
},
83+
children: [{
84+
name: '设计',
85+
children: [{
86+
name: '5☆',
87+
children: [{
88+
name: '无界面交互'
89+
}]
90+
}, {
91+
name: '4☆',
92+
children: [{
93+
name: '数字绘图的光照与渲染技术'
94+
}, {
95+
name: '日本建筑解剖书'
96+
}]
97+
}, {
98+
name: '3☆',
99+
children: [{
100+
name: '奇幻世界艺术\n&RPG地图绘制讲座'
101+
}]
102+
}]
103+
}, {
104+
name: '社科',
105+
children: [{
106+
name: '5☆',
107+
children: [{
108+
name: '痛点'
109+
}]
110+
}, {
111+
name: '4☆',
112+
children: [{
113+
name: '卓有成效的管理者'
114+
}, {
115+
name: '进化'
116+
}, {
117+
name: '后物欲时代的来临',
118+
}]
119+
}, {
120+
name: '3☆',
121+
children: [{
122+
name: '疯癫与文明'
123+
}]
124+
}]
125+
}, {
126+
name: '心理',
127+
children: [{
128+
name: '5☆',
129+
children: [{
130+
name: '我们时代的神经症人格'
131+
}]
132+
}, {
133+
name: '4☆',
134+
children: [{
135+
name: '皮格马利翁效应'
136+
}, {
137+
name: '受伤的人'
138+
}]
139+
}, {
140+
name: '3☆',
141+
}, {
142+
name: '2☆',
143+
children: [{
144+
name: '迷恋'
145+
}]
146+
}]
147+
}, {
148+
name: '居家',
149+
children: [{
150+
name: '4☆',
151+
children: [{
152+
name: '把房子住成家'
153+
}, {
154+
name: '只过必要生活'
155+
}, {
156+
name: '北欧简约风格'
157+
}]
158+
}]
159+
}, {
160+
name: '绘本',
161+
children: [{
162+
name: '5☆',
163+
children: [{
164+
name: '设计诗'
165+
}]
166+
}, {
167+
name: '4☆',
168+
children: [{
169+
name: '假如生活糊弄了你'
170+
}, {
171+
name: '博物学家的神秘动物图鉴'
172+
}]
173+
}, {
174+
name: '3☆',
175+
children: [{
176+
name: '方向'
177+
}]
178+
}]
179+
}, {
180+
name: '哲学',
181+
children: [{
182+
name: '4☆',
183+
children: [{
184+
name: '人生的智慧'
185+
}]
186+
}]
187+
}, {
188+
name: '技术',
189+
children: [{
190+
name: '5☆',
191+
children: [{
192+
name: '代码整洁之道'
193+
}]
194+
}, {
195+
name: '4☆',
196+
children: [{
197+
name: 'Three.js 开发指南'
198+
}]
199+
}]
200+
}]
201+
}];
202+
203+
for (let j = 0; j < data.length; ++ j) {
204+
const level1 = data[j].children;
205+
for (let i = 0; i < level1.length; ++ i) {
206+
const block = level1[i].children;
207+
const bookScore = [];
208+
let bookScoreId;
209+
for (let star = 0; star < block.length; ++ star) {
210+
let style = (function (name) {
211+
switch (name) {
212+
case '5☆':
213+
bookScoreId = 0;
214+
return itemStyle.star5;
215+
case '4☆':
216+
bookScoreId = 1;
217+
return itemStyle.star4;
218+
case '3☆':
219+
bookScoreId = 2;
220+
return itemStyle.star3;
221+
case '2☆':
222+
bookScoreId = 3;
223+
return itemStyle.star2;
224+
}
225+
})(block[star].name);
226+
227+
block[star].label = {
228+
color: style.color,
229+
downplay: {
230+
opacity: 0.5
231+
}
232+
};
233+
234+
if (block[star].children) {
235+
style = {
236+
opacity: 1,
237+
color: style.color
238+
};
239+
block[star].children.forEach(function (book) {
240+
book.value = 1;
241+
book.itemStyle = style;
242+
243+
book.label = {
244+
color: style.color
245+
};
246+
247+
let value = 1;
248+
if (bookScoreId === 0 || bookScoreId === 3) {
249+
value = 5;
250+
}
251+
252+
if (bookScore[bookScoreId]) {
253+
bookScore[bookScoreId].value += value;
254+
}
255+
else {
256+
bookScore[bookScoreId] = {
257+
color: colors[bookScoreId],
258+
value: value
259+
};
260+
}
261+
});
262+
}
263+
}
264+
265+
level1[i].itemStyle = {
266+
color: data[j].itemStyle.color
267+
};
268+
}
269+
}
270+
271+
return {
272+
backgroundColor: bgColor,
273+
color: colors,
274+
series: [{
275+
type: 'sunburst',
276+
center: ['50%', '48%'],
277+
data: data,
278+
sort: function (a, b) {
279+
if (a.depth === 1) {
280+
return b.getValue() - a.getValue();
281+
}
282+
else {
283+
return a.dataIndex - b.dataIndex;
284+
}
285+
},
286+
label: {
287+
rotate: 'radial',
288+
color: bgColor
289+
},
290+
itemStyle: {
291+
borderColor: bgColor,
292+
borderWidth: 2
293+
},
294+
levels: [{}, {
295+
r0: 0,
296+
r: 40,
297+
label: {
298+
rotate: 0
299+
}
300+
}, {
301+
r0: 40,
302+
r: 105
303+
}, {
304+
r0: 115,
305+
r: 140,
306+
itemStyle: {
307+
shadowBlur: 2,
308+
shadowColor: colors[2],
309+
color: 'transparent'
310+
},
311+
label: {
312+
rotate: 'tangential',
313+
fontSize: 10,
314+
color: colors[0]
315+
}
316+
}, {
317+
r0: 140,
318+
r: 145,
319+
itemStyle: {
320+
shadowBlur: 80,
321+
shadowColor: colors[0]
322+
},
323+
label: {
324+
position: 'outside',
325+
textShadowBlur: 5,
326+
textShadowColor: '#333',
327+
},
328+
downplay: {
329+
label: {
330+
opacity: 0.5
331+
}
332+
}
333+
}]
334+
}]
335+
};
336+
};
337+
render() {
338+
let code = "<ReactEcharts \n" +
339+
" option={this.getOtion()} \n" +
340+
" style={{height: '600px', width: '100%'}} \n" +
341+
" className='react_for_echarts' />";
342+
return (
343+
<div className='examples'>
344+
<div className='parent'>
345+
<label> Sunburst chart </label>
346+
<ReactEcharts
347+
option={this.getOption()}
348+
style={{height: '600px', width: '100%'}}
349+
className='react_for_echarts' />
350+
<label> code below: </label>
351+
<pre>
352+
<code>{code}</code>
353+
</pre>
354+
</div>
355+
</div>
356+
);
357+
}
358+
}

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div id="wrapper">
1111

1212
</div>
13-
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
13+
<script src="https://cdn.bootcss.com/echarts/4.0.0/echarts.min.js"></script>
1414
<script type="text/javascript" src="demo/dist/bundle.js"></script>
1515
<!-- sorry for ad -->
1616
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

0 commit comments

Comments
 (0)