韦恩图、漏斗图、桑基图、关系图【html/echarts/d3】

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

weixin_74

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

阅读量4.1k

点赞数 3

分类专栏： Visual 文章标签： html echarts

本文链接：https://blog.csdn.net/weixin_44727274/article/details/117112133

版权

Visual 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1、韦恩图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3韦恩图</title>
    <style>
        body {
            font-size: 16px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    </style>
</head>
<body>
<div id="venn"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="../static/js/venn.js"></script>
<script>
    <!--集合数据设置集合大小及各集合交集大小-->
    var sets = [
        {sets: ["信息A"], size: 12},
        {sets: ["信息B"], size: 12},
        {sets: ["信息C"], size: 12},
        {sets: ["信息A", "信息B"], size: 4, label: "AB"},
        {sets: ["信息A", "信息C"], size: 4, label: "AC",},
        {sets: ["信息B", "信息C"], size: 4, label: "BC"},
        {sets: ["信息A", "信息B", "信息C"], size: 2, label: "ABC"}
    ];
    <!-- 韦恩图设置 -->
    var chart = venn.VennDiagram()
    chart.wrap(false)
        .width(640)
        .height(640);
    <!-- d3设置 -->
    var div = d3.select("#venn").datum(sets).call(chart);
    div.selectAll("text").style("fill", "white");
    div.selectAll(".venn-circle path").style("fill-opacity", .6);
</script>

</body>
</html>

2、漏斗图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts漏斗图(对比)</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '漏斗图(对比)',
            subtext: '纯属虚构',
            left: 'center',
            top: 'bottom'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        // 图例设置
        legend: {
            orient: 'vertical',
            left: 'left',
            top: '20%',
            data: ['展现', '点击', '订单', '咨询', '访问']
        },
        series: [
            // 项目A对应漏斗图设置
            {
                name: '项目A',
                type: 'funnel',
                width: '40%',
                height: '45%',
                left: '5%',
                top: '40%',
                sort: 'ascending',
                funnelAlign: 'right',
                data: [
                    {value: 60, name: '访问'},
                    {value: 30, name: '咨询'},
                    {value: 10, name: '订单'},
                    {value: 80, name: '点击'},
                    {value: 100, name: '展现'}
                ]
            },
            // 项目B对应漏斗图设置
            {
                name: '项目B',
                type: 'funnel',
                width: '40%',
                height: '45%',
                left: '55%',
                top: '40%',
                sort: 'ascending',
                funnelAlign: 'left',

                data: [
                    {value: 60, name: '访问'},
                    {value: 15, name: '咨询'},
                    {value: 10, name: '订单'},
                    {value: 80, name: '点击'},
                    {value: 100, name: '展现'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

3、桑基图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts桑基图</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 设置国家、城市对应颜色
    var city = {
        '北京': '#a56982',
        '上海': '#2f4554',
        '英国': '#61a0a8',
        '日本': '#d48265',
        '法国': '#749f83'
    }
    // 设置移民关系及数量
    // 如：source: "英国", target: "北京", value: 5942
    // 表示从英国移动到北京，人数为5942
    var population = [
        {source: "英国", target: "北京", value: 5942},
        {source: "英国", target: "上海", value: 1059},
        {source: "日本", target: "北京", value: 1543},
        {source: "日本", target: "上海", value: 2134},
        {source: "法国", target: "北京", value: 1568},
        {source: "法国", target: "上海", value: 6954}];
    var data = [];
    var citylist = [];
    for (var key in city) {
        citylist.push(
            {name: key, itemStyle: {color: city[key]}}
        )
    }
    for (var i = 0; i < population.length; i++) {
        var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: city[population[i].source]
            }, {
                offset: 1,
                color: city[population[i].target]
            }]
        )
        data.push(
            {
                source: population[i].source,
                target: population[i].target,
                value: population[i].value,
                lineStyle: {
                    color: color
                }
            }
        )
    }
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '桑基图之城市移民人口统计',
            subtext: '纯属虚构',
            top: 'bottom',
            left: '20%'
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'sankey',
                data: citylist,
                top: '20%',
                height: '65%',
                links: data,
                focusNodeAdjacency: 'allEdges',
                itemStyle: {
                    borderWidth: 1,
                    color: '#1b6199',
                    borderColor: '#fff'
                },
                lineStyle: {
                    curveness: 0.5,
                    opacity: 0.5
                }
            }
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</body>
</html>

4、关系图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts关系图</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style type="text/css">
        html, body, #main {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0
        }
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=""></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    option = {
        title: {text: '人民的名义关系图谱'},
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        series: [
            {
                type: 'graph',
                layout: 'force',
                symbolSize: 80,
                roam: true,
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                force: {
                    repulsion: 2500,
                    edgeLength: [10, 50]
                },
                draggable: true,
                itemStyle: {
                    normal: {
                        color: '#4b565b'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#4b565b'

                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function (x) {
                            return x.data.name;
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {}
                    }
                },
                // 人物数据
                data: [
                    {
                        name: '侯亮平',
                        des: '最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，<br/>正义战胜邪恶，自己也迎来了成长。',
                        symbolSize: 100,
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    }, {
                        name: '李达康',
                        des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>但为人过于爱惜自己的羽毛，对待身边的亲人和朋友显得有些无情。',
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    }, {
                        name: '祁同伟',
                        des: '汉东省公安厅厅长',
                        symbolSize: 100
                    }, {
                        name: '陈岩石',
                        des: '离休干部、汉东省检察院前常务副检察长。充满正义，平凡而普通的共 产 党人。<br/>对大老虎赵立春，以各种形式执着举报了十二年。<br/>在这场关系党和国家生死存亡的斗争中，老人家以耄耋高龄，<br/>义无反顾地背起了炸 药包，在反腐胜利前夕因病去世。',
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    }, {
                        name: '陆亦可',
                        des: '汉东省检察院反贪局一处处长',
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    }, {
                        name: '高育良',
                        des: '汉东省省委副书记兼政法委书记。年近六十，是一个擅长太极功夫的官场老手。侯亮平、陈海和祁同伟是其学生。',
                        symbolSize: 100
                    }, {
                        name: '沙瑞金',
                        des: '汉东省省委书记',
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    }, {
                        name: '高小琴',
                        des: '山水集团董事长，是一位叱咤于政界和商界的风云人物，处事圆滑、精明干练。'
                    }, {
                        name: '赵东来',
                        des: '汉东省京州市公安局局长，充满正义，整治恶势力，<br/>在与检察部门的合作中从最初的质疑到之后的通力配合。',
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    }, {
                        name: '赵瑞龙',
                        des: '副国级人物赵立春的公子哥，官二代，打着老子的旗子，<br/>黑白两道通吃，可谓呼风唤雨，权倾一时。',
                    }, {
                        name: '赵立春',
                        des: '副国级领导人，曾经的改革闯将，在权利面前，显得极其渺小。',
                    }, {
                        name: '陈海',
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    }, {
                        name: '蔡成功'
                    }, {
                        name: '丁义珍'
                    }, {
                        name: '欧阳菁'
                    }
                ],
                // 各人物之间的关系
                links: [
                    {
                        source: '高育良',
                        target: '侯亮平',
                        name: '师生',
                        des: '侯亮平是高育良的得意门生'
                    }, {
                        source: '高育良',
                        target: '祁同伟',
                        name: '师生'
                    }, {
                        source: '赵立春',
                        target: '高育良',
                        name: "前领导"
                    }, {
                        source: '赵立春',
                        target: '赵瑞龙',
                        name: "父子"
                    }, {
                        source: '李达康',
                        target: '赵立春',
                        name: "前任秘书"
                    }, {
                        source: '祁同伟',
                        target: '高小琴',
                        name: "情人"
                    }, {
                        source: '陈岩石',
                        target: '陈海',
                        name: "父子"
                    }, {
                        source: '陆亦可',
                        target: '陈海',
                        name: "属下"
                    }, {
                        source: '沙瑞金',
                        target: '陈岩石',
                        name: "故人"
                    }, {
                        source: '祁同伟',
                        target: '陈海',
                        name: "师哥"
                    }, {
                        source: '祁同伟',
                        target: '侯亮平',
                        name: "师哥"
                    }, {
                        source: '侯亮平',
                        target: '陈海',
                        name: "同学，生死朋友"
                    }, {
                        source: '陈海',
                        target: '赵东来',
                        name: "朋友"
                    }, {
                        source: '赵东来',
                        target: '陆亦可',
                        name: "爱慕"
                    }, {
                        source: '赵瑞龙',
                        target: '祁同伟',
                        name: "勾结",
                        symbolSize: '1',
                    }, {
                        source: '李达康',
                        target: '赵东来',
                        name: "领导"
                    }, {
                        source: '沙瑞金',
                        target: '李达康',
                        name: "领导"
                    }, {
                        source: '沙瑞金',
                        target: '高育良',
                        name: "领导"
                    }, {
                        source: '李达康',
                        target: '欧阳菁',
                        name: "夫妻"
                    }, {
                        source: '赵瑞龙',
                        target: '高小琴',
                        name: "勾结，腐化",
                        symbolSize: '1'
                    }, {
                        source: '蔡成功',
                        target: '侯亮平',
                        name: "发小"
                    }, {
                        source: '蔡成功',
                        target: '欧阳菁',
                        name: "举报",
                        lineStyle: {
                            normal: {
                                type: 'dotted',
                                color: '#000'
                            }
                        }
                    }, {
                        source: '李达康',
                        target: '丁义珍',
                        name: "领导"
                    }, {
                        source: '高小琴',
                        target: '丁义珍',
                        name: "策划出逃"
                    }, {
                        source: '祁同伟',
                        target: '丁义珍',
                        name: "勾结"
                    }, {
                        source: '赵瑞龙',
                        target: '丁义珍',
                        name: "勾结"
                    }]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

weixin_74

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
韦恩图、漏斗图、桑基图、关系图【html/echarts/d3】

1、韦恩图<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>D3韦恩图</title> <style> body { font-size: 16px; font-family: "Helvetica Neue", Helvetica, Arial
复制链接

扫一扫