Echarts学习5_Echart画桑基图

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

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