动态关系图(html,直接可以单独html运行),方便集成项目

简介: 动态关系图(html,直接可以单独html运行),方便集成项目

先上图:

image.png

这些图都是可以拖动的,每个全都是可以拖动的,拖动一个其他布局也发生相应的改变。因为博主暂时技能有限,弄不出静态图片,大家凑合着看吧😂😂。下面直接上代码,不闲聊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="garps" class="container" style="width: 800px;height: 600px">
<script src="https://assets.pyecharts.org/assets/main.js"></script>
    <script>
        var chart_b859ef36a1b245b2b1eb24efe9b62146 = echarts.init(
            document.getElementById('garps'), 'white', {renderer: 'canvas'});
        option = {
    backgroundColor: '#1a4377',
    grid: {
        left: '10%',
        top: 60,
        right: '10%',
        bottom: 60,
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: [{
        type: 'graph',
        layout: 'force',
        force: {
            repulsion: 1000,
            edgeLength: 70,
            layoutAnimation: true,
        },
        symbolSize: 70,
        nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
        roam: true, //缩放
        draggable: true, //节点是否可以拖拽
        focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
        edgeSymbol: ['circle', 'arrow'], //线2头标记
        label: {
            normal: {
                show: true,
                position: 'inside',
                color: 'gold'
            }
        },
        edgeLabel: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                },
                formatter: "{c}"
            }
        },
        categories: [{
            name: '亲人',
        }, {
            name: '租户',
            symbol: 'rect'
        }],
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#e0f55a' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#639564' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        },
        symbolKeepAspect: false,
        data: [{
                name: '李富贵',
            },
            {
                name: '王桂花',
            },
            {
                name: '李思思',
            },
            {
                name: '自住房屋',
            },
            {
                name: '车子',
            },
            {
                name: '租房',
            },
            {
                name: '黄涛',
            },
            {
                name: '于海',
            },
            {
                name: '张柏',
            },
            {
                name: '付梦杰',
            }
        ],
        links: [{
                source: 0,
                target: 1,
                value: '夫妻'
            },
            {
                source: 0,
                target: 2,
                value: '父女'
            },
            {
                source: 0,
                target: 3,
                value: '自住'
            },
            {
                source: 0,
                target: 4,
                value: '车主'
            },
            {
                source: 0,
                target: 5,
                value: '租户'
            },
            {
                source: 5,
                target: 6,
                value: '租赁'
            },
            {
                source: 5,
                target: 7,
                value: '租赁'
            },
            {
                source: 5,
                target: 8,
                value: '租赁'
            },
            {
                source: 5,
                target: 9,
                value: '租赁'
            }
        ],
    }]
}
chart_b859ef36a1b245b2b1eb24efe9b62146.setOption(option);
    </script>
</div>
</body>
</html>

也可以是这样

微信图片_20220926141518.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="garps" class="container" style="width: 800px;height: 600px">
<script src="https://assets.pyecharts.org/assets/main.js"></script>
    <script>
        var chart_b859ef36a1b245b2b1eb24efe9b62146 = echarts.init(
            document.getElementById('garps'), 'white', {renderer: 'canvas'});
        option = {
    backgroundColor: '#1a4377',
    grid: {
        left: '10%',
        top: 60,
        right: '10%',
        bottom: 60,
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: [{
        type: 'graph',
        layout: 'force',
        force: {
            repulsion: 1000,
            edgeLength: 70,
            layoutAnimation: true,
        },
        symbolSize: 70,
        nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
        roam: true, //缩放
        draggable: true, //节点是否可以拖拽
        focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
        edgeSymbol: ['circle', 'arrow'], //线2头标记
        label: {
            normal: {
                show: true,
                position: 'inside',
                color: 'gold'
            }
        },
        edgeLabel: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                },
                formatter: "{c}"
            }
        },
        categories: [{
            name: '亲人',
        }, {
            name: '租户',
            symbol: 'rect'
        }],
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },
        lineStyle: {
            normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#e0f55a' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#639564' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        },
        symbolKeepAspect: false,
        data: [{
                name: '李富贵',
            },
            {
                name: '王桂花',
            },
            {
                name: '李思思',
            },
            {
                name: '黄涛',
            },
            {
                name: '于海',
            },
            {
                name: '张柏',
            },
            {
                name: '付梦杰',
            }
        ],
        links: [{
                source: 0,
                target: 1,
                value: '夫妻'
            },
            {
                source: 0,
                target: 2,
                value: '父女'
            },
            {
                source: 0,
                target: 3,
                value: '自住'
            },
            {
                source: 0,
                target: 4,
                value: '车主'
            },
            {
                source: 0,
                target: 5,
                value: '租户'
            },
            {
                source: 0,
                target: 6,
                value: '租赁'
            }
        ],
    }]
}
chart_b859ef36a1b245b2b1eb24efe9b62146.setOption(option);
    </script>
</div>
</body>
</html>

拿去就能跑,不会要导js等包,因为是动态的地址

<script src="https://assets.pyecharts.org/assets/main.js"></script>

当需要这个js包的时候会自动去访问官网的这个js包,没有必要一定要把它下载到自己的电脑。

目录
相关文章
|
6天前
|
移动开发 监控 安全
mPaaS常见问题之Android集成dexPatch热修复运行时候无法正常进行热更新如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
42 0
|
6天前
|
开发工具 git
【HTML】两个实战项目
【HTML】两个实战项目
10 2
|
6天前
|
消息中间件 JSON Java
RabbitMQ的springboot项目集成使用-01
RabbitMQ的springboot项目集成使用-01
|
6天前
|
JavaScript Java
kkFileView在线文件预览与项目集成
kkFileView在线文件预览与项目集成
|
6天前
|
前端开发 UED
【专栏:HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上,注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动,以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
|
6天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
6天前
|
前端开发 测试技术 UED
【专栏:HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤,包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计,实现易用且具吸引力的展示效果。优化图片和代码,提升性能,以助企业在数字时代脱颖而出。
|
6天前
|
编解码 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】打造一个动态新闻网站
【4月更文挑战第30天】构建动态新闻网站,运用HTML和CSS提升编程技能和网页设计理解。项目包括首页、新闻列表页和详情页,设计简洁易用,包含顶部导航、轮播图和新闻列表。页面布局注重吸引力和易用性,色彩搭配选用冷色调为主,辅以亮色点缀。字体选择清晰易读,布局保持整洁。交互效果如轮播图、导航栏高亮和响应式设计增强用户体验。本文提供基础新闻网站构建指南,为进一步功能扩展和优化打下基础。
|
6天前
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
|
6天前
|
前端开发 测试技术 定位技术
【专栏:HTML 与 CSS 实战项目篇】构建一个企业级网站:HTML 与 CSS 实战
【4月更文挑战第30天】本文介绍了使用HTML和CSS构建企业级网站的实战步骤,包括项目概述、页面结构设计、HTML结构搭建、CSS样式设计、具体页面实现、优化与提升。通过合理布局、美观样式和响应式设计,创建现代、简洁的网站,包含主页、关于我们、产品展示、新闻动态和联系我们等页面。优化图片和代码,确保性能,助力企业在数字时代树立良好形象并提升沟通效率。

热门文章

最新文章