绘制自己的人际关系图_VUE ECharts人际关系图

最新推荐文章于 2023-03-14 15:13:51 发布
最新推荐文章于 2023-03-14 15:13:51 发布
阅读量626 收藏 1
点赞数
文章标签： 绘制自己的人际关系图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39799565/article/details/111554046
版权

name:"personRelation",

data() {return{

myChart:null,

chartData:[],

chartLink:[]

}

},

mounted() {this.initEchart()

},

methods: {

initEchart() {

let dom= document.getElementById("container");this.myChart =echarts.init(dom);this.chartData=this.dataEChart();this.chartLink=this.linkEChart();

let option={

tooltip:{

show:false},

series: [

{

edgeLabel: {

normal: {

formatter:"{c}",

show:true}

},

edgeSymbol:'circle',

force:{

repulsion:2000},

layout:'force',

roam:true,

itemStyle:{

normal:{

color:'#6495ED'},//鼠标放上去有阴影效果

emphasis: {

最低0.47元/天 解锁文章
weixin_39799565
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts人物关系图
12-04
根据Echarts生成人物关系图.
vue项目中使用 echarts 创建一个关系图
小肉包的博客
03-08 4815
vue项目中，用echarts实现关系图
VUE ECharts人际关系图
S_mile1992的博客
05-24 1993
1. 概述 1.1 说明 　　项目中需要对某个人的人际关系进行展示，故使用echarts中的关系图进行处理此需求。 2. 代码 2.1 代码示例 <template> <div class="echartLayout"> <div id="container" style="width:100%; height:100%; ov...
echarts-关系图（自己指向自己）
qq_43086723的博客
03-14 425
echarts-关系图（自己指向自己）
echarts 关系图
fk129
07-15 1299
先放一张效果图 // 基于准备好的dom，初始化echarts实例 myChart = echarts.init(document.getElementById('relationChart')); // 数据格式 let data = { nodes: [{ name: '王大妈', category: 0 }, { name: '王二麻子', category: 1 }, {
VUE实现echarts（悲惨世界人物关系图示例）
qq_53406680的博客
01-06 2175
VUE实现echarts（悲惨世界人物关系图示例）
Vue3+Echarts5.x
RequesToGod的博客
04-06 1010
引入 ECharts import * as echarts from 'echarts'; 规定Type类型 type EChartsOption = echarts.EChartsOption; const barChart = ref<any>(null);//实例化Dom对象 let barChartSeries: any; 初始化图表 // 图表初始化 onMounted(() => { if (barChart.value) { nextTick(() =&gt
Vue Echarts实现可视化世界地图代码实例
11-28
Echarts实现可视化世界地图模拟迁徙，以我自己开发过程。 下载Echarts依赖： npm install echarts 成功以后引入依赖： import echarts from 'echarts' peopleInsertCharts为生成echarts容器。 let myChart = ...
vue_echarts_demo:vue echarts项目
04-05
vue_echart_demo 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 自定义配置 请参阅。
sip - 副本.rar_echarts_element_vue sip_vue是用sip
09-20
vue2.0;element2.3;echarts4;
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
在 Vue 框架中，结合 Echarts 图表库可以方便地实现动态绘制图表，包括折线图、柱状图等。Echarts 是一个基于 JavaScript 的开源可视化库，提供了丰富的图表类型和强大的交互功能，适合用于数据可视化需求。下面我们...
漏刻有时数据可视化Echarts组件开发(10):唐宋八大家人物关系图
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
04-21 1075
人物关系图要点 数据格式： category 类别分类； nodes，同data,核心数据； links，节点间的关系数据； 如何将二维数据梳理成标准格式，是数据整理的一个难点。 var categories = [{name: "核心人物"}, {name: "朋友"}, {name: "父子"}, {name: "兄弟"}, {name: "政敌"}, {name: "师生"}]; var nodes = [ {id: 1, category: 0, name: .
vue 中 echart关系图
ww072511的博客
01-26 1623
首先安装 echart setDVG(id, ethis) { this.charts = echarts.init(document.getElementById(id)); 获取图的点 this.charts.resize(); let categories = []; 里边的是关系的种类 let option = { // 图的标题 title: { text: "D...
JS之使用Echarts画出人际关系图
小达哥的博客
09-04 9971
首先在html中写一个壳子，通过ajax获取数据后再向壳子中注入数据即可 1、html代码如下： <div class="strip_out"> <div class="strip" id="interpersonalRelationship"></div> </div> 2、JS代码如下： 数据往哪组装呢：根据id var in...
echarts人员关系网络图,张三朋友的朋友扩散图
小栋哟
07-26 9600
我的另外一个博客echarts实现关系网络图,单个节点可无限扩散,方便实用易懂就是通过下方这个改的，所以这个是最原版的代码。大家可以参考一下，其实意思很明了，主人公张三是中心点，第二层就是展示他的朋友，第三层是朋友的朋友，第四层循环下去。。。看看图吧。 废话我就不多说，直接上代码。 var myGraphData = [ { "parentNode":"张三",...
Vue+ECharts+关系图（异步请求数据）
weixin_44427407的博客
12-09 2492
Vue+ECharts+关系图（异步请求数据） 上一篇Vue+ECharts+关系图记录了如何加载在Vue里使用ECharts绘画关系图，但是，应用时一般不会写死数据，然后去做数据可视化。这时就需要做异步请求以及数据处理了。 废话不多说，先上图： 项目view是这样，现在就来记录如何“画出这种图”! 理一下思路： 1.定义一个数据变量graph_data用来接收数据 异步请求获得的数据经过处理后存入该变量中，作最后传值用，如下： <script> export default {
echarts关系图/力导向动态图(地图经纬度定位)
qq_15351167的博客
11-26 9267
需求：项目要做一个动态展示服务器前置机间是否连通的界面。 先看下效果，分两种，一种带地图(经纬度)，一种屏蔽地图显示：   这个是通过百度echarts的一个案列改造而来。下面附上官网地址、API地址、改造前Demo地址、china.json和echarts.js： 官网地址：http://echarts.baidu.com/ API地址：http://echarts...
【Vue项目】仿哔哩哔哩网页
热门推荐
sheng_er_sheng的博客
03-11 1万+
目前市面上，有一些以短视频为主的手机应用越来越多。如哔哩哔哩、抖音、小红书、快手、youtube，这些手机短视频软件应用，个人认为，之所以能拔地而起，主要是由于以下几点：1、门槛低、视频功能强大、平台社交功能强大、贴近生活。毫不夸张地说，假设一个人自制力较弱，并且拥有大把的闲暇时光，给他推荐一款这样类型的软件，一天之内，他就会沉浸在刷视频的快感之中。话不多说，我设计的这款应用主要参照哔哩哔哩这款手机应用，同时搭建本都服务器来提供数据响应。这款网站将部署至阿里云服务器......
vue2中，开源vue关系图谱组件Relation-Graph的使用——relation-graph示例
weixin_44867717的博客
12-07 1370
知识图谱
vue echarts 人物关系图 展示
最新发布
06-01
要展示人物关系图，可以使用 Vue 和 ECharts 结合起来实现。具体步骤如下： 1. 安装 ECharts 和 Vue-ECharts 在项目中安装 ECharts 和 Vue-ECharts，可以使用 npm 安装： ``` npm install echarts vue-echarts ``` 2. 引入 ECharts 和 Vue-ECharts 在需要使用人物关系图的组件中，引入 ECharts 和 Vue-ECharts： ```javascript import echarts from 'echarts' import VueECharts from 'vue-echarts' ``` 3. 定义数据 定义一个数组来存储人物关系图的数据，每个元素为一个对象，包含节点的名称、类别、标签等信息，以及节点之间的关系： ```javascript const data = [ { name: '人物1', itemStyle: { color: '#ff0000' } }, { name: '人物2', itemStyle: { color: '#00ff00' } }, { name: '人物3', itemStyle: { color: '#0000ff' } } ] const links = [ { source: '人物1', target: '人物2' }, { source: '人物2', target: '人物3' }, { source: '人物3', target: '人物1' } ] ``` 4. 渲染图表 在模板中使用 Vue-ECharts 渲染图表，使用 ECharts 的关系图表类型，传入定义好的数据： ```html <template> <div> <vue-echarts :options="options"></vue-echarts> </div> </template> <script> import echarts from 'echarts' import VueECharts from 'vue-echarts' export default { components: { VueECharts }, data () { return { options: { title: { text: '人物关系图' }, tooltip: {}, series: [ { type: 'graph', layout: 'force', data: data, links: links, roam: true, label: { show: true }, force: { repulsion: 100 } } ] } } } } </script> ``` 以上就是使用 Vue 和 ECharts 展示人物关系图的基本步骤，根据实际需求可以进一步调整和定制图表的样式和交互行为。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值