Echarts学习5_Echart画桑基图

本文介绍如何使用ECharts库绘制桑基图,并详细解释了从数据准备到图表展示的整个过程。提供了完整的JSON数据示例及配置选项,帮助读者快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

桑基图:能量平衡图,用来观察数据的流转情况。
echart画桑基图的流程:
(1)引如echart脚本:
该脚本的下载地址:http://echarts.baidu.com/download.html下载"源代码",该脚本有常见的警告和提示;
(2)html为桑基图保留展示区域:

(3)引数据:
数据包括节点和关联两部分
json数据如下:
节点数据
var nodes =[
{"name":"Andriod3"},
{"name":"服务频道2"},
{"name":"其它2"},
{"name":"服务频道4"},
{"name":"服务频道3"},
{"name":"乙方2"},
{"name":"乙方3"},
{"name":"其它3"},
{"name":"Andriod4"},
{"name":"Andriod2"},
{"name":"其它4"},
{"name":"Andriod1"},
{"name":"乙方4"},
{"name":"乙方5"},
{"name":"Andriod5"},
{"name":"服务频道5"},
{"name":"其它5"},
]
关联数据
var links = [
{"source":"Andriod1","target":"Andriod2","value":"65"},
{"source":"乙方3","target":"Andriod4","value":"1"},
{"source":"乙方2","target":"Andriod3","value":"1"},
{"source":"服务频道3","target":"Andriod4","value":"2"},
{"source":"Andriod2","target":"Andriod3","value":"48"},
{"source":"服务频道2","target":"其它3","value":"1"},
{"source":"乙方2","target":"服务频道3","value":"1"},
{"source":"Andriod3","target":"Andriod4","value":"35"},
{"source":"Andriod2","target":"服务频道3","value":"3"},
{"source":"Andriod4","target":"服务频道5","value":"3"},
{"source":"Andriod3","target":"乙方4","value":"1"},
{"source":"Andriod1","target":"服务频道2","value":"6"},
{"source":"服务频道2","target":"服务频道3","value":"2"},
{"source":"其它2","target":"Andriod3","value":"1"},
{"source":"服务频道4","target":"Andriod5","value":"1"},
{"source":"Andriod2","target":"乙方3","value":"1"},
{"source":"Andriod1","target":"乙方2","value":"2"},
{"source":"服务频道2","target":"Andriod3","value":"1"},
{"source":"Andriod1","target":"其它2","value":"1"},
{"source":"乙方4","target":"Andriod5","value":"1"},
{"source":"服务频道3","target":"服务频道4","value":"3"},
{"source":"Andriod4","target":"Andriod5","value":"26"},
];
注意:如果你的数据是csv或者xlsx格式的,可将数据通过在线工具转换,连接如下http://www.bejson.com/json/col2json/
(4)设置对象,通过id获取html画图区域:
var myChart = echarts.init(document.getElementByIdx_x('main'));
(5)设置桑基图:
var option = {
//标题
title: {
            text: 'Sankey Diagram'
       },
       //工具提示
       tooltip: {
           trigger: 'item',
           triggerOn: 'mousemove'

       },
       series: [
           {
            //图的类型
               type: 'sankey',
               layout:'none',
               //图中所用数据,就是上面引入的数据,包括节点和关联两部分
               data: nodes,
               links:links,
               itemStyle: {
                   normal: {
                       borderWidth: 1,
                       borderColor: '#aaa'
                   }
               },
               //线条样式
               lineStyle: {
                   normal: {
                       curveness: 0.5
                   }
               }
           }
        ]} 
(6)使用刚指定的配置项和数据显示图表:
   myChart.setOption(option);
(7)效果图:



原文来自:http://blog.sina.com.cn/s/blog_177bc7c8c0102xcfm.html

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值