echarts关系图vue完整代码

vue 使用echarts 实现关系图，效果如下：

说明：关系图可以有两种，一种是指定坐标x，y。另外一种就是通过设置series属性

layout: "force",
force: {repulsion: [-2, 100], //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。gravity: 0.03, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。edgeLength: [20, 200], //边的两个节点之间的距离，这个距离也会受 repulsion:[10, 50]值越小则长度越长layoutAnimation: false,},


vue全部代码如下```javascript
<template><div class="uni-chart-container"><div class="uni-bar-charts" :id="id"></div></div>
</template><script>
import echarts from "echarts";
import resize from "../mixins/resize";
export default {name: "uniGraph",mixins: [resize],components: {},data() {return {options: {title: {text: "",},series: [],},barData: [],myChart: null,seriesName: "",};},props: {id: {type: String,require: true,},sortMethod: {type: String,default: "desc",},title: {type: String,},optionsSetup: {type: Object,default: () => {return {};},},isVertical: {type: Boolean,default: true,},chartsData: {type: Object,default: function () {return {nodes: [{name: "李志强",category: 0,symbolSize: 30,value: ["确诊"],color: "#F10F0F",},{name: "张亮",category: 2,symbolSize: 30,value: ["密接"],color: "#FFC001",},{name: "王飞",category: 1,symbolSize: 30,value: ["次密接"],color: "#1D84C6",},{name: "王丽",category: 2,symbolSize: 30,value: ["密接"],color: "#FFC001",},{name: "符华",category: 1,symbolSize: 30,value: ["次密接"],color: "#1D84C6",},{name: "钱峰",category: 1,symbolSize: 30,value: ["次密接"],color: "#1D84C6",},{name: "吴梦",category: 1,symbolSize: 30,color: "#1D84C6",value: ["次密接"],},{name: "杨月",category: 1,symbolSize: 30,color: "#1D84C6",value: ["次密接"],},],links: [{source: "李志强",target: "张亮",linkTip: "聚餐",},{source: "张亮",target: "王飞",linkTip: "出现在同一场所",},{source: "李志强",target: "王丽",linkTip: "出现在同一场所",},{source: "张亮",target: "钱峰",linkTip: "聚餐",},{source: "张亮",target: "符华",linkTip: "家庭聚集",},{source: "张亮",target: "杨月",linkTip: "出现在同一场所",},{source: "张亮",target: "吴梦",linkTip: "出现在同一场所",},],categories: [{name: "确诊",},{name: "次密接",},{name: "密接",},],};},},customColor: {type: Array,default: function () {return ["#1890FF"];},},// 展示前5条 可传5maxL: {default: "auto",},codeStatus: {type: Array,},},watch: {chartsData: {deep: true,immediate: true,handler: function (v) {let _this = this;this.$nextTick(function () {_this.init();});},},},beforeDestroy() {if (!this.myChart) {return;}this.myChart.dispose();this.myChart = null;},methods: {init() {//构建3d饼状图if (this.myChart) this.myChart.dispose();this.myChart = echarts.init(document.getElementById(this.id));this.editorOptions(this.chartsData);// 传入数据生成 optionthis.myChart.setOption(this.options);},editorOptions(val) {let series = this.getSeries(val);var options = {tooltip: {// formatter: (e) => {//   console.log(e);//   return e.name + e.data.value;// },},animationDuration: 1500,animationEasingUpdate: "quinticInOut",color: this.customColor,grid: this.setOptionsMargin(),series: series,};this.options = options;},getSeries(newData) {const series = [];series.push({name: "关系图谱",type: "graph",hoverAnimation: true,layout: "force",force: {repulsion: [-2, 100], //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。gravity: 0.03, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。edgeLength: [20, 200], //边的两个节点之间的距离，这个距离也会受 repulsion:[10, 50]值越小则长度越长layoutAnimation: false,},nodeScaleRatio: 0.6,draggable: true,roam: false, //鼠标缩放和平移symbol: "circle",edgeSymbol: ["circle", "arrow"],data: newData.nodes,links: newData.links,categories: newData.categories,cursor: "pointer",focusNodeAdjacency: true,scaleLimit: {//所属组件的z分层，z值小的图形会被z值大的图形覆盖min: 0, //最小的缩放值max: 9, //最大的缩放值},edgeLabel: {//连接线上文字normal: {show: true,textStyle: {fontSize: 10,},formatter: (e) => {return e.name;},},},label: {normal: {show: true,},},lineStyle: {normal: {width: 1.5,curveness: 0,type: "solid",},},});return series;},// 边距设置setOptionsMargin() {const optionsSetup = this.optionsSetup;const grid = {left: optionsSetup.marginLeft,right: optionsSetup.marginRight,bottom: optionsSetup.marginBottom,top: optionsSetup.marginTop,containLabel: true,};return grid;},},
};
</script>
<style lang="scss">
.uni-chart-container,
.uni-bar-charts {width: 100%;height: 100%;
}
</style>

resize文件如下：debounce可以自行实现

import {debounce
} from "@/utils/utils.js";export default {data() {return {};},mounted() {this.initListener();},beforeDestroy() {this.destroyListener();},deactivated() {this.destroyListener();},methods: {initListener() {window.addEventListener("resize", debounce(this.resize, 100));},destroyListener() {window.removeEventListener("resize", this.resize);},resize() {const {myChart} = this;myChart && myChart.resize();},},
};

echarts关系图vue完整代码相关推荐

echarts 关系图 option
echarts 关系图 option <script type="text/javascript" src="plugins/echarts/echarts.min ...
echarts关系图graph点击折叠
首选参考别人的地址:echarts节点折叠实现_SongJingzhou的博客-CSDN博客 echarts下载: echarts下载其次先看一下我改的效果图: 接下来分段解释一下需要的代码: 1. ...
用Bi-GRU语义解析，实现中文人物关系分析 | 附完整代码
作者 | 李秋键责编 | Carol 来源 | AI科技大本营(ID:rgznai100) 语义解析作为自然语言处理的重要方面,其主要作用如下:在词的层次上,语义分析的基本任务是进行词义消歧:在句子 ...
知识图谱---echarts关系图
一:三级关系图知识图谱最近写了个demo,主要功能是搜索实体,搜索结果显示与该实体相关的公司.子公司.设备.位置.状态.危害这六类,数据是通过我司的数据标注系统提供的.后端用到的技术栈是python ...
echarts关系图demo
实现效果: 代码: <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
ECharts关系图(详细示例——满满的注释)
图表效果如下: 具体代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
echarts关系图配置详解
title 图表标题样式 title: {text: "ECharts简单线形图表及其配置展示实例", //正标题link: "http://www.stepday.co ...
echarts关系图配置，及超出范围处理 + a、b两个节点互相指向时线上的字重叠问题
情景:由于人物关系复杂,可以有几个 --几十个(上百个),所以固定范围内(如:500高度)可能放不下,或者太空.所以可以根据node节点(也可根据其他判断条件)来动态修改 div / canvas高度 ...
Echarts关系图的例子
1.普通关系图 option = {title: {text: '数据图谱'},tooltip: {trigger: 'item',formatter: '{a} : {b}'// 如果用索引关联关系 ...
Python实现图片转化为字符图(附完整代码)
工作原理: 先将图片每个像素的hsv(色相,饱和度,明度)值转化为可读取对象,使用到PIL的Image方法: from PIL import Imageimg = Image.open('test.p ...

echarts关系图vue完整代码

vue 使用echarts 实现关系图，效果如下：

echarts关系图vue完整代码相关推荐

最新文章

热门文章