• 学习:知识的初次邂逅
  • 复习:知识的温故知新
  • 练习:知识的实践应用

目录

一,来历

二,概述

三,特点

四,应用场景

五,代码绘制与效果演示


一,来历

  • 桑基图(Sankey Diagram)是以爱尔兰船长马修・亨利・菲尼亚斯・赖尔・桑基(Matthew Henry Phineas Riall Sankey)的名字命名的。
  • 1898 年,桑基在他的论文 “对蒸汽机能量效率的研究” 中使用了这种图表来展示能量的流动,通过这种可视化方式有效地描述了能量在不同阶段的分配和转化情况。最初主要应用于工程和物理学领域,用于分析能量、物质等的流动过程。
  • 随着数据可视化技术的发展,桑基图的应用范围不断扩大,被广泛用于各个领域来展示各种类型的流量数据。

二,概述

  • 桑基图是一种特殊的流程图,主要用于展示数据的流动和转换过程。它由多个节点和连接这些节点的有向边(流)组成。
  • 节点通常代表不同的实体、阶段或类别,而边的宽度与流量的大小成正比。
  • 例如,在一个展示水资源循环的桑基图中,节点可能包括降水、蒸发、地表径流、地下水等环节,边则表示水从一个环节流向另一个环节的过程,边的宽度表示水量的多少。

三,特点

  • 直观展示流量关系
    • 桑基图最显著的特点是能够非常直观地展示数据在不同节点之间的流动和转换情况。通过边的宽度来表示流量大小,用户可以一眼看出哪些路径的流量大,哪些路径的流量小。
    • 例如,在分析互联网用户在不同网站之间的流量转移时,桑基图可以清晰地展示用户从一个网站流向另一个网站的流量规模,帮助网站运营者了解用户的行为模式和流量分布。
  • 流量守恒原则
    • 桑基图遵循流量守恒定律,即进入某个节点的流量总和等于离开该节点的流量总和。这一特点使得它在展示具有流转性质的数据时非常准确和合理。
    • 例如,在展示能源的生产、传输和消耗过程中,桑基图可以确保在每个能源转换节点(如发电厂、变电站、用户端),输入的能量等于输出的能量(考虑损耗),从而清晰地反映能源的整个流转过程。
  • 层次结构展示能力
    • 它可以展示具有一定层次结构的流量数据。通过合理安排节点和连接边,可以体现数据在不同层次之间的流动关系。
    • 例如,在企业供应链管理中,桑基图可以从原材料供应商开始,经过生产加工环节、仓储环节,再到销售渠道和最终消费者,展示产品在整个供应链各个层次的流动情况,帮助企业优化供应链流程。
  • 动态数据展示潜力
    • 桑基图有一定的潜力用于展示动态数据,即随着时间或其他因素变化的流量数据。通过动画或系列图的形式,可以展示流量的变化趋势。
    • 例如,在展示金融市场资金的流动变化时,可以制作一系列桑基图来展示不同时间点资金在不同金融产品和机构之间的流动情况,从而帮助投资者和监管者了解资金的动态变化趋势。

四,应用场景

  • 能源与资源管理
    • 能源流动分析
      • 用于展示能源(如电力、石油、天然气等)从生产、传输到消费的整个过程。可以清晰地看到能源在不同环节的损耗情况,以及不同能源来源和消费领域之间的关系。例如,在电力系统中,桑基图可以展示从发电厂(包括不同能源类型的发电厂,如火力、水力、风力等)到变电站,再到各类用户(工业、商业、居民等)的电力输送和分配过程,帮助能源规划者优化电网布局和能源配置。
    • 水资源管理
      • 在水资源领域,桑基图可以展示水资源的循环过程,包括降水、地表水和地下水的相互转换,以及水资源在农业、工业、生活用水等不同用途之间的分配情况。这有助于水资源管理者合理规划水资源的开发和利用,以及制定节水策略。
  • 经济与金融领域
    • 资金流动分析
      • 在金融市场中,桑基图可以展示资金在不同金融机构(如银行、证券、基金等)之间的流动,以及资金在各种金融产品(如股票、债券、理财产品等)之间的分配情况。例如,在分析银行间资金拆借市场时,桑基图可以展示资金从资金充裕的银行流向资金短缺的银行的过程和规模,帮助金融监管者监测金融市场的流动性风险。
    • 产业经济分析
      • 用于展示产业之间的经济联系和价值流动。可以从原材料产业开始,展示原材料经过加工制造产业、服务业等不同产业环节的价值增值过程,以及产业之间的投入产出关系。这有助于经济学家和产业规划者理解产业结构和经济运行机制,制定产业政策。

五,代码绘制与效果演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts.js"></script>
</head>

<body>

    <div id="containersangji" style="width:600px;height:400px"></div>
    <script>

        var myChartss = echarts.init(document.getElementById("containersangji"))
        var data = [
            {name: "a"},
            {name: "a1"},
            {name: "a2"},
            {name: "b"},
            {name: "b1"},
            {name: "c"}
        ]
        var links = [   //转化过程 加什么 然后产生什么结果
            {
                source: "a",
                target: "a1",
                value: 5
            },
            {
                source: 'a',
                target: 'a2',
                value: 3
            },
            {
                source: 'b',
                target: 'b1',
                value: 8
            },
            {
                source: 'a',
                target: 'b1',
                value: 3
            },
            {
                source: 'b1',
                target: 'a1',
                value: 1
            },
            {
                source: 'b1',
                target: 'c',
                value: 2
            }
        ]
        var optionss = {
            series: {
                type: "sankey", //桑基图的类目
                labelLayout: {  //默认标签对齐方式
                    align: "left"
                },
                data: data,
                links: links
            }
        }
        myChartss.setOption(optionss)

    </script>

</body>

</html>

  • 学习:知识的初次邂逅
  • 复习:知识的温故知新
  • 练习:知识的实践应用

更多推荐