【echarts】echarts绘制关系图

echarts绘制关系图，效果如图，粗麻编写，教程往下看

1、vue安装echarts

npm install echarts

2、引入echarts

3、在VUE页面中编写

遇到问题：关系数据显示不出来，原因是data数组里多加了一个id的属性和值。
解决办法：去掉id值，留下name就行。注意：在以下给echart赋值的data, linksData格式要按照原文api档给，不然可能会报错。

HTML:

<div id="myChart" class="myChart" :style="{width: '100%', height: '90vh'}" />

JS:

// 数据遍历转换（主要是计算多重关系所显示的不同弧度值）changeData() {var data, linksDatadata = [{ name: 'iloprost' }, { name: 'imatinib' }, { name: 'indacaterol' }]for (var i = 0; i < 100; i++) {data.push({name: 'iloprost' + i})}linksData = [{source: 'iloprost',target: 'imatinib',relationshipName: '朋友'}, {source: 'iloprost',target: 'imipramine',relationshipName: '朋友'}, {source: 'imatinib',target: 'indacaterol',relationshipName: '朋友'}, {source: 'iloprost',target: 'indacaterol',relationshipName: '同事'}, {source: 'iloprost',target: 'indacaterol',relationshipName: '家人'}, {relationshipName: '战友',target: 'iloprost',source: 'indacaterol'}, {relationshipName: '战友',target: 'iloprost',source: 'imatinib'}]var arr = []for (const i in linksData) {linksData[i].count = 0arr.push(linksData[i])}for (const i in linksData) {for (const j in arr) {if ((arr[j].count === 0) && ((arr[j].source === linksData[i].source) && (arr[j].target === linksData[i].target)) || (arr[j].target === linksData[i].source) && (arr[j].source === linksData[i].target)) {++linksData[i].count}}}for (const i in linksData) {linksData[i].label = {show: true,formatter: function(x) {return x.data.relationshipName // 自定义线条之间的关系名称}}linksData[i].lineStyle = {curveness: (linksData[i].count - 1) * 0.2 // 线条弧度}}return {data, linksData}},makeChart() {var myChart = echarts.init(document.getElementById('myChart'))var list = this.changeData()var data = list.datavar linksData = list.linksDatavar option = {backgroundColor: '#eeeeee', // 设置背景颜色title: {text: '人物关系图',top: 12,left: 12,textStyle: {fontSize: 14,color: '#444444'}},tooltip: {trigger: 'none'}, // 提示框animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',series: [{type: 'graph',layout: 'force',symbolSize: 50, // 倘若该属性不在link里，则其表示节点的大小；否则即为线两端标记的大小roam: true, // 鼠标缩放功能label: {show: true // 是否显示标签},focusNodeAdjacency: true, // 鼠标移到节点上时突出显示结点以及邻节点和边edgeSymbol: ['circle', 'arrow'], // 关系两边的展现形式，也即图中线两端的展现形式。arrow为箭头edgeSymbolSize: [6, 6], // 设置两边箭头大小draggable: true,edgeLabel: {fontSize: 14 // 关系（也即线）上的标签字体大小},force: {repulsion: 400, // 节点之间的斥力因子值edgeLength: 170 // 两个节点之间的距离},data: data,links: linksData,lineStyle: {opacity: 0.9,width: 2,color: 'red' // 设置线条颜色 8ab7bd// curveness: 0 // 设置线条的弧度},itemStyle: {color: '#61a0a8',fontSize: 12,borderWidth: 1,borderColor: '#ffffff',shadowColor: 'rgba(0, 0, 0, 0.2)',shadowBlur: 8}}]}myChart.setOption(option, true)setTimeout(function() {window.onresize = function() {myChart.resize()}}, 200)}

4、找到echarts源码中的graph的addEdge方法，注释掉判断重复边的代码
在vue项目中的位置：node_modules\echarts\lib\data\Graph.js

样式的显示，可根据需求去 echart的文档配置

设置symcol为图片路径即可,如下

设置symcol为图片路径的参考文档https://www.cnblogs.com/xxaw/p/13032874.html

关系图也可用Neo4j实现，参考文档在下方：
用vis.js库实现Neo4j的可视化

【echarts】echarts绘制关系图相关推荐

Echarts绘制关系图
文章目录基本应用节点重名问题解决方案两点之间如何绘制多条连线 Echarts图随着浏览器窗口的变化而变化今天要发博客,因为今天再不发,2020就过去啦! 最近需要用到Echarts绘制关系图, ...
vue中使用antv/g6 绘制关系图、结构图
使用antv/g6绘制关系图效果图代码实现 npm install @antv/g6 --save <template><div id="app">&l ...
matlab怎么画两个自变量的图_关系图怎么画？一款实用的绘制关系图设计软件
关系图是指实体-联系图,是用来描述现实世界的概念模型.关系图应用范围很广.比如人物关系图.零件关系图等等.关系图主要由三部分构成:矩形框里写实体名.椭圆符号表示属性.菱形框中标明何种联系.同时还用线条 ...
echarts做企业关系图谱_Echarts绘制关系图（一）
关系图何为关系图,从字面上可以看出,为关系的图形,既然为关系,那么就需要有点以及关系,用来表示点与点之间的联系.所以我们可以得出:关系图需要两个必要的元素,节点,关系,其中关系需要包含有联系的节点以 ...
Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）...
导读如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
echarts.js降雨量关系图
下载地址基于echarts.js实现的降雨量.流量关系图统计图表,一个jQuery关系图统计图表. dd:
php实现echarts任务关系图,react中使用echarts（人物关系图）
项目中有时会用到echarts,可能不同的框架中语法稍有变通,前几天在react项目中遇到,写此篇以作记录. 不同的charts语法跟支持不同,本篇"echarts": " ...
手把手教echarts中gexf关系图的构造和使用
myChart.showLoading(); $.get(ROOT_PATH + '/data/asset/data/les-miserables.gexf', function (xml) {myC ...
vue中使用antv/g6 绘制关系图、结构图_CAD小白必看！手把手教你如何看懂室内设计施工图图纸（平面立面剖面大样节点图）...
号外!号外!你们心心念念的干货来了~ 室内设计施工图视频教程+CAD图库可供大家学习研究,希望能对大家有所帮助.如果你喜欢请点赞收藏哦,谢谢~ 本期干货:室内设计施工图视频教程+CAD图库领取方式 ...

【echarts】echarts绘制关系图

【echarts】echarts绘制关系图相关推荐

最新文章

热门文章