AI 助理
备案控制台
开发者社区 云计算 文章 正文

162Echarts - 桑基图（Sankey Diagram）

2023-10-26 92
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 162Echarts - 桑基图（Sankey Diagram）
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="dist/extension/dataTool.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1024px;height:768px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      myChart.showLoading();
      $.get('data/product.json', function(data) {
        myChart.hideLoading();
        myChart.setOption(option = {
          title: {
            text: 'Sankey Diagram'
          },
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [{
            type: 'sankey',
            data: data.nodes,
            links: data.links,
            focusNodeAdjacency: true,
            levels: [{
              depth: 0,
              itemStyle: {
                color: '#fbb4ae'
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            }, {
              depth: 1,
              itemStyle: {
                color: '#b3cde3'
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            }, {
              depth: 2,
              itemStyle: {
                color: '#ccebc5'
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            }, {
              depth: 3,
              itemStyle: {
                color: '#decbe4'
              },
              lineStyle: {
                color: 'source',
                opacity: 0.6
              }
            }],
            lineStyle: {
              normal: {
                curveness: 0.5
              }
            }
          }]
        });
      });
      myChart.setOption(option);
    </script>
  </body>
</html>
product.json
{"nodes": [
      {"name": "Total"},
      {"name": "Environment"},
      {"name": "Land use"},
      {"name": "Cocoa butter (Organic)"},
      {"name": "Cocoa mass (Organic)"},
      {"name": "Hazelnuts (Organic)"},
      {"name": "Cane sugar (Organic)"},
      {"name": "Vegetables (Organic)"},
      {"name": "Climate change"},
      {"name": "Harmful substances"},
      {"name": "Water use"},
      {"name": "Resource depletion"},
      {"name": "Refrigeration"},
      {"name": "Packaging"},
      {"name": "Human rights"},
      {"name": "Child labour"},
      {"name": "Coconut oil (Organic)"},
      {"name": "Forced labour"},
      {"name": "Health safety"},
      {"name": "Access to water"},
      {"name": "Freedom of association"},
      {"name": "Access to land"},
      {"name": "Sufficient wage"},
      {"name": "Equal rights migrants"},
      {"name": "Discrimination"},
      {"name": "Working hours"}
   ],
   "links": [
      {"source": "Total", "target": "Environment", "value": 0.342284047256003},
      {"source": "Environment", "target": "Land use", "value": 0.32322870366987},
      {"source": "Land use", "target": "Cocoa butter (Organic)", "value": 0.177682517071359},
      {"source": "Land use", "target": "Cocoa mass (Organic)", "value": 0.137241325342711},
      {"source": "Land use", "target": "Hazelnuts (Organic)", "value": 0.00433076373512774},
      {"source": "Land use", "target": "Cane sugar (Organic)", "value": 0.00296956039863467},
      {"source": "Land use", "target": "Vegetables (Organic)", "value": 0.00100453712203756},
      {"source": "Environment", "target": "Climate change", "value": 0.0112886157414413},
      {"source": "Climate change", "target": "Cocoa butter (Organic)", "value": 0.00676852971933996},
      {"source": "Climate change", "target": "Cocoa mass (Organic)", "value": 0.00394686874786743},
      {"source": "Climate change", "target": "Cane sugar (Organic)", "value": 0.000315972058711838},
      {"source": "Climate change", "target": "Hazelnuts (Organic)", "value": 0.000218969462265292},
      {"source": "Climate change", "target": "Vegetables (Organic)", "value": 3.82757532567656e-05},
      {"source": "Environment", "target": "Harmful substances", "value": 0.00604275542495656},
      {"source": "Harmful substances", "target": "Cocoa mass (Organic)", "value": 0.0055125989240741},
      {"source": "Harmful substances", "target": "Cocoa butter (Organic)", "value": 0.000330017607892127},
      {"source": "Harmful substances", "target": "Cane sugar (Organic)", "value": 0.000200138892990337},
      {"source": "Harmful substances", "target": "Hazelnuts (Organic)", "value": 0},
      {"source": "Harmful substances", "target": "Vegetables (Organic)", "value": 0},
      {"source": "Environment", "target": "Water use", "value": 0.00148345269044703},
      {"source": "Water use", "target": "Cocoa butter (Organic)", "value": 0.00135309891304186},
      {"source": "Water use", "target": "Cocoa mass (Organic)", "value": 0.000105714137908639},
      {"source": "Water use", "target": "Hazelnuts (Organic)", "value": 1.33452642581887e-05},
      {"source": "Water use", "target": "Cane sugar (Organic)", "value": 8.78074837009238e-06},
      {"source": "Water use", "target": "Vegetables (Organic)", "value": 2.5136268682477e-06},
      {"source": "Environment", "target": "Resource depletion", "value": 0.000240519729288764},
      {"source": "Resource depletion", "target": "Cane sugar (Organic)", "value": 0.000226237279345084},
      {"source": "Resource depletion", "target": "Vegetables (Organic)", "value": 1.42824499436793e-05},
      {"source": "Resource depletion", "target": "Hazelnuts (Organic)", "value": 0},
      {"source": "Resource depletion", "target": "Cocoa mass (Organic)", "value": 0},
      {"source": "Resource depletion", "target": "Cocoa butter (Organic)", "value": 0},
      {"source": "Environment", "target": "Refrigeration", "value": 0},
      {"source": "Environment", "target": "Packaging", "value": 0},
      {"source": "Total", "target": "Human rights", "value": 0.307574096993239},
      {"source": "Human rights", "target": "Child labour", "value": 0.0410641202645833},
      {"source": "Child labour", "target": "Hazelnuts (Organic)", "value": 0.0105339381639722},
      {"source": "Child labour", "target": "Cocoa mass (Organic)", "value": 0.0105},
      {"source": "Child labour", "target": "Cocoa butter (Organic)", "value": 0.0087294420777},
      {"source": "Child labour", "target": "Coconut oil (Organic)", "value": 0.00474399974233333},
      {"source": "Child labour", "target": "Cane sugar (Organic)", "value": 0.00388226450884445},
      {"source": "Child labour", "target": "Vegetables (Organic)", "value": 0.00267447577173333},
      {"source": "Human rights", "target": "Forced labour", "value": 0.0365458590642445},
      {"source": "Forced labour", "target": "Hazelnuts (Organic)", "value": 0.0114913076376389},
      {"source": "Forced labour", "target": "Cocoa butter (Organic)", "value": 0.0081134807347},
      {"source": "Forced labour", "target": "Cocoa mass (Organic)", "value": 0.00765230236575},
      {"source": "Forced labour", "target": "Cane sugar (Organic)", "value": 0.004},
      {"source": "Forced labour", "target": "Vegetables (Organic)", "value": 0.00296668823626667},
      {"source": "Forced labour", "target": "Coconut oil (Organic)", "value": 0.00232208008988889},
      {"source": "Human rights", "target": "Health safety", "value": 0.0345435327843611},
      {"source": "Health safety", "target": "Hazelnuts (Organic)", "value": 0.0121419536385},
      {"source": "Health safety", "target": "Cocoa mass (Organic)", "value": 0.00766772850678333},
      {"source": "Health safety", "target": "Cocoa butter (Organic)", "value": 0.0056245892061},
      {"source": "Health safety", "target": "Coconut oil (Organic)", "value": 0.00361616847688889},
      {"source": "Health safety", "target": "Cane sugar (Organic)", "value": 0.00277374682533333},
      {"source": "Health safety", "target": "Vegetables (Organic)", "value": 0.00271934613075556},
      {"source": "Human rights", "target": "Access to water", "value": 0.0340206659360667},
      {"source": "Access to water", "target": "Cocoa mass (Organic)", "value": 0.0105},
      {"source": "Access to water", "target": "Cocoa butter (Organic)", "value": 0.0089274160792},
      {"source": "Access to water", "target": "Hazelnuts (Organic)", "value": 0.0054148022845},
      {"source": "Access to water", "target": "Cane sugar (Organic)", "value": 0.00333938149786667},
      {"source": "Access to water", "target": "Vegetables (Organic)", "value": 0.00314663377488889},
      {"source": "Access to water", "target": "Coconut oil (Organic)", "value": 0.00269243229961111},
      {"source": "Human rights", "target": "Freedom of association", "value": 0.0320571523941667},
      {"source": "Freedom of association", "target": "Hazelnuts (Organic)", "value": 0.0132312483463611},
      {"source": "Freedom of association", "target": "Cocoa butter (Organic)", "value": 0.0077695200707},
      {"source": "Freedom of association", "target": "Cocoa mass (Organic)", "value": 0.00510606573995},
      {"source": "Freedom of association", "target": "Vegetables (Organic)", "value": 0.00354321156324444},
      {"source": "Freedom of association", "target": "Cane sugar (Organic)", "value": 0.00240710667391111},
      {"source": "Freedom of association", "target": "Coconut oil (Organic)", "value": 0},
      {"source": "Human rights", "target": "Access to land", "value": 0.0315022209894056},
      {"source": "Access to land", "target": "Hazelnuts (Organic)", "value": 0.00964970063322223},
      {"source": "Access to land", "target": "Cocoa mass (Organic)", "value": 0.00938530207965},
      {"source": "Access to land", "target": "Cocoa butter (Organic)", "value": 0.0060110791848},
      {"source": "Access to land", "target": "Cane sugar (Organic)", "value": 0.00380818314608889},
      {"source": "Access to land", "target": "Vegetables (Organic)", "value": 0.00264795594564445},
      {"source": "Access to land", "target": "Coconut oil (Organic)", "value": 0},
      {"source": "Human rights", "target": "Sufficient wage", "value": 0.0287776757227333},
      {"source": "Sufficient wage", "target": "Cocoa mass (Organic)", "value": 0.00883512456493333},
      {"source": "Sufficient wage", "target": "Cocoa butter (Organic)", "value": 0.0078343367268},
      {"source": "Sufficient wage", "target": "Coconut oil (Organic)", "value": 0.00347879026511111},
      {"source": "Sufficient wage", "target": "Hazelnuts (Organic)", "value": 0.00316254211388889},
      {"source": "Sufficient wage", "target": "Vegetables (Organic)", "value": 0.00281013722808889},
      {"source": "Sufficient wage", "target": "Cane sugar (Organic)", "value": 0.00265674482391111},
      {"source": "Human rights", "target": "Equal rights migrants", "value" : 0.0271146645119444},
      {"source": "Equal rights migrants", "target": "Cocoa butter (Organic)", "value": 0.0071042315061},
      {"source": "Equal rights migrants", "target": "Cocoa mass (Organic)", "value": 0.00636673210005},
      {"source": "Equal rights migrants", "target": "Hazelnuts (Organic)", "value": 0.00601459775836111},
      {"source": "Equal rights migrants", "target": "Coconut oil (Organic)", "value": 0.00429185583138889},
      {"source": "Equal rights migrants", "target": "Cane sugar (Organic)", "value": 0.00182647471915556},
      {"source": "Equal rights migrants", "target": "Vegetables (Organic)", "value": 0.00151077259688889},
      {"source": "Human rights", "target": "Discrimination", "value": 0.0211217763359833},
      {"source": "Discrimination", "target": "Cocoa mass (Organic)", "value": 0.00609671700306667},
      {"source": "Discrimination", "target": "Cocoa butter (Organic)", "value": 0.0047738806325},
      {"source": "Discrimination", "target": "Coconut oil (Organic)", "value": 0.00368119084494444},
      {"source": "Discrimination", "target": "Vegetables (Organic)", "value": 0.00286009813604444},
      {"source": "Discrimination", "target": "Cane sugar (Organic)", "value": 0.00283706180951111},
      {"source": "Discrimination", "target": "Hazelnuts (Organic)", "value": 0.000872827909916666},
      {"source": "Human rights", "target": "Working hours", "value": 0.02082642898975},
      {"source": "Working hours", "target": "Hazelnuts (Organic)", "value": 0.0107216773848333},
      {"source": "Working hours", "target": "Coconut oil (Organic)", "value": 0.00359009052944444},
      {"source": "Working hours", "target": "Vegetables (Organic)", "value": 0.00212300379075556},
      {"source": "Working hours", "target": "Cocoa butter (Organic)", "value": 0.0018518584356},
      {"source": "Working hours", "target": "Cocoa mass (Organic)", "value": 0.00158227069058333},
      {"source": "Working hours", "target": "Cane sugar (Organic)", "value": 0.000957528158533333}
   ]}
关键词：
ECharts diagram
ECharts sankey
ECharts桑基图diagram
阿甘兄
目录
相关文章
阿甘兄
160Echarts - 桑基图（Sankey Node Align Left）
160Echarts - 桑基图（Sankey Node Align Left）
阿甘兄
126 0
阿甘兄
164Echarts - 桑基图（Sankey Orient Vertical）
164Echarts - 桑基图（Sankey Orient Vertical）
阿甘兄
48 0
阿甘兄
163Echarts - 桑基图（Basic Sankey）
163Echarts - 桑基图（Basic Sankey）
阿甘兄
84 0
阿甘兄
161Echarts - 桑基图（Sankey Node Align Right）
161Echarts - 桑基图（Sankey Node Align Right）
阿甘兄
81 0
阿甘兄
159Echarts - 桑基图（Sankey Diagram）
159Echarts - 桑基图（Sankey Diagram）
阿甘兄
135 0
阿甘兄
62Echarts - 饼图（Nightingale's Rose Diagram）
62Echarts - 饼图（Nightingale's Rose Diagram）
阿甘兄
44 0
邹荣乐
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器：ECharts组件的使用与技巧
微信小程序图表制作利器：ECharts组件的使用与技巧
邹荣乐
87 1
邹荣乐
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时，刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时，刻度没有对齐的两种解决方法
邹荣乐
550 0
杀死一只知更鸟debug
|
3月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式，包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码，以及对ECharts特性和优势的概述。
杀死一只知更鸟debug
117 0
Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】
theMuseCatcher
|
4月前
|
小程序 JavaScript
微信小程序使用echarts图表（ec-canvas）
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法，包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
theMuseCatcher
547 1
微信小程序使用echarts图表（ec-canvas）

热门文章

最新文章

  • 1
    一文带你封装Vue3 Echarts
  • 2
    前端echarts加标记点及标记线和提示框
  • 3
    Vue环境下，在单页面中遍历显示出多个Echarts图表
  • 4
    Echarts-地图全国主要城市的分布显示
  • 5
    Vue打包后Echarts图表不显示问题解决
  • 6
    echarts在.Net中使用实例(二) 使用ajax动态加载数据
  • 7
    Echarts图——饼图动态
  • 8
    ECharts使用小笔记
  • 9
    vue使用echarts实现世界地图和中国地图以及切换地图功能
  • 10
    vue中使用echarts实现动态图表多数据展示，带源码（x轴动态时间刷新，实时更新展示数据）
  • 1
    echarts 地图点位
    68
  • 2
    Echarts是一个开源的JavaScript可视化库，用于创建各种类型的图表
    158
  • 3
    数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
    757
  • 4
    Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
    693
  • 5
    vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
    184
  • 6
    vue3+echarts可视化——记录我的2023编程之旅
    117
  • 7
    selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）（二）
    78
  • 8
    selenuim&echarts——可视化分析csdn新星赛道选手展示头像、展示ip城市和断言参赛信息的有效性（进阶篇）（一）
    84
  • 9
    python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
    61
  • 10
    vue2、vue3分别配置echarts多图表的同步缩放（二）
    275

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)