大数据可视化-echarts桑基图（HBuilderX）

摸摸小油头.

已于 2023-05-11 11:02:01 修改

阅读量254

点赞数

分类专栏：大数据可视化文章标签： echarts javascript ecmascript

于 2023-04-01 17:31:09 首次发布

本文链接：https://blog.csdn.net/weixin_64272885/article/details/129900252

版权

大数据可视化专栏收录该内容

10 篇文章 1 订阅

订阅专栏

效果图：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>
  <title>桑基图</title>
 </head>
 <body>
  <div id="main" style="width: 1100px;height:500px;"></div>
  <script type="text/javascript">
      var myChart=echarts.init(document.getElementById('main'));
   var option = {
    tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
  
    series:[{
          type: 'sankey',
          layout: 'none',
          focusNodeAdjacency: 'allEdges',
          data: [{
              name: 'a'
          }, {
              name: 'b'
          }, {
              name: 'a1'
          }, {
              name: 'a2'
          }, {
              name: 'b1'
          }, {
              name: 'c'
          }],
          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
          }]
      },
   ]
  };
  myChart.setOption(option); 
  </script>
  </body>
</html>

想要使用该图表,只需要复制以上代码

引入 ECharts 文件可以用上面代码中的方法

<script src="http://cdn.bootcss.com/echarts/4.8.0/echarts.js"></script>

也可以下载 echarts.js 在页面文件中引入即可.

echarts.js 下载链接: http://echarts.baidu.com/download.html

摸摸小油头.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录