mirror of
https://github.com/hustcc/echarts-for-react.git
synced 2025-12-08 20:16:09 +00:00
add echarts 4.x supported, and add an demo of Sunburst
This commit is contained in:
hustcc
parent
b1016c2844
commit
70ad2a83a2
6
demo/dist/bundle.js
vendored
6
demo/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
@ -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 /> }
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
358
demo/src/charts/Sunburst.jsx
Normal file
358
demo/src/charts/Sunburst.jsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "echarts-for-react",
|
||||
"version": "2.0.4",
|
||||
"description": "baidu Echarts(v3.x) components for react",
|
||||
"version": "2.0.5",
|
||||
"description": "baidu Echarts(v3.x & v4.x) components for react.",
|
||||
"main": "lib/index.js",
|
||||
"types": "lib/index.d.ts",
|
||||
"files": [
|
||||
@ -60,7 +60,7 @@
|
||||
"coveralls": "^3.0.0",
|
||||
"cross-env": "^5.1.3",
|
||||
"css-loader": "^0.28.7",
|
||||
"echarts": "^3.8.5",
|
||||
"echarts": "^4.0.0",
|
||||
"echarts-gl": "^1.0.0-beta.6",
|
||||
"enzyme": "^3.2.0",
|
||||
"enzyme-adapter-react-15": "^1.0.5",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user