桑基图:能量平衡图,用来观察数据的流转情况。

myChart.setOption(option);

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)设置桑基图:
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
}
}
}
]}
var option = {
//标题
title: {
(6)使用刚指定的配置项和数据显示图表:
(7)效果图:
原文来自:http://blog.sina.com.cn/s/blog_177bc7c8c0102xcfm.html