使用echars制作家谱图

首次工作的第一周，项目大哥让我制作项目中的h5页面：接收后端数据渲染家谱图；各种百度发现并没有很好的解决办法，在掉头发的两天研究echars后终于解决，虽然没发完全还原ui图但也能正常使用，一下是我的解决办法：

1.首先需要引入echars，这个直接去官网学习即可
2.这个表中需要后端计算并返回每个家谱人物的x，y坐标，大概的实施方法是：在创建家谱人物时前端需要传递一个方位参数（left,right,top,bottom），表示创建的人物和本人的关系top，bottom方向为长辈和晚辈，left，right可以根据实际情况判断是平辈或者是妻子丈夫，这个不是本文重点，不多说；总之需要后端返回x，y坐标数据
3.实现代码如下

//百度图表initEchart() {let that = this;// let img_tx = '../../image/ceshi.jpg'//找到绘制图标的区域let dom = document.getElementById("container");//初始化echarts实例this.myChart = echarts.init(dom);console.log(this.myChart)//获取数据 this.chartData = this.node_arr;// 获取数据关系this.chartLink = this.line_arr;console.log(this.chartData);console.log(this.chartLink);//数据信息let option = {//鼠标hover出现的文字tooltip: {show: false},series: [{// 类型type: 'graph',edgeSymbol: ['none', 'none'],//edgeSymbol: ['circle', 'arrow'],//edgeSymbolSize: [4, 10],roam: true,// 标签设置label: {backgroundColor: '#BE9762',color: '#FFFFFF',padding: 15,borderRadius: 5,fontSize: '15',position: 'bottom',show: true},center: [0, 0],//头像//symbol: `image://${img_tx}`,symbolSize: 55,// 传入的数据data: this.chartData,//数据的关系links: this.chartLink,lineStyle: {normal: {opacity: 0.9,width: 2,curveness: 0,color: '#BE9762'}},}]};this.myChart.setOption(option);//标签绑定点击事件this.myChart.on('click', params => {//这里写点击人物的事件}

以上是我个人的解决方法，不足之处请制作

使用echars制作家谱图相关推荐

python之matplotlib制作雷达图
python之matplotlib制作雷达图示例代码: import numpy as np import matplotlib.pyplot as plt import matplotlibmat ...
php制作标记图,PHP使用JPGRAPH制作圆柱图的方法详解
本文实例讲述了PHP使用JPGRAPH制作圆柱图的方法.分享给大家供大家参考,具体如下: 制作圆柱图像的要点首先,要使用jpgraph库,我们先要去官网进行下载,网址:https://jpgraph ...
python多张图片合并拼接，python制作sprite图、雪碧图
python多张图片合并拼接,python制作sprite图.雪碧图整理图片集找两个文件夹,yangying和zhaoliying,分别放上照片8张,共16张照片. 创建sprite.py # 多 ...
《Splunk智能运维实战》——3.11　制作折线图显示项目浏览量和购买量随时间的变化...
本节书摘来自华章计算机<Splunk智能运维实战>一书中的第3章,第3.11节,作者 [美]乔史·戴昆(Josh Diakun),保罗R.约翰逊(Paul R. Johnson),德莱克· ...
matlab绘制bland-altman,制作Bland-Altman图的步骤和程序（以SPSS作图为例讲解）
注册后推荐绑定QQ,之后方才可以使用下方的"用QQ帐号登录". 您需要登录才可以下载或查看,没有帐号?立即注册 x 帮临床一个同学做数据分析,才接触到Bland-Altman图 ...
EasyX制作掩码图
EasyX制作掩码图本文是转载的,原博客:https://blog.csdn.net/qq_35130321/article/details/80709290 在用第三方库EasyX需要用掩码图实现 ...
一篇文章教会你使用html+css3制作GIF图
简介:一篇文章教会你使用html+css3制作GIF图 [一.项目背景] 生活中经常会见到很多gif图,那么gif图到底是什么?GIF是一种位图.简单来说就是通过每一张张静图,通过控制它的关键帧,从而 ...
JS制作字体图（文字图）
我们经常会在网页中看到很多小图标,其实这些图标大多数都不是图片,而是字体图. 制作字体图总共有三种办法: 第一种: CSS Sprite(美其名曰雪碧图) 第二种: font + HTML 进行制作 ...
vue 如何获取图片的原图尺寸_公众号封面图片尺寸是多少？如何在公众号里制作封面图？...
公众号文章封面图是自己动手制作还是直接使用网络图片呢?在刚开始接触公众号运营时,我的大部分插图和封面图都是直接选择网络图片,后来才发现,自己制作的封面图更能传达文章的内容,阅读效果更好. 其实很多做公 ...
甘特图制作_如何用Excel快速制作甘特图？（超详细！）
甘特图作为现代项目管理中一项重要的管理工具,它能够帮助你考虑资源.成本等项目中重要的元素,并且能够通过图形直观的观察到项目中所要完成的任务.开始与结束时间,每项任务所需时间,某项任务在某个时间段内完成 ...

使用echars制作家谱图

使用echars制作家谱图

使用echars制作家谱图相关推荐

最新文章

热门文章