Echarts绘制桑基图（零基础起步）

最新推荐文章于 2024-04-15 11:53:11 发布

Wynne 赵文越

最新推荐文章于 2024-04-15 11:53:11 发布

阅读量3.8k

点赞数 5

分类专栏：图计算文章标签：桑基图 Echarts 零基础路径分析

本文链接：https://blog.csdn.net/wenyuenpu/article/details/104260106

版权

图计算专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、下载Echarts

https://www.echartsjs.com/zh/download.html

比如选取4.6.0source下载到本地D盘

https://www.apache.org/dyn/closer.cgi/incubator/echarts/4.6.0/apache-echarts-4.6.0-incubating-src.zip

2、参考下面链接文档，构建 ECharts

https://www.echartsjs.com/zh/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts

3、5分钟上手绘制Echarts图

https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

4、桑基图示例代码（若本地构建完成则下面黑色字体https部分可以去掉，data部分即为桑基图的nodes部分，links部分即为桑基图的边links的三元组，color部分可以自行调色）

<!DOCTYPE html>
<html>
   <head>
       <title>Sankey</title>
       <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
       <meta name="apple-mobile-web-app-capable" content="yes"/>
       <meta name="viewport" content="width=device-width,initial-scale=2" />
       <script src="js/jquery-1.11.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.5.3/echarts.min.js"></script>

</head>
   <body>
       <div class="container"></div>
       <div class="line"></div>
   <div id="main" style="width: 400px;height:600px;"></div>
       <script type="text/javascript">
var data = [
{name: 'aa',value: 10},
{name: 'bb',value: 20},
{name: 'cc',value: 20},
{name: 'dd',value: 10},
{name: 'ee',value: 20},
{name: 'ff',value: 20} ];
var links = [
{source: 'aa',target: 'cc',value:3},
{source: 'aa',target: 'ff',value:4},
{source: 'aa',target: 'dd',value:3},
{source: 'bb',target: 'cc',value:8},
{source: 'bb',target: 'dd',value:9},
{source: 'bb',target: 'ff',value:3},
{source: 'ee',target: 'ff',value:3},
{source: 'ee',target: 'cc',value:3},
{source: 'ee',target: 'dd',value:3},
                   ] ;

var myChart = echarts.init(document.getElementById('main'));
var option =
       {        title: { text: 'Sankey Diagram' },
   tooltip: { trigger: 'item',
   triggerOn: 'mousemove' },
color : [ '#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'],
   series: [ { type: 'sankey',   //layout:'none',
                                   data: data,
                                   links: links,
                           itemStyle: { normal: { borderWidth:2,
       borderColor: '#aaa',
                   //label:{
                                       //
show: true,
               //       position:'insideLeft|insideRight'}

}
},
lineStyle: {normal: { color: 'source', curveness: 0.6 } } }
       ]
               }
myChart.setOption(option);
   </script>
   </body>
</html>