echarts 人物关系图demo

最新推荐文章于 2023-05-23 17:10:44 发布
最新推荐文章于 2023-05-23 17:10:44 发布
阅读量1k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfbin5566/article/details/118709684
版权 
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;

option = {
    title: {
        text: 'Graph 简单示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
        {
            type: 'graph',
            layout: 'circular',
            symbolSize: 50,
            roam: true,
            label: {
                show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [3, 10],
            focusNodeAdjacency: true,
            edgeLabel: {
                 normal: {
                    show: true,
                    textStyle: {
                        fontSize: 20
                    },
                    formatter: "{c}"
                }
            },
            // layout:'',
            data: [{
                name: '人物1',
                // x: 300,
                // y: 300
            }, {
                name: '人物2',
                // x: 800,
                // y: 300
            }, {
                name: '人物3',
                // x: 550,
                // y: 100
            }, {
                name: '人物4',
                // x: 550,
                // y: 500
            },{
                name: '人物5',
                // x: 580,
                // y: 400
            }],
            // links: [],
            links: [{

                source:0,
                target: 2,
                value: '父亲',
                // symbolSize: [5, 20],
                // label: {
                //     show: true,
                // },
                lineStyle: {
                    color: 'red',
                    curveness: '-0.4'
                }
            },{

                source:2,
                target: 0,
                value: '儿子',
                // symbolSize: [5, 20],
                // label: {
                //     show: true,
                // },
                lineStyle: {
                    color: 'pink',
                    curveness: 0.4
                }
            }, {
                source: 2,
                target: 3,
                value: '情人',
                lineStyle: {
                    curveness: -0.2
                }
            }, {
                source: 4,
                target: 0,
                value: '夫妻',
                lineStyle: {
                    color:'blue',
                    curveness: 0.1
                }
            }, {
                source: 0,
                target: 4,
                value: '夫妻',
                lineStyle: {
                    color:'red',
                    curveness: '-0.1'
                }
            },{
                source: 1,
                target: 2,
                value: '朋友',
            }, {
                source: 1,
                target: 3,
                value: '朋友',
            }, {
                source: 0,
                target: 3,
                value: '情人',
            }],
            lineStyle: {
                opacity: 0.9,
                width: 2,
                curveness: 0
            }
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}
</script>
</body>
</html>

 

具体参数说明参考官方文档：https://echarts.apache.org/zh/option.html#series-graph.type

木子李0531
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Echarts开发人物关系网络图
xqhadoop的博客
10-19 9919
引言: 人物关系可视化是将人与人之之间通过某属性进行连接而形成的关系网络,通过可视化技术展现出来。而baidu的Echarts是一款非常敏捷,迅速,酷炫的js可视化工具1.Echarts介绍ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 C
echart四象图图demo
secretkevin的博客
07-27 234
echarts四象图
echarts-5.1.2世界地图demo
12-07
应公司需求做了一个世界地图事实热点跟踪。定时轮播新闻。基于echarts 。里面包含world.js 的中文版。备注写的比较详细。
echarts人物关系图
12-04
根据Echarts生成人物关系图.
人物关系图谱:ECharts 实现
weixin_38409915的博客
03-04 4611
1、什么是ECharts ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库，相信有很多国内用户使用。 官网 https://echarts.apache.org/ 2、开始简单配置关系图 1、首先配置series的type为graph。 2、layout为force，layout可以选择none、circular和force ‘none’ 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。 ‘circular’ 采用环形布局。 ‘fo
ECharts 实现人民的名义关系图谱 代码开源
dingding5205205200的博客
06-07 2120
1、什么是ECharts ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库，相信有很多国内用户使用。 官网http://echarts.baidu.com/ 2、开始简单配置关系图 1、首先配置series的type为graph。 2、layout为force，layout可以选择none、circul...
漏刻有时数据可视化Echarts组件开发(10):唐宋八大家人物关系图
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
04-21 1076
人物关系图要点 数据格式： category 类别分类； nodes，同data,核心数据； links，节点间的关系数据； 如何将二维数据梳理成标准格式，是数据整理的一个难点。 var categories = [{name: "核心人物"}, {name: "朋友"}, {name: "父子"}, {name: "兄弟"}, {name: "政敌"}, {name: "师生"}]; var nodes = [ {id: 1, category: 0, name: .
echarts关系拓扑图
June_Wong的博客
12-12 1707
<template> <div> <!-- 这里是要渲染的图表 --> <div :id="chartId" style="width: 100%;height: 100%;"></div> </div> </template>
ECharts插件DEMO--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
12-22
在这个特定的示例中，"ECharts插件DEMO--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条"是一个针对ECharts的扩展，它特别关注于构建更加复杂和动态的人物关系图，并通过添加横纵滚动条来增强用户...
前端echarts词云图完整demo，+配置参数详解
03-25
在前端开发中，ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及我们今天关注的词云图。本篇将详细讲解如何使用ECharts创建一个完整的词云图示例，并对相关的配置...
echarts动态关系图示例
11-02
echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。
echarts前端统计图DEMO
12-18
**ECharts前端统计图DEMO** 是一个基于jQuery和ECharts的统计图表示例集合，旨在帮助开发者快速理解和应用ECharts库。ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它支持丰富的图形类型，如柱状图、...
echarts地图（河北省）demo例子
08-21
uniapp实现echarts地图（河北省）完整demo例子，下载运行查看效果，复制即用。效果图：https://blog.csdn.net/qq_45978154/article/details/126457527
知识图谱可视化——《间客》人物关系
诗酒趁年华。
04-07 3159
知识图谱可视化——《间客》人物关系 借鉴echarts的《间客》人物关系案例完成了知识图谱可视化。 存在疑问是： 1、如何将图谱可视化体现业务价值？ 2、如何结合QA问答交互，同步更新可视化内容以实现问答系统实时可视化呢？ 代码参考如下： // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { tooltip: { show:
eachers关系图动态设置坐标_主星序与主序星区别与思考，赫罗图是否是混沌坐标系呢？...
weixin_42126749的博客
12-14 1385
主星序与主序星的区别以恒星光度为纵轴，越亮的恒星越在图中的上端。以恒星表面温度和光谱为横轴，恒星温度越高，就越靠近左侧。这就是著名的赫罗图。从图中可以看出，大部分的恒星，从蓝超巨星到红矮星，都集中在一条对角线条带上。这就是主星序。 90%的恒星一生都会在主星序上度过。位列主星序上的恒星被称为主序星。太阳就是主序星。它是20世纪初由丹麦天文学家E·赫茨普龙和美国天文学家H·N·罗素分别发现的。简称赫...
echarts——关系图
月来better
05-23 665
echarts——关系图
echarts实现人物树形关系图实例
热门推荐
guorui_cara的博客
11-14 4万+
写这个栗子的时候主要因为是刚刚做一个项目，要用到人物关系图，所以一直在找合适插件，最后选择echarts2.0的tree图最合适这个关系图了。哈哈，话不多少，现在就把效果图献上吧。 ps:照片是网上下载的,莫要见外啊。 这个使用的是echarts2.X版本 HTML代码<style type="text/css"> *{ margin: 0; pad
echarts人物关系图_零基础学习数据可视化pyecharts人物关系图开发
weixin_39559469的博客
11-29 709
Pyecharts人物关系图开发1. Pyecharts版本说明Pyecharts的版本最新版本为1.7.0版本，此版本跟0.5版本的使用方法不一样了。很多参数方法配置不一样了。Import的内容也不一样了。官方的例子主要是采用函数定义，方法采用链式传导操作方法，参数配置项也有变化。建议使用json或字典模式，时候前后台系统，更符合echart的开发思路，方便扩展。2. 基础人物关系图开发说明关系...
Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印 方便用于小论文写作，方便用于毕业设计
最新发布
07-20
Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可
echarts 3d柱状图 demo
05-12
以下是一个基本的echarts 3D柱状图demo： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 3D Bar Chart Example</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> <script> var myChart = echarts.init(document.getElementById('chart')); var data = [ [0, 0, 0, 2], [0, 1, 0, 3], [0, 2, 0, 4], [1, 0, 0, 5], [1, 1, 0, 6], [1, 2, 0, 7], [2, 0, 0, 8], [2, 1, 0, 9], [2, 2, 0, 10] ]; myChart.setOption({ tooltip: {}, visualMap: { max: 10, inRange: { color: ['#e0ffff', '#006edd'] } }, xAxis3D: { type: 'category', data: ['A', 'B', 'C'] }, yAxis3D: { type: 'category', data: ['X', 'Y', 'Z'] }, zAxis3D: { type: 'value' }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { // projection: 'orthographic' }, light: { main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } } }, series: [{ type: 'bar3D', data: data.map(function (item) { return { value: [item[1], item[0], item[2], item[3]] } }), shading: 'lambert', label: { textStyle: { fontSize: 16, borderWidth: 1 }, formatter: function (param) { return param.value[3]; } }, itemStyle: { opacity: 0.8 }, emphasis: { label: { textStyle: { fontSize: 20, color: '#900' } }, itemStyle: { color: '#900' } } }] }); </script> </body> </html> ``` 在这个demo中，我们使用了echarts 5.2.1版本，定义了一个3D柱状图，并设置了x、y、z轴的数据和光照等参数。你可以根据需要自定义数据和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木子李0531

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值