echarts 关系图力引导布局

<div id="myEcharts"></div>mouted(){
this.echartsData = [{category: "本人",id: 204418,itemStyle: {color: "#ff4343"},color: "#ff4343",name: "王成友",value: 60,}, {category: "配偶",id: 204419,itemStyle: {color: "#ff4343"},name: "王业琴",value: 30,}]
this.link = [{label: {borderColor: "#45dbf7",borderWidth: 2,color: "#45dbf7",formatter: "王业琴",shadowBlur: 20,shadowColor: "#45dbf7",show: true,},source: "本人",target: "王业琴",},{label: {borderColor: "#45dbf7",borderWidth: 2,color: "#45dbf7",formatter: "王家乐",shadowBlur: 20,shadowColor: "#45dbf7",show: true,},source: "本人",target: "王家乐",}]
setTimeout(() => {this.initEchart();}, 200);
}
methods:{initEchart() {document.getElementById("myEcharts").removeAttribute("_echarts_instance_"); // 移除容器上的 _echarts_instance_ 属性  重新渲染数据let myChart = this.$echarts.init(document.getElementById("myEcharts"));let categories = [{ name: '本人' },{ name: '配偶' },{ name: '子女' },{ name: '父母' },{ name: '岳父母' },{ name: '女婿' },{ name: '儿媳' },{ name: '孙子' },{ name: '孙女' },{ name: '亲戚' },{ name: '租赁' },]let option = {// title: {//     text: '人际关系网络图',//标题//     subtext: '人物关系：乔布斯',//标题副标题//     top: 'top',//相对在y轴上的位置//     left: 'center'//相对在x轴上的位置// },tooltip: {//提示框，鼠标悬浮交互时的信息提示trigger: 'item',//数据触发类型formatter: function (params) {//触发之后返回的参数，这个函数是关键// if (params.data.category != undefined) {//如果触发节点//     return '人物:' + params.data.name;//返回标签// } else {//如果触发边return '关系:' + params.data.category;// }},},//工具箱，每个图表最多仅有一个工具箱// toolbox: {//     show: true,//     feature: {//启用功能//         //dataView数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能//         dataView: { show: true, readOnly: true },//         restore: { show: true },//restore，还原，复位原始图表//         saveAsImage: { show: true }//saveAsImage，保存图片//     }// },//全局颜色，图例、节点、边的颜色都是从这里取，按照之前划分的种类依序选取// color: ['rgb(194,53,49)', 'rgb(178,144,137)', 'rgb(97,160,168)'],// //图例，每个图表最多仅有一个图例// legend: [{//     // 纵向//     orient: 'vertical',//     // 位置//     left: 'left',//     // 图例内容，由上面的分类集合决定//     data: [{ name: '本人' }, { name: "亲属" }].map(function (a) {//         return a.name;//     }),//     textStyle: {//         color: 'rgba(94,156,195,1)',//         borderWidth: '1',//         fontSize: '10'//     },//     backgroundColor: 'rgba(42,79,108,0.32)',//     borderColor: 'rgba(42,79,108,1)',//     selectorButtonGap: '2',// }],//sereis的数据: 用于设置图表数据之用series: [{name: '人际关系网络图',//系列名称type: 'graph',//图表类型layout: 'force',//echarts3的变化，force是力向图，circular是和弦图draggable: false,//指示节点是否可以拖动data: this.echartsData,//节点数据links: this.link,//边、联系数据categories: categories,//节点种类focusNodeAdjacency: true,//当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点roam: false,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启label: {//图形上的文本标签，可用于说明图形的一些数据信息normal: {show: true,//显示position: 'top',//相对于节点标签的位置//回调函数，你期望节点标签上显示什么formatter: function (params) {return params.data.name + ' ' + ` ( ${params.data.category} )`;},}},// 根据value放缩节点symbolSize: (value, params) => {return value;},//节点的styleitemStyle: {normal: {opacity: 1,//设置透明度为0.8，为0时不绘制},},// 关系边的公用线条样式lineStyle: {normal: {show: true,color: 'target',//决定边的颜色是与起点相同还是与终点相同curveness: 0.3//边的曲度，支持从 0 到 1 的值，值越大曲度越大。}},force: {edgeLength: 200,//线的长度，这个距离也会受 repulsion，支持设置成数组表达边长的范围repulsion: 300//节点之间的斥力因子。值越大则斥力越大}}]};myChart.setOption(option, true);myChart.on('click', (e) => {this.memberId = e.data.id;this.getMemberDataById(e.data.id)})},
}

echarts 关系图力引导布局相关推荐

echart关系树状图_Echarts关系图-力引导布局
需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...
Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
echarts关系图/力导向动态图(地图经纬度定位)
需求:项目要做一个动态展示服务器前置机间是否连通的界面. 先看下效果,分两种,一种带地图(经纬度),一种屏蔽地图显示: 这个是通过百度echarts的一个案列改造而来.下面附上官网地址.API地址.改 ...
echarts关系图配置详解
title 图表标题样式 title: {text: "ECharts简单线形图表及其配置展示实例", //正标题link: "http://www.stepday.co ...
ECharts关系图(详细示例——满满的注释)
图表效果如下: 具体代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
echarts关系图配置，及超出范围处理 + a、b两个节点互相指向时线上的字重叠问题
情景:由于人物关系复杂,可以有几个 --几十个(上百个),所以固定范围内(如:500高度)可能放不下,或者太空.所以可以根据node节点(也可根据其他判断条件)来动态修改 div / canvas高度 ...
echarts 关系图graph
1.配置数据类型data:[{name:'节点名称',value:'节点值'x:节点坐标, 在不指定的时候需要指明layout属性选择布局方式.y:节点坐标,symbolSize: 80,dragga ...
echarts关系图指向混乱
一:在series.force.layoutAnimation设置成true. 二:series.animation设置成false 力引导布局会在多次迭代后才会稳定,layoutAnimation这 ...
echarts 关系图 option
echarts 关系图 option <script type="text/javascript" src="plugins/echarts/echarts.min ...
echarts关系图graph点击折叠
首选参考别人的地址:echarts节点折叠实现_SongJingzhou的博客-CSDN博客 echarts下载: echarts下载其次先看一下我改的效果图: 接下来分段解释一下需要的代码: 1. ...

echarts 关系图力引导布局

echarts 关系图力引导布局相关推荐

最新文章

热门文章

echarts 关系图 力引导布局

echarts 关系图 力引导布局相关推荐

最新文章

热门文章

echarts 关系图力引导布局

echarts 关系图力引导布局相关推荐