VUE ECharts人际关系图
1. 概述
1.1 说明
项目中需要对某个人的人际关系进行展示,故使用echarts中的关系图进行处理此需求。
2. 代码
2.1 代码示例
<template><div class="echartLayout"><div id="container" style="width:100%; height:100%; overflow:hidden;"></div></div> </template><script>import echarts from 'echarts'import imgSrc from '../../assets/img/echar_person.png'export default {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: {shadowColor: '#3721db',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 40,},},label:{normal:{show:true}},//头像symbol: `image://${imgSrc}`,symbolSize:86,type:'graph',links: this.chartLink,data:this.chartData}]};this.myChart.setOption(option);this.myChart.on('click', function (params) {console.log(params.data)//获取点击的头像的数据信息 });},/*** 数据集合*/dataEChart(){let data = [{name: '张1',symbolSize: 76,id: '1',},{name: '张2',id: '2',},{name: '张3',id: '3',},{name: '张4',id: '4',},{name: '张5',id: '5',},{name: '张6',id: '6',},{name: '张7',id: '7',},{name: '张6',id: '8',},];return data;},/*** 关系数据集合*/linkEChart(){let dataLink=[{value: "同事",source: "1",target: "2"},{value: "同事",source: "1",target: "3"},{value: "同事",source: "1",target: "4"},{value: "同学",source: "1",target: "5"},{value: "同学",source: "1",target: "6"},{value: "同学",source: "1",target: "7"},{value: "爸爸",source: "1",target: "8"},];return dataLink;},}} </script><style scoped>.echartLayout {margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;} </style>
2.2 结果展示
转载于:https://www.cnblogs.com/ajuan/p/10917835.html
VUE ECharts人际关系图相关推荐
- vue + echarts 漏斗图 实现里面数据 外面标签 漏斗不随值改变而变形
vue echarts 漏斗 最近有一个需求漏斗统计,采用的echarts来实现 需要实现如下效果 最初版本 旁边有描述,里面要有值: 第一步 首先在项目里安装echarts; npm install ...
- vue echarts 水球图 多个水球图并存配置
echarts 水球图 下面介绍为vue-cli开发环境下 npm下载 npm install echarts --save npm install echarts-liquidfill --save ...
- vue echarts 折线图多Y轴显示,加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
- vue echarts 沙漏图(金字塔)实现
效果图 使用插件echarts 类型pictorialBar:象形柱图 本文只讲述 关键代码 第一步.准备 三张图 第二步. 对data 数据 位置和大小进行微调 需微调的属性symbolSize,s ...
- vue echarts 玫瑰图
实现效果: <template><div class="AppealHotline"><div id="AppealHotlineChart ...
- 在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法 参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
- vue + echarts + ( bmap) 百度地图 实现公交、骑行、车辆 轨迹图
vue + echarts + ( bmap) 百度地图 实现公交.骑行.车辆 轨迹图 最终目标 最终目标:个性化的实现公交路线图 先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看 码起 ...
- Vue + Echarts(v5.版本)的简单组件封装(折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图)
项目中展示图表的地方很多,不想每次都写一长串的 options配置,就整合了一下常用的配置项,简单封装了一下,也能保证整个系统的图表风格统一,需要调整样式的时候也不用改很多地方 2022-11-07: ...
- Vue+Echarts构建可视化大数据平台实战项目(上)粒子动效,登录界面抖动,背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
- Vue+Echarts数据可视化(面积图)
Vue+Echarts数据可视化(面积图) 最近公司开发需要使用Echarts来进行数据展示,稍微记录一下.先看效果图: 话不多说,直接上代码: 1.使用npm下载安装Echarts依赖(下载速度慢可 ...
最新文章
- CVPR2020 | 利用NAS搜索针对对抗攻击的鲁棒神经网络结构
- 【1863】畅通工程 (HDU)
- SecureCRT使用本地公钥 SSH 免密码登录Linux
- 笔记本启动与关闭自带键盘
- pat 乙级 1008 数组元素循环右移问题(C++)
- 7-293 鸡兔同笼 (10 分)
- WPF学习笔记(7):DataGrid中数字自定义格式显示
- 正则提取Swagger在线文档里面的返回实体类字段
- fastjson.toJSONString字段排序
- 经销商生意平台化是趋势
- Bagging Classifier+Regressor
- 服务器如何取得系统管理员权限,技巧:Windows系统如何获得管理员权限?
- 区块链技术入门学习指引
- 快速乘 O(lgn) and O(1)
- MATLAB实现对比度计算
- 心灵捕手——走进内心世界
- 昆明市谷歌高清卫星地图下载
- heic(HEIF)格式图像处理(一)
- 上网本终于可以休息了,我的脱机下载利器 数帅D600
- Qt设计保护眼睛的屏幕亮度调节软件
热门文章
- 用区块链推动影视版权保护
- Golang的编译安装
- mvn编译 Failed to execute goal org.apache.maven.pluginsmaven-clean-plugin3.1.0clean (default-
- 斯坦福大学cs229学习体会(1)-机器学习入门
- SpringBoot在Idea中使用Maven管理依赖包的学习
- Java 蓝桥杯 算法训练 貌似化学
- npm报错npm ERR! A complete log of this run can be found in
- 厦门市油烟在线监控系统对接方案 餐饮油烟监测治理 环保整治 油烟浓度在线监测仪 (安科瑞-须静燕)
- MybatisPlus实现分页处理数据
- android. 绘制矩形,Android可绘制形状:将矩形变为方形