echarts 基础流图

下定决心，好好过一天 ~

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    series: {
        type: 'sankey', //是一种特殊的流图（可以看作是有向无环图）。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。
        layout: 'none',
        emphasis: { //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
            focus: 'adjacency' //'none' 不淡出其它图形，默认使用该配置。
            //'self' 只聚焦（不淡出）当前高亮的数据的图形。
            
            //'series' 聚焦当前高亮的数据所在的系列的所有图形。
            
            //'adjacency' 聚焦关系图中的邻接点和边的图形
        },
        data: [{ //节点
            name: 'a'
        }, {
            name: 'b'
        }, {
            name: 'a1'
        }, {
            name: 'a2'
        }, {
            name: 'b1'
        }, {
            name: 'c'
        }],
        links: [{ //链接关系和value表示流图宽度的大小
            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
        }]
    }
};

option && myChart.setOption(option);