Skip to content

Commit e61dda5

Browse files
Merge pull request #107 from vueblocks/develop
Develop
2 parents 6a2c98c + 0d94766 commit e61dda5

14 files changed

+1028
-41
lines changed

app/constant/sankeyData.js

+180
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
const base = {
2+
nodes: [
3+
{ name: 'a' },
4+
{ name: 'b' },
5+
{ name: 'x' },
6+
{ name: 'y' },
7+
{ name: 'z' }
8+
],
9+
links: [
10+
{ source: 'a', target: 'x', value: 5 },
11+
{ source: 'a', target: 'y', value: 6 },
12+
{ source: 'a', target: 'z', value: 7 },
13+
{ source: 'b', target: 'x', value: 4 },
14+
{ source: 'b', target: 'y', value: 6 },
15+
{ source: 'b', target: 'z', value: 8 }
16+
]
17+
}
18+
19+
const outcome = {
20+
nodes: [
21+
{ name: 'Canada' },
22+
{ name: 'USA' },
23+
{ name: 'Italy' },
24+
{ name: 'France' },
25+
{ name: 'Germany' },
26+
{ name: 'Spain' }
27+
],
28+
links: [
29+
{ source: 'Canada', target: 'France', value: 2230000 },
30+
{ source: 'Canada', target: 'Germany', value: 1990000 },
31+
{ source: 'Canada', target: 'Italy', value: 1180000 },
32+
{ source: 'Canada', target: 'Spain', value: 990000 },
33+
{ source: 'USA', target: 'France', value: 880000 },
34+
{ source: 'USA', target: 'Germany', value: 2020000 },
35+
{ source: 'USA', target: 'Spain', value: 1110000 }
36+
]
37+
}
38+
39+
const product = {
40+
nodes: [
41+
{ 'name': 'Total' },
42+
{ 'name': 'Environment' },
43+
{ 'name': 'Land use' },
44+
{ 'name': 'Cocoa butter (Organic)' },
45+
{ 'name': 'Cocoa mass (Organic)' },
46+
{ 'name': 'Hazelnuts (Organic)' },
47+
{ 'name': 'Cane sugar (Organic)' },
48+
{ 'name': 'Vegetables (Organic)' },
49+
{ 'name': 'Climate change' },
50+
{ 'name': 'Harmful substances' },
51+
{ 'name': 'Water use' },
52+
{ 'name': 'Resource depletion' },
53+
{ 'name': 'Refrigeration' },
54+
{ 'name': 'Packaging' },
55+
{ 'name': 'Human rights' },
56+
{ 'name': 'Child labour' },
57+
{ 'name': 'Coconut oil (Organic)' },
58+
{ 'name': 'Forced labour' },
59+
{ 'name': 'Health safety' },
60+
{ 'name': 'Access to water' },
61+
{ 'name': 'Freedom of association' },
62+
{ 'name': 'Access to land' },
63+
{ 'name': 'Sufficient wage' },
64+
{ 'name': 'Equal rights migrants' },
65+
{ 'name': 'Discrimination' },
66+
{ 'name': 'Working hours' }
67+
],
68+
links: [
69+
{ 'source': 'Total', 'target': 'Environment', 'value': 0.342284047256003 },
70+
{ 'source': 'Environment', 'target': 'Land use', 'value': 0.32322870366987 },
71+
{ 'source': 'Land use', 'target': 'Cocoa butter (Organic)', 'value': 0.177682517071359 },
72+
{ 'source': 'Land use', 'target': 'Cocoa mass (Organic)', 'value': 0.137241325342711 },
73+
{ 'source': 'Land use', 'target': 'Hazelnuts (Organic)', 'value': 0.00433076373512774 },
74+
{ 'source': 'Land use', 'target': 'Cane sugar (Organic)', 'value': 0.00296956039863467 },
75+
{ 'source': 'Land use', 'target': 'Vegetables (Organic)', 'value': 0.00100453712203756 },
76+
{ 'source': 'Environment', 'target': 'Climate change', 'value': 0.0112886157414413 },
77+
{ 'source': 'Climate change', 'target': 'Cocoa butter (Organic)', 'value': 0.00676852971933996 },
78+
{ 'source': 'Climate change', 'target': 'Cocoa mass (Organic)', 'value': 0.00394686874786743 },
79+
{ 'source': 'Climate change', 'target': 'Cane sugar (Organic)', 'value': 0.000315972058711838 },
80+
{ 'source': 'Climate change', 'target': 'Hazelnuts (Organic)', 'value': 0.000218969462265292 },
81+
{ 'source': 'Climate change', 'target': 'Vegetables (Organic)', 'value': 0.0000382757532567656 },
82+
{ 'source': 'Environment', 'target': 'Harmful substances', 'value': 0.00604275542495656 },
83+
{ 'source': 'Harmful substances', 'target': 'Cocoa mass (Organic)', 'value': 0.0055125989240741 },
84+
{ 'source': 'Harmful substances', 'target': 'Cocoa butter (Organic)', 'value': 0.000330017607892127 },
85+
{ 'source': 'Harmful substances', 'target': 'Cane sugar (Organic)', 'value': 0.000200138892990337 },
86+
{ 'source': 'Harmful substances', 'target': 'Hazelnuts (Organic)', 'value': 0 },
87+
{ 'source': 'Harmful substances', 'target': 'Vegetables (Organic)', 'value': 0 },
88+
{ 'source': 'Environment', 'target': 'Water use', 'value': 0.00148345269044703 },
89+
{ 'source': 'Water use', 'target': 'Cocoa butter (Organic)', 'value': 0.00135309891304186 },
90+
{ 'source': 'Water use', 'target': 'Cocoa mass (Organic)', 'value': 0.000105714137908639 },
91+
{ 'source': 'Water use', 'target': 'Hazelnuts (Organic)', 'value': 0.0000133452642581887 },
92+
{ 'source': 'Water use', 'target': 'Cane sugar (Organic)', 'value': 0.00000878074837009238 },
93+
{ 'source': 'Water use', 'target': 'Vegetables (Organic)', 'value': 0.0000025136268682477 },
94+
{ 'source': 'Environment', 'target': 'Resource depletion', 'value': 0.000240519729288764 },
95+
{ 'source': 'Resource depletion', 'target': 'Cane sugar (Organic)', 'value': 0.000226237279345084 },
96+
{ 'source': 'Resource depletion', 'target': 'Vegetables (Organic)', 'value': 0.0000142824499436793 },
97+
{ 'source': 'Resource depletion', 'target': 'Hazelnuts (Organic)', 'value': 0 },
98+
{ 'source': 'Resource depletion', 'target': 'Cocoa mass (Organic)', 'value': 0 },
99+
{ 'source': 'Resource depletion', 'target': 'Cocoa butter (Organic)', 'value': 0 },
100+
{ 'source': 'Environment', 'target': 'Refrigeration', 'value': 0 },
101+
{ 'source': 'Environment', 'target': 'Packaging', 'value': 0 },
102+
{ 'source': 'Total', 'target': 'Human rights', 'value': 0.307574096993239 },
103+
{ 'source': 'Human rights', 'target': 'Child labour', 'value': 0.0410641202645833 },
104+
{ 'source': 'Child labour', 'target': 'Hazelnuts (Organic)', 'value': 0.0105339381639722 },
105+
{ 'source': 'Child labour', 'target': 'Cocoa mass (Organic)', 'value': 0.0105 },
106+
{ 'source': 'Child labour', 'target': 'Cocoa butter (Organic)', 'value': 0.0087294420777 },
107+
{ 'source': 'Child labour', 'target': 'Coconut oil (Organic)', 'value': 0.00474399974233333 },
108+
{ 'source': 'Child labour', 'target': 'Cane sugar (Organic)', 'value': 0.00388226450884445 },
109+
{ 'source': 'Child labour', 'target': 'Vegetables (Organic)', 'value': 0.00267447577173333 },
110+
{ 'source': 'Human rights', 'target': 'Forced labour', 'value': 0.0365458590642445 },
111+
{ 'source': 'Forced labour', 'target': 'Hazelnuts (Organic)', 'value': 0.0114913076376389 },
112+
{ 'source': 'Forced labour', 'target': 'Cocoa butter (Organic)', 'value': 0.0081134807347 },
113+
{ 'source': 'Forced labour', 'target': 'Cocoa mass (Organic)', 'value': 0.00765230236575 },
114+
{ 'source': 'Forced labour', 'target': 'Cane sugar (Organic)', 'value': 0.004 },
115+
{ 'source': 'Forced labour', 'target': 'Vegetables (Organic)', 'value': 0.00296668823626667 },
116+
{ 'source': 'Forced labour', 'target': 'Coconut oil (Organic)', 'value': 0.00232208008988889 },
117+
{ 'source': 'Human rights', 'target': 'Health safety', 'value': 0.0345435327843611 },
118+
{ 'source': 'Health safety', 'target': 'Hazelnuts (Organic)', 'value': 0.0121419536385 },
119+
{ 'source': 'Health safety', 'target': 'Cocoa mass (Organic)', 'value': 0.00766772850678333 },
120+
{ 'source': 'Health safety', 'target': 'Cocoa butter (Organic)', 'value': 0.0056245892061 },
121+
{ 'source': 'Health safety', 'target': 'Coconut oil (Organic)', 'value': 0.00361616847688889 },
122+
{ 'source': 'Health safety', 'target': 'Cane sugar (Organic)', 'value': 0.00277374682533333 },
123+
{ 'source': 'Health safety', 'target': 'Vegetables (Organic)', 'value': 0.00271934613075556 },
124+
{ 'source': 'Human rights', 'target': 'Access to water', 'value': 0.0340206659360667 },
125+
{ 'source': 'Access to water', 'target': 'Cocoa mass (Organic)', 'value': 0.0105 },
126+
{ 'source': 'Access to water', 'target': 'Cocoa butter (Organic)', 'value': 0.0089274160792 },
127+
{ 'source': 'Access to water', 'target': 'Hazelnuts (Organic)', 'value': 0.0054148022845 },
128+
{ 'source': 'Access to water', 'target': 'Cane sugar (Organic)', 'value': 0.00333938149786667 },
129+
{ 'source': 'Access to water', 'target': 'Vegetables (Organic)', 'value': 0.00314663377488889 },
130+
{ 'source': 'Access to water', 'target': 'Coconut oil (Organic)', 'value': 0.00269243229961111 },
131+
{ 'source': 'Human rights', 'target': 'Freedom of association', 'value': 0.0320571523941667 },
132+
{ 'source': 'Freedom of association', 'target': 'Hazelnuts (Organic)', 'value': 0.0132312483463611 },
133+
{ 'source': 'Freedom of association', 'target': 'Cocoa butter (Organic)', 'value': 0.0077695200707 },
134+
{ 'source': 'Freedom of association', 'target': 'Cocoa mass (Organic)', 'value': 0.00510606573995 },
135+
{ 'source': 'Freedom of association', 'target': 'Vegetables (Organic)', 'value': 0.00354321156324444 },
136+
{ 'source': 'Freedom of association', 'target': 'Cane sugar (Organic)', 'value': 0.00240710667391111 },
137+
{ 'source': 'Freedom of association', 'target': 'Coconut oil (Organic)', 'value': 0 },
138+
{ 'source': 'Human rights', 'target': 'Access to land', 'value': 0.0315022209894056 },
139+
{ 'source': 'Access to land', 'target': 'Hazelnuts (Organic)', 'value': 0.00964970063322223 },
140+
{ 'source': 'Access to land', 'target': 'Cocoa mass (Organic)', 'value': 0.00938530207965 },
141+
{ 'source': 'Access to land', 'target': 'Cocoa butter (Organic)', 'value': 0.0060110791848 },
142+
{ 'source': 'Access to land', 'target': 'Cane sugar (Organic)', 'value': 0.00380818314608889 },
143+
{ 'source': 'Access to land', 'target': 'Vegetables (Organic)', 'value': 0.00264795594564445 },
144+
{ 'source': 'Access to land', 'target': 'Coconut oil (Organic)', 'value': 0 },
145+
{ 'source': 'Human rights', 'target': 'Sufficient wage', 'value': 0.0287776757227333 },
146+
{ 'source': 'Sufficient wage', 'target': 'Cocoa mass (Organic)', 'value': 0.00883512456493333 },
147+
{ 'source': 'Sufficient wage', 'target': 'Cocoa butter (Organic)', 'value': 0.0078343367268 },
148+
{ 'source': 'Sufficient wage', 'target': 'Coconut oil (Organic)', 'value': 0.00347879026511111 },
149+
{ 'source': 'Sufficient wage', 'target': 'Hazelnuts (Organic)', 'value': 0.00316254211388889 },
150+
{ 'source': 'Sufficient wage', 'target': 'Vegetables (Organic)', 'value': 0.00281013722808889 },
151+
{ 'source': 'Sufficient wage', 'target': 'Cane sugar (Organic)', 'value': 0.00265674482391111 },
152+
{ 'source': 'Human rights', 'target': 'Equal rights migrants', 'value': 0.0271146645119444 },
153+
{ 'source': 'Equal rights migrants', 'target': 'Cocoa butter (Organic)', 'value': 0.0071042315061 },
154+
{ 'source': 'Equal rights migrants', 'target': 'Cocoa mass (Organic)', 'value': 0.00636673210005 },
155+
{ 'source': 'Equal rights migrants', 'target': 'Hazelnuts (Organic)', 'value': 0.00601459775836111 },
156+
{ 'source': 'Equal rights migrants', 'target': 'Coconut oil (Organic)', 'value': 0.00429185583138889 },
157+
{ 'source': 'Equal rights migrants', 'target': 'Cane sugar (Organic)', 'value': 0.00182647471915556 },
158+
{ 'source': 'Equal rights migrants', 'target': 'Vegetables (Organic)', 'value': 0.00151077259688889 },
159+
{ 'source': 'Human rights', 'target': 'Discrimination', 'value': 0.0211217763359833 },
160+
{ 'source': 'Discrimination', 'target': 'Cocoa mass (Organic)', 'value': 0.00609671700306667 },
161+
{ 'source': 'Discrimination', 'target': 'Cocoa butter (Organic)', 'value': 0.0047738806325 },
162+
{ 'source': 'Discrimination', 'target': 'Coconut oil (Organic)', 'value': 0.00368119084494444 },
163+
{ 'source': 'Discrimination', 'target': 'Vegetables (Organic)', 'value': 0.00286009813604444 },
164+
{ 'source': 'Discrimination', 'target': 'Cane sugar (Organic)', 'value': 0.00283706180951111 },
165+
{ 'source': 'Discrimination', 'target': 'Hazelnuts (Organic)', 'value': 0.000872827909916666 },
166+
{ 'source': 'Human rights', 'target': 'Working hours', 'value': 0.02082642898975 },
167+
{ 'source': 'Working hours', 'target': 'Hazelnuts (Organic)', 'value': 0.0107216773848333 },
168+
{ 'source': 'Working hours', 'target': 'Coconut oil (Organic)', 'value': 0.00359009052944444 },
169+
{ 'source': 'Working hours', 'target': 'Vegetables (Organic)', 'value': 0.00212300379075556 },
170+
{ 'source': 'Working hours', 'target': 'Cocoa butter (Organic)', 'value': 0.0018518584356 },
171+
{ 'source': 'Working hours', 'target': 'Cocoa mass (Organic)', 'value': 0.00158227069058333 },
172+
{ 'source': 'Working hours', 'target': 'Cane sugar (Organic)', 'value': 0.000957528158533333 }
173+
]
174+
}
175+
176+
export {
177+
base,
178+
outcome,
179+
product
180+
}

app/data/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import wordcloud from './wordcloud'
1313
import geo from './geo'
1414
import liquidfill from './liquidfill'
1515
import polar from './polar'
16+
import sankey from './sankey'
1617

1718
export default {
1819
bar,
@@ -29,5 +30,6 @@ export default {
2930
wordcloud,
3031
geo,
3132
liquidfill,
32-
polar
33+
polar,
34+
sankey
3335
}

app/data/sankey.js

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import {
2+
base,
3+
outcome,
4+
product
5+
} from '../constant/sankeyData'
6+
7+
const sankeyData1 = {
8+
dimensions: base.nodes,
9+
measures: base.links
10+
}
11+
12+
const sankeyData2 = {
13+
dimensions: outcome.nodes,
14+
measures: outcome.links
15+
}
16+
17+
const sankeyData3 = {
18+
dimensions: product.nodes,
19+
measures: product.links
20+
}
21+
22+
export default {
23+
name: '桑基图',
24+
type: 'sankey',
25+
chartData: [
26+
{
27+
title: '基础桑基图',
28+
data: sankeyData1,
29+
settings: {}
30+
},
31+
{
32+
title: '纵向桑基图',
33+
data: sankeyData1,
34+
settings: {
35+
orient: 'vertical',
36+
label: {
37+
position: 'top'
38+
}
39+
}
40+
},
41+
{
42+
title: '高亮节点',
43+
data: sankeyData2,
44+
settings: {
45+
focusNodeAdjacency: true
46+
}
47+
},
48+
{
49+
title: '暗色背景',
50+
data: sankeyData2,
51+
settings: {
52+
focusNodeAdjacency: true,
53+
label: {
54+
normal: {
55+
color: '#fff'
56+
}
57+
},
58+
lineStyle: {
59+
normal: {
60+
opacity: 0.5
61+
}
62+
}
63+
},
64+
xprops: {
65+
backgroundColor: '#0e2439'
66+
}
67+
},
68+
{
69+
title: '禁止拖拽',
70+
data: sankeyData3,
71+
settings: {
72+
draggable: false
73+
}
74+
},
75+
{
76+
title: 'Levels Setting',
77+
data: sankeyData3,
78+
settings: {
79+
draggable: false,
80+
levels: [
81+
{
82+
depth: 0,
83+
itemStyle: {
84+
color: '#fbb4ae'
85+
},
86+
lineStyle: {
87+
color: 'source',
88+
opacity: 0.6
89+
}
90+
},
91+
{
92+
depth: 1,
93+
itemStyle: {
94+
color: '#b3cde3'
95+
},
96+
lineStyle: {
97+
color: 'source',
98+
opacity: 0.6
99+
}
100+
},
101+
{
102+
depth: 2,
103+
itemStyle: {
104+
color: '#ccebc5'
105+
},
106+
lineStyle: {
107+
color: 'source',
108+
opacity: 0.6
109+
}
110+
},
111+
{
112+
depth: 3,
113+
itemStyle: {
114+
color: '#decbe4'
115+
},
116+
lineStyle: {
117+
color: 'source',
118+
opacity: 0.6
119+
}
120+
}
121+
]
122+
}
123+
}
124+
]
125+
}

docs/_sidebar.md

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
- [词云图](chart-wordcloud.md)
2323
- [水球图](chart-liquidfill.md)
2424
- [极区图](chart-polar.md)
25+
- [桑基图](chart-sankey.md)
2526

2627
- 其他
2728
- [属性配置](setting-demo.md)

docs/change-log.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# 更新日志
22

3+
## v0.8.6
4+
5+
* **新增** - [桑基图](https://vueblocks.github.io/ve-charts/#/chart-sankey)
6+
37
## v0.8.5
48

59
* **修复** 修复百分比堆叠图(柱状图/折线图),因传入指标值是字符串导致的渲染问题

0 commit comments

Comments
 (0)