echart 桑基图

最新推荐文章于 2024-06-15 13:08:27 发布

青春的小白

最新推荐文章于 2024-06-15 13:08:27 发布

阅读量4.3k

点赞数

分类专栏： echarts3-0 文章标签： echarts3-0

本文链接：https://blog.csdn.net/bryBLOG/article/details/78615560

版权

echarts3-0 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果
这里写图片描述

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title>桑基图小例子</title>
    <meta http-equiv='Content-Type' content='text/html' charset='utf-8'/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="echarts.js"></script>
    <script type="text/javascript" src="ech.js"></script>
</head>
<body>
    <div id="echartsView" style="width: 800px;height:600px;">
        this is my echarts test.
    </div>
</body>

window.onload = function(){
    var myChart = echarts.init(document.getElementById('echartsView'));

    var nodes =[
{"name":"11", "p1":"123", "p2":"123", "p3":"123", "p4":"123", label: "lable1"},
{"name":"22", "p1":"123", "p2":"123", "p3":"123", "p4":"123", label: "lable2"},
{"name":"33", "p1":"123", "p2":"123", "p3":"123", "p4":"123", label: "lable3"},
{"name":"44", "p1":"123", "p2":"123", "p3":"123", "p4":"123", label: "lable4"},
{"name":"55", "p1":"123", "p2":"123", "p3":"123", "p4":"123", label: "lable5"},
{"name":"66", "p1":"123", "p2":"123", "p3":"123", "p4":"123", label: "lable6"},
{"name":"77", "p1":"123", "p2":"123", "p3":"123", "p4":"123", label: "lable7"},
{"name":"88", "p1":"123", "p2":"123", "p3":"123", "p4":"123", label: "lable8"},
{"name":"99", "p1":"123", "p2":"123", "p3":"123", "p4":"123", label: "lable4"},
]

        var links = [
{"source":"11","target":"55","value":"20", sourceName: 'lable1', targetName: 'lable5'},
{"source":"11","target":"66","value":"30", sourceName: 'lable1', targetName: 'lable6'},
{"source":"11","target":"77","value":"50", sourceName: 'lable1', targetName: 'lable7'},
{"source":"22","target":"55","value":"10", sourceName: 'lable2', targetName: 'lable5'},
{"source":"22","target":"66","value":"40", sourceName: 'lable2', targetName: 'lable6'},
{"source":"22","target":"77","value":"50", sourceName: 'lable2', targetName: 'lable7'},
{"source":"33","target":"55","value":"30", sourceName: 'lable3', targetName: 'lable5'},
{"source":"33","target":"66","value":"30", sourceName: 'lable3', targetName: 'lable6'},
{"source":"33","target":"77","value":"40", sourceName: 'lable3', targetName: 'lable7'},
{"source":"44","target":"55","value":"30", sourceName: 'lable4', targetName: 'lable5'},
{"source":"44","target":"66","value":"10", sourceName: 'lable4', targetName: 'lable6'},
{"source":"44","target":"77","value":"60", sourceName: 'lable4', targetName: 'lable7'},
{"source":"55","target":"88","value":"40", sourceName: 'lable5', targetName: 'lable8'},
{"source":"55","target":"99","value":"60", sourceName: 'lable5', targetName: 'lable4'},
{"source":"66","target":"88","value":"70", sourceName: 'lable6', targetName: 'lable8'},
{"source":"66","target":"99","value":"30", sourceName: 'lable6', targetName: 'lable4'},
{"source":"77","target":"88","value":"20", sourceName: 'lable7', targetName: 'lable8'},
{"source":"77","target":"99","value":"80", sourceName: 'lable7', targetName: 'lable4'},
];

    var option = {
        tooltip : {},
        backgroundColor : 'rgb(244, 245, 247)',
        color : [ 'rgb(0, 106, 212)', 'rgb(50, 190, 151)' ],
        series : [ {
            name : '桑基',
            type : 'sankey',
            nodeWidth : 100,
            nodeHeight : 100,
            nodes : nodes,
            links : links,
            lineStyle : {
                normal : {
                    color : 'rgb(108, 165, 211)'
                }
            },
            itemStyle : {
                normal : {
                    borderWidth : 0
                }
            },
            animation : true,
            tooltip : {
                formatter : function(a) {
                    var data = eval(a['data']);
                    if (data.label) {
                        return ('<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'
                                + a['color'] + '"></span>' + data.label + ' : ' + data.p1)
                    } else {
                        return (data.sourceName + ' -> ' + data.targetName
                                + ' : ' + data.value)
                    }
                }
            },
            label : {
                normal : {
                    position : 'insideLeft|insideTop',
                    formatter : function(a) {
                        var data = eval(a['data']);
                        return (data.label + '\n\n' + 'P1: ' + data.p1 + '\n'
                                + 'P2: ' + data.p2 + '\n' + 'P3: '
                                + data.p3 + '\n' + 'P4: ' + data.p4);
                    },
                    color : '#fff',
                    padding : [ 10, 0, 0, 10 ]
                }
            },
        } ]
    };

    myChart.setOption(option);
}

青春的小白

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
echart 桑基图

效果 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><head> <title>桑基图小例子</title> <meta h
复制链接

扫一扫

专栏目录