#Sankey
#能源流向图形桑基图
由 Sankey spec 反推得到的 VSeed 示例。每条链路被还原为一行 tidyData，source 和 target 使用节点名称，value 表示流量大小。示例同时开启 tooltip 与图例，支持 hover 高亮和图例筛选交互。
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "sankey",
"dataset": [
{
"sourceNode": "Agricultural 'waste'",
"targetNode": "Bio-conversion",
"value": 124.729
},
{
"sourceNode": "Bio-conversion",
"targetNode": "Liquid",
"value": 0.597
},
{
"sourceNode": "Bio-conversion",
"targetNode": "Losses",
"value": 26.862
},
{
"sourceNode": "Bio-conversion",
"targetNode": "Solid",
"value": 280.322
},
{
"sourceNode": "Bio-conversion",
"targetNode": "Gas",
"value": 81.144
},
{
"sourceNode": "Biofuel imports",
"targetNode": "Liquid",
"value": 35
},
{
"sourceNode": "Biomass imports",
"targetNode": "Solid",
"value": 35
},
{
"sourceNode": "Coal imports",
"targetNode": "Coal",
"value": 11.606
},
{
"sourceNode": "Coal reserves",
"targetNode": "Coal",
"value": 63.965
},
{
"sourceNode": "Coal",
"targetNode": "Solid",
"value": 75.571
},
{
"sourceNode": "District heating",
"targetNode": "Industry",
"value": 10.639
},
{
"sourceNode": "District heating",
"targetNode": "Heating and cooling - commercial",
"value": 22.505
},
{
"sourceNode": "District heating",
"targetNode": "Heating and cooling - homes",
"value": 46.184
},
{
"sourceNode": "Electricity grid",
"targetNode": "Over generation / exports",
"value": 104.453
},
{
"sourceNode": "Electricity grid",
"targetNode": "Heating and cooling - homes",
"value": 113.726
},
{
"sourceNode": "Electricity grid",
"targetNode": "H2 conversion",
"value": 27.14
},
{
"sourceNode": "Electricity grid",
"targetNode": "Industry",
"value": 342.165
},
{
"sourceNode": "Electricity grid",
"targetNode": "Road transport",
"value": 37.797
},
{
"sourceNode": "Electricity grid",
"targetNode": "Agriculture",
"value": 4.412
},
{
"sourceNode": "Electricity grid",
"targetNode": "Heating and cooling - commercial",
"value": 40.858
},
{
"sourceNode": "Electricity grid",
"targetNode": "Losses",
"value": 56.691
},
{
"sourceNode": "Electricity grid",
"targetNode": "Rail transport",
"value": 7.863
},
{
"sourceNode": "Electricity grid",
"targetNode": "Lighting & appliances - commercial",
"value": 90.008
},
{
"sourceNode": "Electricity grid",
"targetNode": "Lighting & appliances - homes",
"value": 93.494
},
{
"sourceNode": "Gas imports",
"targetNode": "Ngas",
"value": 40.719
},
{
"sourceNode": "Gas reserves",
"targetNode": "Ngas",
"value": 82.233
},
{
"sourceNode": "Gas",
"targetNode": "Heating and cooling - commercial",
"value": 0.129
},
{
"sourceNode": "Gas",
"targetNode": "Losses",
"value": 1.401
},
{
"sourceNode": "Gas",
"targetNode": "Thermal generation",
"value": 151.891
},
{
"sourceNode": "Gas",
"targetNode": "Agriculture",
"value": 2.096
},
{
"sourceNode": "Gas",
"targetNode": "Industry",
"value": 48.58
},
{
"sourceNode": "Geothermal",
"targetNode": "Electricity grid",
"value": 7.013
},
{
"sourceNode": "H2 conversion",
"targetNode": "H2",
"value": 20.897
},
{
"sourceNode": "H2 conversion",
"targetNode": "Losses",
"value": 6.242
},
{
"sourceNode": "H2",
"targetNode": "Road transport",
"value": 20.897
},
{
"sourceNode": "Hydro",
"targetNode": "Electricity grid",
"value": 6.995
},
{
"sourceNode": "Liquid",
"targetNode": "Industry",
"value": 121.066
},
{
"sourceNode": "Liquid",
"targetNode": "International shipping",
"value": 128.69
},
{
"sourceNode": "Liquid",
"targetNode": "Road transport",
"value": 135.835
},
{
"sourceNode": "Liquid",
"targetNode": "Domestic aviation",
"value": 14.458
},
{
"sourceNode": "Liquid",
"targetNode": "International aviation",
"value": 206.267
},
{
"sourceNode": "Liquid",
"targetNode": "Agriculture",
"value": 3.64
},
{
"sourceNode": "Liquid",
"targetNode": "National navigation",
"value": 33.218
},
{
"sourceNode": "Liquid",
"targetNode": "Rail transport",
"value": 4.413
},
{
"sourceNode": "Marine algae",
"targetNode": "Bio-conversion",
"value": 4.375
},
{
"sourceNode": "Ngas",
"targetNode": "Gas",
"value": 122.952
},
{
"sourceNode": "Nuclear",
"targetNode": "Thermal generation",
"value": 839.978
},
{
"sourceNode": "Oil imports",
"targetNode": "Oil",
"value": 504.287
},
{
"sourceNode": "Oil reserves",
"targetNode": "Oil",
"value": 107.703
},
{
"sourceNode": "Oil",
"targetNode": "Liquid",
"value": 611.99
},
{
"sourceNode": "Other waste",
"targetNode": "Solid",
"value": 56.587
},
{
"sourceNode": "Other waste",
"targetNode": "Bio-conversion",
"value": 77.81
},
{
"sourceNode": "Pumped heat",
"targetNode": "Heating and cooling - homes",
"value": 193.026
},
{
"sourceNode": "Pumped heat",
"targetNode": "Heating and cooling - commercial",
"value": 70.672
},
{
"sourceNode": "Solar PV",
"targetNode": "Electricity grid",
"value": 59.901
},
{
"sourceNode": "Solar Thermal",
"targetNode": "Heating and cooling - homes",
"value": 19.263
},
{
"sourceNode": "Solar",
"targetNode": "Solar Thermal",
"value": 19.263
},
{
"sourceNode": "Solar",
"targetNode": "Solar PV",
"value": 59.901
},
{
"sourceNode": "Solid",
"targetNode": "Agriculture",
"value": 0.882
},
{
"sourceNode": "Solid",
"targetNode": "Thermal generation",
"value": 400.12
},
{
"sourceNode": "Solid",
"targetNode": "Industry",
"value": 46.477
},
{
"sourceNode": "Thermal generation",
"targetNode": "Electricity grid",
"value": 525.531
},
{
"sourceNode": "Thermal generation",
"targetNode": "Losses",
"value": 787.129
},
{
"sourceNode": "Thermal generation",
"targetNode": "District heating",
"value": 79.329
},
{
"sourceNode": "Tidal",
"targetNode": "Electricity grid",
"value": 9.452
},
{
"sourceNode": "UK land based bioenergy",
"targetNode": "Bio-conversion",
"value": 182.01
},
{
"sourceNode": "Wave",
"targetNode": "Electricity grid",
"value": 19.013
},
{
"sourceNode": "Wind",
"targetNode": "Electricity grid",
"value": 289.366
}
],
"dimensions": [
{
"id": "sourceNode",
"alias": "Source",
"encoding": "source"
},
{
"id": "targetNode",
"alias": "Target",
"encoding": "target"
}
],
"measures": [
{
"id": "value",
"alias": "Flow"
}
],
"color": {
"colorScheme": [
"#0B6CFF",
"#3B8BFF",
"#00A6A6",
"#4DC3B2",
"#FF8A00",
"#FFB347",
"#7B61FF",
"#B39DFF",
"#4CAF50",
"#8BC34A"
]
},
"label": {
"enable": true,
"showDimension": true,
"showValue": true,
"labelFontSize": 10
},
"tooltip": {
"enable": true
},
"legend": {
"enable": true,
"position": "top",
"maxSize": 2,
"shapeType": "rectRound"
}
}
return <VSeedRender vseed={vseedConfig} />
}#透视图形桑基图
按区域与年份透视后的图形桑基图。区域映射到行，年份映射到列，每个透视单元内展示一张独立的 source-target 流向图。
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "sankey",
"dataset": [
{
"region": "East",
"year": "2023",
"sourceNode": "Coal",
"targetNode": "Power",
"value": 120
},
{
"region": "East",
"year": "2023",
"sourceNode": "Solar",
"targetNode": "Power",
"value": 80
},
{
"region": "East",
"year": "2023",
"sourceNode": "Power",
"targetNode": "Industry",
"value": 90
},
{
"region": "East",
"year": "2023",
"sourceNode": "Power",
"targetNode": "Homes",
"value": 70
},
{
"region": "East",
"year": "2024",
"sourceNode": "Coal",
"targetNode": "Power",
"value": 90
},
{
"region": "East",
"year": "2024",
"sourceNode": "Wind",
"targetNode": "Power",
"value": 110
},
{
"region": "East",
"year": "2024",
"sourceNode": "Power",
"targetNode": "Industry",
"value": 85
},
{
"region": "East",
"year": "2024",
"sourceNode": "Power",
"targetNode": "Homes",
"value": 95
},
{
"region": "West",
"year": "2023",
"sourceNode": "Gas",
"targetNode": "Power",
"value": 100
},
{
"region": "West",
"year": "2023",
"sourceNode": "Hydro",
"targetNode": "Power",
"value": 70
},
{
"region": "West",
"year": "2023",
"sourceNode": "Power",
"targetNode": "Industry",
"value": 80
},
{
"region": "West",
"year": "2023",
"sourceNode": "Power",
"targetNode": "Transport",
"value": 60
},
{
"region": "West",
"year": "2024",
"sourceNode": "Gas",
"targetNode": "Power",
"value": 85
},
{
"region": "West",
"year": "2024",
"sourceNode": "Hydro",
"targetNode": "Power",
"value": 95
},
{
"region": "West",
"year": "2024",
"sourceNode": "Power",
"targetNode": "Industry",
"value": 75
},
{
"region": "West",
"year": "2024",
"sourceNode": "Power",
"targetNode": "Transport",
"value": 88
}
],
"dimensions": [
{
"id": "sourceNode",
"alias": "Source",
"encoding": "source"
},
{
"id": "targetNode",
"alias": "Target",
"encoding": "target"
},
{
"id": "region",
"alias": "Region",
"encoding": "row"
},
{
"id": "year",
"alias": "Year",
"encoding": "column"
}
],
"measures": [
{
"id": "value",
"alias": "Flow"
}
],
"color": {
"colorScheme": [
"#0B6CFF",
"#3B8BFF",
"#00A6A6",
"#4DC3B2",
"#FF8A00",
"#FFB347",
"#7B61FF",
"#B39DFF"
]
},
"label": {
"enable": true,
"showDimension": true,
"showValue": true
},
"tooltip": {
"enable": true
},
"legend": {
"enable": true,
"position": "top"
}
}
return <VSeedRender vseed={vseedConfig} />
}