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}]}

162Echarts - 桑基图（Sankey Diagram）相关推荐

superset可视化-桑基图(sankey diagram)
数据 https://gitee.com/fastsource/examples-data 下载energy.json.gz转化成csv[1] 然后通过datagrip导入mysql superset ...
统计图表之桑基图 sankey diagram
一种展现能量流动的图表. 典型场景有: 互联网流量来源与去向资金账户的收入与支出互联网用户不同生命周期之间的流转免费在线作图工具网上搜, 大多是付费软件的引流, 博主良心整理出无套路的即用即 ...
Echarts桑基图sankey点击高亮显示
Echarts桑基图sankey点击高亮显示 2022-02-21更新: 点击某一项将与其有关联的所有父项目和子项目全部高亮显示,并降低其他无关项目透明度,再次点击则恢复原有状态: 在线DEMO查看 ...
Python绘制桑基图Sankey,Pyecharts不显示html页面,桑基图只显示标题,原因总结
Python绘制桑基图Sankey,Pyecharts不显示html页面,桑基图只显示标题,原因总结说说使用上的三点注意: 1.nodes中的"name"不要重新命名,否则会不识 ...
D3 二维图表的绘制系列（二十二）桑基图sankey
上一篇: 仪表盘图 https://blog.csdn.net/zjw_python/article/details/98596174 下一篇: 旭日图 https://blog.csdn.net/z ...
pyechart数据可视化丨制作桑基图(sankey)的最简单方法
前言最近在分析超期库存数据, 每天4万条左右, 数据的特点是有很多分类变量, 为了展现这些变量的关系, 想到了桑吉图. Pyechart官网上有关于桑基图的案例, 但是如何用日常使用的excel数据 ...
echarts 桑基图sankey
是一种特殊的流图(可以看作是有向无环图)它主要用来表示原材料.能量等如何从最初形式经过中间过程的加工或转化达到最终状态1.配置datadata: [{name: 'node1',value, 节点的值 ...
R语言多层桑基图_流量结构分布图——桑基图（Sankey）
桑基图作为相对复杂的图表种类,平时很少用到,不仅仅是因为它的引用场景相对狭窄,另一方面则是制作难度相对较大,门槛较高. 不过针对第一个问题,如果你能很好地理解自己所涉及到的业务数据结构及想要表达和呈现 ...
python 桑基图_流量结构分布图——桑基图（Sankey）
原标题:流量结构分布图--桑基图(Sankey) 桑基图作为相对复杂的图表种类,平时很少用到,不仅仅是因为它的引用场景相对狭窄,另一方面则是制作难度相对较大,门槛较高. 不过针对第一个问题,如果你能很 ...

162Echarts - 桑基图（Sankey Diagram）

效果图

源代码

product.json

162Echarts - 桑基图（Sankey Diagram）相关推荐

最新文章

热门文章