在vue中使用eacharts创建graph关系图方式
目录
- 使用eacharts创建graph关系图
- vue中关系图组件
- 1.Graph.vue
- 2.GraphDemo.vue
使用eacharts创建graph关系图
在最近的工作中遇到了这个问题一开始遇到遇到问题且网上现在的教程不那么详细于是想着自己写一个来记录一下。
首先想使用echarts先下载echarts包命令如下
npm install echarts --save
然后将eacharts引入到项目中，推荐在main.js引入。
import * as echarts from 'echarts';
引入完毕后将echarts挂载在原型上（仅限vue2使用）
Vue.prototype.$echarts = echarts//将echarts挂载到vue的原型上
然后再所需要的组件里创建一个容器
<div id="chartsBox"></div>
将echarts绑定到dom元素上
this.myEchart = this.$echarts.init(document.querySelector("#chartsBox")); //将echarts绑定到dom元素上
配置echarts的配置
this.option = {
//echarts的配置文件
title: {
//title组件
text: "Les Miserables", //显示的文本
subtext: "Default layout",
top: "bottom", //组件在echarts上下的位置
left: "right", //组件在echarts左右上的位置
},
tooltip: {
//提示框组件当鼠标移入时触发
show: true, //是否显示提示框组件。
trigger: "item", //触发类型
},
legend: [
//图例组件
{
data: this.graph.categories.map(function (a) {
//图例所要分类的种类
return a.name;
}),
},
],
series: [
//数据展示组件
{
name: "Les Miserables", //组件的名称
type: "graph", //组件的类行,选择graph即关系图
layout: "force", //graph的了类型,此时为力引导
data: this.graph.nodes, //要展示的数据
links: this.graph.links, //要展示的关系线
categories: this.graph.categories, //展示的所有分类
roam: true, //是否可以缩放
label: {
//graph节点的标签
position: "right", //标签所在的位置
show: false, //是否默认显示标签
},
force: {
//力引导的配置
repulsion: 100, //节点之间的斥力
},
scaleLimit: {
//滚轮缩放的极限控制
max: 12, //滚轮缩放最大值
min: 3, //滚轮缩放的最小值
},
},
],
};
通过echarts的配置文件进行渲染
this.myEchart.setOption(this.option); //通过echarts的配置文件进行渲染
以上就是全部步骤了实例代码如下
<template>
<div id="chartsBox"></div>
</template>
<script>
export default {
name: "",
data() {
return {
myEchart: {},
graph: {
nodes: [
{
id: "0",
name: "Myriel",
symbolSize: 5,
x: -266.82776,
y: 299.6904,
value: 28.685715,
category: 0,
},
{
id: "1",
name: "Napoleon",
symbolSize: 5,
x: -418.08344,
y: 446.8853,
value: 4,
category: 0,
},
{
id: "2",
name: "MlleBaptistine",
symbolSize: 5,
x: -212.76357,
y: 245.29176,
value: 9.485714,
category: 1,
},
{
id: "3",
name: "MmeMagloire",
symbolSize: 5,
x: -242.82404,
y: 235.26283,
value: 9.485714,
category: 1,
},
{
id: "4",
name: "CountessDeLo",
symbolSize: 5,
x: -379.30386,
y: 429.06424,
value: 4,
category: 0,
},
{
id: "5",
name: "Geborand",
symbolSize: 5,
x: -417.26337,
y: 406.03506,
value: 4,
category: 0,
},
{
id: "6",
name: "Champtercier",
symbolSize: 5,
x: -332.6012,
y: 485.16974,
value: 4,
category: 0,
},
{
id: "7",
name: "Cravatte",
symbolSize: 5,
x: -382.69568,
y: 475.09113,
value: 4,
category: 0,
},
{
id: "8",
name: "Count",
symbolSize: 5,
x: -320.384,
y: 387.17325,
value: 4,
category: 0,
},
{
id: "9",
name: "OldMan",
symbolSize: 5,
x: -344.39832,
y: 451.16772,
value: 4,
category: 0,
},
{
id: "10",
name: "Labarre",
symbolSize: 5,
x: -89.34107,
y: 234.56128,
value: 4,
category: 1,
},
{
id: "11",
name: "Valjean",
symbolSize: 5,
x: -87.93029,
y: -6.8120565,
value: 100,
category: 1,
},
{
id: "12",
name: "Marguerite",
symbolSize: 5,
x: -339.77908,
y: -184.69139,
value: 6.742859,
category: 1,
},
{
id: "13",
name: "MmeDeR",
symbolSize: 5,
x: -194.31313,
y: 178.55301,
value: 4,
category: 1,
},
{
id: "14",
name: "Isabeau",
symbolSize: 5,
x: -158.05168,
y: 201.99768,
value: 4,
category: 1,
},
{
id: "15",
name: "Gervais",
symbolSize: 5,
x: -127.701546,
y: 242.55057,
value: 4,
category: 1,
},
{
id: "16",
name: "Tholomyes",
symbolSize: 5,
x: -385.2226,
y: -393.5572,
value: 25.942856,
category: 2,
},
{
id: "17",
name: "Listolier",
symbolSize: 5,
x: -516.55884,
y: -393.98975,
value: 20.457146,
category: 2,
},
{
id: "18",
name: "Fameuil",
symbolSize: 5,
x: -464.79382,
y: -493.57944,
value: 20.457146,
category: 2,
},
{
id: "19",
name: "Blacheville",
symbolSize: 5,
x: -515.1624,
y: -456.9891,
value: 20.457146,
category: 2,
},
{
id: "20",
name: "Favourite",
symbolSize: 5,
x: -408.12122,
y: -464.5048,
value: 20.457146,
category: 2,
},
{
id: "21",
name: "Dahlia",
symbolSize: 5,
x: -456.44113,
y: -425.13303,
value: 20.457146,
category: 2,
},
{
id: "22",
name: "Zephine",
symbolSize: 5,
x: -459.1107,
y: -362.5133,
value: 20.457146,
category: 2,
},
{
id: "23",
name: "Fantine",
symbolSize: 5,
x: -313.42786,
y: -289.44803,
value: 42.4,
category: 2,
},
{
id: "24",
name: "MmeThenardier",
symbolSize: 5,
x: 4.6313396,
y: -273.8517,
value: 31.428574,
category: 7,
},
{
id: "25",
name: "Thenardier",
symbolSize: 5,
x: 82.80825,
y: -203.1144,
value: 45.142853,
category: 7,
},
{
id: "26",
name: "Cosette",
symbolSize: 5,
x: 78.64646,
y: -31.512747,
value: 31.428574,
category: 6,
},
{
id: "27",
name: "Javert",
symbolSize: 5,
x: -81.46074,
y: -204.20204,
value: 47.88571,
category: 7,
},
{
id: "28",
name: "Fauchelevent",
symbolSize: 5,
x: -225.73984,
y: 82.41631,
value: 12.228573,
category: 4,
},
{
id: "29",
name: "Bamatabois",
symbolSize: 5,
x: -385.6842,
y: -20.206686,
value: 23.2,
category: 3,
},
{
id: "30",
name: "Perpetue",
symbolSize: 5,
x: -403.92447,
y: -197.69823,
value: 6.742859,
category: 2,
},
{
id: "31",
name: "Simplice",
symbolSize: 5,
x: -281.4253,
y: -158.45137,
value: 12.228573,
category: 2,
},
{
id: "32",
name: "Scaufflaire",
symbolSize: 5,
x: -122.41348,
y: 210.37503,
value: 4,
category: 1,
},
{
id: "33",
name: "Woman1",
symbolSize: 5,
x: -234.6001,
y: -113.15067,
value: 6.742859,
category: 1,
},
{
id: "34",
name: "Judge",
symbolSize: 5,
x: -387.84915,
y: 58.7059,
value: 17.714287,
category: 3,
},
{
id: "35",
name: "Champmathieu",
symbolSize: 5,
x: -338.2307,
y: 87.48405,
value: 17.714287,
category: 3,
},
{
id: "36",
name: "Brevet",
symbolSize: 5,
x: -453.26874,
y: 58.94648,
value: 17.714287,
category: 3,
},
{
id: "37",
name: "Chenildieu",
symbolSize: 5,
x: -386.44904,
y: 140.05937,
value: 17.714287,
category: 3,
},
{
id: "38",
name: "Cochepaille",
symbolSize: 5,
x: -446.7876,
y: 123.38005,
value: 17.714287,
category: 3,
},
{
id: "39",
name: "Pontmercy",
symbolSize: 5,
x: 336.49738,
y: -269.55914,
value: 9.485714,
category: 6,
},
{
id: "40",
name: "Boulatruelle",
symbolSize: 5,
x: 29.187843,
y: -460.13132,
value: 4,
category: 7,
},
{
id: "41",
name: "Eponine",
symbolSize: 5,
x: 238.36697,
y: -210.00926,
value: 31.428574,
category: 7,
},
{
id: "42",
name: "Anzelma",
symbolSize: 5,
x: 189.69513,
y: -346.50662,
value: 9.485714,
category: 7,
},
{
id: "43",
name: "Woman2",
symbolSize: 5,
x: -187.00418,
y: -145.02663,
value: 9.485714,
category: 6,
},
{
id: "44",
name: "MotherInnocent",
symbolSize: 5,
x: -252.99521,
y: 129.87549,
value: 6.742859,
category: 4,
},
{
id: "45",
name: "Gribier",
symbolSize: 5,
x: -296.07935,
y: 163.11964,
value: 4,
category: 4,
},
{
id: "46",
name: "Jondrette",
symbolSize: 5,
x: 550.3201,
y: 522.4031,
value: 4,
category: 5,
},
{
id: "47",
name: "MmeBurgon",
symbolSize: 5,
x: 488.13535,
y: 356.8573,
value: 6.742859,
category: 5,
},
{
id: "48",
name: "Gavroche",
symbolSize: 5,
x: 387.89572,
y: 110.462326,
value: 61.600006,
category: 8,
},
{
id: "49",
name: "Gillenormand",
symbolSize: 5,
x: 126.4831,
y: 68.10622,
value: 20.457146,
category: 6,
},
{
id: "50",
name: "Magnon",
symbolSize: 5,
x: 127.07365,
y: -113.05923,
value: 6.742859,
category: 6,
},
{
id: "51",
name: "MlleGillenormand",
symbolSize: 5,
x: 162.63559,
y: 117.6565,
value: 20.457146,
category: 6,
},
{
id: "52",
name: "MmePontmercy",
symbolSize: 5,
x: 353.66415,
y: -205.89165,
value: 6.742859,
category: 6,
},
{
id: "53",
name: "MlleVaubois",
symbolSize: 5,
x: 165.43939,
y: 339.7736,
value: 4,
category: 6,
},
{
id: "54",
name: "LtGillenormand",
symbolSize: 5,
x: 137.69348,
y: 196.1069,
value: 12.228573,
category: 6,
},
{
id: "55",
name: "Marius",
symbolSize: 5,
x: 206.44687,
y: -13.805411,
value: 53.37143,
category: 6,
},
{
id: "56",
name: "BaronessT",
symbolSize: 5,
x: 194.82993,
y: 224.78036,
value: 6.742859,
category: 6,
},
{
id: "57",
name: "Mabeuf",
symbolSize: 5,
x: 597.6618,
y: 135.18481,
value: 31.428574,
category: 8,
},
{
id: "58",
name: "Enjolras",
symbolSize: 5,
x: 355.78366,
y: -74.882454,
value: 42.4,
category: 8,
},
{
id: "59",
name: "Combeferre",
symbolSize: 5,
x: 515.2961,
y: -46.167564,
value: 31.428574,
category: 8,
},
{
id: "60",
name: "Prouvaire",
symbolSize: 5,
x: 614.29285,
y: -69.3104,
value: 25.942856,
category: 8,
},
{
id: "61",
name: "Feuilly",
symbolSize: 5,
x: 550.1917,
y: -128.17537,
value: 31.428574,
category: 8,
},
{
id: "62",
name: "Courfeyrac",
symbolSize: 5,
x: 436.17184,
y: -12.7286825,
value: 36.91429,
category: 8,
},
{
id: "63",
name: "Bahorel",
symbolSize: 5,
x: 602.55225,
y: 16.421427,
value: 34.17143,
category: 8,
},
{
id: "64",
name: "Bossuet",
symbolSize: 5,
x: 455.81955,
y: -115.45826,
value: 36.91429,
category: 8,
},
{
id: "65",
name: "Joly",
symbolSize: 5,
x: 516.40784,
y: 47.242233,
value: 34.17143,
category: 8,
},
{
id: "66",
name: "Grantaire",
symbolSize: 5,
x: 646.4313,
y: -151.06331,
value: 28.685715,
category: 8,
},
{
id: "67",
name: "MotherPlutarch",
symbolSize: 5,
x: 668.9568,
y: 204.65488,
value: 4,
category: 8,
},
{
id: "68",
name: "Gueulemer",
symbolSize: 5,
x: 78.4799,
y: -347.15146,
value: 28.685715,
category: 7,
},
{
id: "69",
name: "Babet",
symbolSize: 5,
x: 150.35959,
y: -298.50797,
value: 28.685715,
category: 7,
},
{
id: "70",
name: "Claquesous",
symbolSize: 5,
x: 137.3717,
y: -410.2809,
value: 28.685715,
category: 7,
},
{
id: "71",
name: "Montparnasse",
symbolSize: 5,
x: 234.87747,
y: -400.85983,
value: 25.942856,
category: 7,
},
{
id: "72",
name: "Toussaint",
symbolSize: 5,
x: 40.942253,
y: 113.78272,
value: 9.485714,
category: 1,
},
{
id: "73",
name: "Child1",
symbolSize: 5,
x: 437.939,
y: 291.58234,
value: 6.742859,
category: 8,
},
{
id: "74",
name: "Child2",
symbolSize: 5,
x: 466.04922,
y: 283.3606,
value: 6.742859,
category: 8,
},
{
id: "75",
name: "Brujon",
symbolSize: 5,
x: 238.79364,
y: -314.06345,
value: 20.457146,
category: 7,
},
{
id: "76",
name: "MmeHucheloup",
symbolSize: 5,
x: 712.18353,
y: 4.8131495,
value: 20.457146,
category: 8,
},
],
links: [
{ source: "1", target: "0" },
{ source: "2", target: "0" },
{ source: "3", target: "0" },
{ source: "3", target: "2" },
{ source: "4", target: "0" },
{ source: "5", target: "0" },
{ source: "6", target: "0" },
{ source: "7", target: "0" },
{ source: "8", target: "0" },
{ source: "9", target: "0" },
{ source: "11", target: "0" },
{ source: "11", target: "2" },
{ source: "11", target: "3" },
{ source: "11", target: "10" },
{ source: "12", target: "11" },
{ source: "13", target: "11" },
{ source: "14", target: "11" },
{ source: "15", target: "11" },
{ source: "17", target: "16" },
{ source: "18", target: "16" },
{ source: "18", target: "17" },
{ source: "19", target: "16" },
{ source: "19", target: "17" },
{ source: "19", target: "18" },
{ source: "20", target: "16" },
{ source: "20", target: "17" },
{ source: "20", target: "18" },
{ source: "20", target: "19" },
{ source: "21", target: "16" },
{ source: "21", target: "17" },
{ source: "21", target: "18" },
{ source: "21", target: "19" },
{ source: "21", target: "20" },
{ source: "22", target: "16" },
{ source: "22", target: "17" },
{ source: "22", target: "18" },
{ source: "22", target: "19" },
{ source: "22", target: "20" },
{ source: "22", target: "21" },
{ source: "23", target: "11" },
{ source: "23", target: "12" },
{ source: "23", target: "16" },
{ source: "23", target: "17" },
{ source: "23", target: "18" },
{ source: "23", target: "19" },
{ source: "23", target: "20" },
{ source: "23", target: "21" },
{ source: "23", target: "22" },
{ source: "24", target: "11" },
{ source: "24", target: "23" },
{ source: "25", target: "11" },
{ source: "25", target: "23" },
{ source: "25", target: "24" },
{ source: "26", target: "11" },
{ source: "26", target: "16" },
{ source: "26", target: "24" },
{ source: "26", target: "25" },
{ source: "27", target: "11" },
{ source: "27", target: "23" },
{ source: "27", target: "24" },
{ source: "27", target: "25" },
{ source: "27", target: "26" },
{ source: "28", target: "11" },
{ source: "28", target: "27" },
{ source: "29", target: "11" },
{ source: "29", target: "23" },
{ source: "29", target: "27" },
{ source: "30", target: "23" },
{ source: "31", target: "11" },
{ source: "31", target: "23" },
{ source: "31", target: "27" },
{ source: "31", target: "30" },
{ source: "32", target: "11" },
{ source: "33", target: "11" },
{ source: "33", target: "27" },
{ source: "34", target: "11" },
{ source: "34", target: "29" },
{ source: "35", target: "11" },
{ source: "35", target: "29" },
{ source: "35", target: "34" },
{ source: "36", target: "11" },
{ source: "36", target: "29" },
{ source: "36", target: "34" },
{ source: "36", target: "35" },
{ source: "37", target: "11" },
{ source: "37", target: "29" },
{ source: "37", target: "34" },
{ source: "37", target: "35" },
{ source: "37", target: "36" },
{ source: "38", target: "11" },
{ source: "38", target: "29" },
{ source: "38", target: "34" },
{ source: "38", target: "35" },
{ source: "38", target: "36" },
{ source: "38", target: "37" },
{ source: "39", target: "25" },
{ source: "40", target: "25" },
{ source: "41", target: "24" },
{ source: "41", target: "25" },
{ source: "42", target: "24" },
{ source: "42", target: "25" },
{ source: "42", target: "41" },
{ source: "43", target: "11" },
{ source: "43", target: "26" },
{ source: "43", target: "27" },
{ source: "44", target: "11" },
{ source: "44", target: "28" },
{ source: "45", target: "28" },
{ source: "47", target: "46" },
{ source: "48", target: "11" },
{ source: "48", target: "25" },
{ source: "48", target: "27" },
{ source: "48", target: "47" },
{ source: "49", target: "11" },
{ source: "49", target: "26" },
{ source: "50", target: "24" },
{ source: "50", target: "49" },
{ source: "51", target: "11" },
{ source: "51", target: "26" },
{ source: "51", target: "49" },
{ source: "52", target: "39" },
{ source: "52", target: "51" },
{ source: "53", target: "51" },
{ source: "54", target: "26" },
{ source: "54", target: "49" },
{ source: "54", target: "51" },
{ source: "55", target: "11" },
{ source: "55", target: "16" },
{ source: "55", target: "25" },
{ source: "55", target: "26" },
{ source: "55", target: "39" },
{ source: "55", target: "41" },
{ source: "55", target: "48" },
{ source: "55", target: "49" },
{ source: "55", target: "51" },
{ source: "55", target: "54" },
{ source: "56", target: "49" },
{ source: "56", target: "55" },
{ source: "57", target: "41" },
{ source: "57", target: "48" },
{ source: "57", target: "55" },
{ source: "58", target: "11" },
{ source: "58", target: "27" },
{ source: "58", target: "48" },
{ source: "58", target: "55" },
{ source: "58", target: "57" },
{ source: "59", target: "48" },
{ source: "59", target: "55" },
{ source: "59", target: "57" },
{ source: "59", target: "58" },
{ source: "60", target: "48" },
{ source: "60", target: "58" },
{ source: "60", target: "59" },
{ source: "61", target: "48" },
{ source: "61", target: "55" },
{ source: "61", target: "57" },
{ source: "61", target: "58" },
{ source: "61", target: "59" },
{ source: "61", target: "60" },
{ source: "62", target: "41" },
{ source: "62", target: "48" },
{ source: "62", target: "55" },
{ source: "62", target: "57" },
{ source: "62", target: "58" },
{ source: "62", target: "59" },
{ source: "62", target: "60" },
{ source: "62", target: "61" },
{ source: "63", target: "48" },
{ source: "63", target: "55" },
{ source: "63", target: "57" },
{ source: "63", target: "58" },
{ source: "63", target: "59" },
{ source: "63", target: "60" },
{ source: "63", target: "61" },
{ source: "63", target: "62" },
{ source: "64", target: "11" },
{ source: "64", target: "48" },
{ source: "64", target: "55" },
{ source: "64", target: "57" },
{ source: "64", target: "58" },
{ source: "64", target: "59" },
{ source: "64", target: "60" },
{ source: "64", target: "61" },
{ source: "64", target: "62" },
{ source: "64", target: "63" },
{ source: "65", target: "48" },
{ source: "65", target: "55" },
{ source: "65", target: "57" },
{ source: "65", target: "58" },
{ source: "65", target: "59" },
{ source: "65", target: "60" },
{ source: "65", target: "61" },
{ source: "65", target: "62" },
{ source: "65", target: "63" },
{ source: "65", target: "64" },
{ source: "66", target: "48" },
{ source: "66", target: "58" },
{ source: "66", target: "59" },
{ source: "66", target: "60" },
{ source: "66", target: "61" },
{ source: "66", target: "62" },
{ source: "66", target: "63" },
{ source: "66", target: "64" },
{ source: "66", target: "65" },
{ source: "67", target: "57" },
{ source: "68", target: "11" },
{ source: "68", target: "24" },
{ source: "68", target: "25" },
{ source: "68", target: "27" },
{ source: "68", target: "41" },
{ source: "68", target: "48" },
{ source: "69", target: "11" },
{ source: "69", target: "24" },
{ source: "69", target: "25" },
{ source: "69", target: "27" },
{ source: "69", target: "41" },
{ source: "69", target: "48" },
{ source: "69", target: "68" },
{ source: "70", target: "11" },
{ source: "70", target: "24" },
{ source: "70", target: "25" },
{ source: "70", target: "27" },
{ source: "70", target: "41" },
{ source: "70", target: "58" },
{ source: "70", target: "68" },
{ source: "70", target: "69" },
{ source: "71", target: "11" },
{ source: "71", target: "25" },
{ source: "71", target: "27" },
{ source: "71", target: "41" },
{ source: "71", target: "48" },
{ source: "71", target: "68" },
{ source: "71", target: "69" },
{ source: "71", target: "70" },
{ source: "72", target: "11" },
{ source: "72", target: "26" },
{ source: "72", target: "27" },
{ source: "73", target: "48" },
{ source: "74", target: "48" },
{ source: "74", target: "73" },
{ source: "75", target: "25" },
{ source: "75", target: "41" },
{ source: "75", target: "48" },
{ source: "75", target: "68" },
{ source: "75", target: "69" },
{ source: "75", target: "70" },
{ source: "75", target: "71" },
{ source: "76", target: "48" },
{ source: "76", target: "58" },
{ source: "76", target: "62" },
{ source: "76", target: "63" },
{ source: "76", target: "64" },
{ source: "76", target: "65" },
{ source: "76", target: "66" },
],
categories: [
{ name: "A" },
{ name: "B" },
{ name: "C" },
{ name: "D" },
{ name: "E" },
{ name: "F" },
{ name: "G" },
{ name: "H" },
{ name: "I" },
],
},
};
},
created() {},
mounted() {
this.init();
},
methods: {
init() {
this.myEchart = this.$echarts.init(document.querySelector("#chartsBox")); //将echarts绑定到dom元素上
this.option = {
//echarts的配置文件
title: {
//title组件
text: "Les Miserables", //显示的文本
subtext: "Default layout",
top: "bottom", //组件在echarts上下的位置
left: "right", //组件在echarts左右上的位置
},
tooltip: {
//提示框组件当鼠标移入时触发
show: true, //是否显示提示框组件。
trigger: "item", //触发类型
},
legend: [
//图例组件
{
data: this.graph.categories.map(function (a) {
//图例所要分类的种类
return a.name;
}),
},
],
series: [
//数据展示组件
{
name: "Les Miserables", //组件的名称
type: "graph", //组件的类行,选择graph即关系图
layout: "force", //graph的了类型,此时为力引导
data: this.graph.nodes, //要展示的数据
links: this.graph.links, //要展示的关系线
categories: this.graph.categories, //展示的所有分类
roam: true, //是否可以缩放
label: {
//graph节点的标签
position: "right", //标签所在的位置
show: false, //是否默认显示标签
},
force: {
//力引导的配置
repulsion: 100, //节点之间的斥力
},
scaleLimit: {
//滚轮缩放的极限控制
max: 12, //滚轮缩放最大值
min: 3, //滚轮缩放的最小值
},
},
],
};
this.myEchart.setOption(this.option); //通过echarts的配置文件进行渲染
},
},
};
</script>
<style scoped>
#chartsBox {
width: 100%;
height: 100vh;
}
</style>
vue中关系图组件
1.Graph.vue
<template>
<div class="yh-graph"></div>
</template>
<script>
var _POS = [
[-1, -0.35],
[1.0, 0.1],
[0.72, -0.45],
[-0.75, 0.25],
[0.4, -0.75],
[-0.5, -0.55],
[0.45, 0.2],
[-0.15, -0.66]
];
var _N_RADIUS = 600;
function _position(node, i) {
if (i == 0) {
node.x = 0;
node.y = 0;
} else {
i = i - 1;
var k = i % _POS.length;
var p = _POS[k];
var r = _N_RADIUS * (i / _POS.length + 1);
node.x = p[0] * r;
node.y = p[1] * r;
}
}
function _create_nodes(nodes) {
var arr = [];
var i = 0;
nodes.forEach(function(e) {
var n = {};
n.id = e.id;
n.name = e.name;
var s = e.size;
n.value = s;
n.symbolSize = s;
if (e.image) {
n.symbol = "image://" + e.image;
}
_position(n, i++);
arr.push(n);
});
return arr;
}
function _create_links(links) {
var arr = [];
links.forEach(function(e) {
var l = {};
l.id = e.id;
l.name = e.name;
l.source = e.source;
l.target = e.target;
arr.push(l);
});
return arr;
}
function showGraph(chart, nodes, links) {
var option = {
series: [
{
name: "g1",
type: "graph",
animation: false,
data: nodes,
links: links,
roam: false,
focusNodeAdjacency: true,
itemStyle: {
normal: {
color: "#999",
backgroundColor: "#fff",
borderColor: "#fff",
borderWidth: 1,
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, 0.3)"
}
},
label: {
show: true,
position: "bottom",
color: "#000",
formatter: "{b}"
},
force: {
repulsion: 10000
},
lineStyle: {
type: "solid",
color: "#666",
curveness: 0.3,
opacity: 0.9,
width: 3
},
edgeLabel: {
show: true,
formatter: function(params) {
return params.data["name"];
},
color: "#fff",
borderColor: "#666",
backgroundColor: "#666",
borderWidth: 1,
borderRadius: 3,
padding: [2, 5, 2, 5]
},
emphasis: {
lineStyle: {
width: 10
}
}
}
]
};
chart.setOption(option);
chart.dispatchAction({
type: "unfocusNodeAdjacency",
seriesIndex: 0,
dataIndex: 0
});
}
export default {
name: "YhGraph",
data() {
return {
nodes: [],
links: []
};
},
methods: {
onLinkClick(link) {
this.$emit("select-link", {
id: link.id,
name: link.name,
source: this.getNodeDesc(link.source),
target: this.getNodeDesc(link.target)
});
},
getNodeDesc(id) {
var nodes = this.nodes;
for (var i = 0; i < nodes.length; ++i) {
var n = nodes[i];
if (n.id == id) {
return { id: id, name: n.name };
}
}
},
updateLinkName(id, name) {
var links = this.links;
for (var i = 0; i < links.length; ++i) {
var n = links[i];
if (n.id == id) {
n.name = name;
var chart = this.$chart;
chart.clear();
showGraph(chart, this.nodes, this.links);
}
}
},
show(g) {
this.nodes = _create_nodes(g.nodes);
this.links = _create_links(g.links);
showGraph(this.$chart, this.nodes, this.links);
}
},
mounted() {
var chart = echarts.init(this.$el);
var vm = this;
chart.on("click", function(params) {
if (params.seriesIndex == 0 && params.dataType == "edge") {
vm.onLinkClick(params.data);
}
});
this.$chart = chart;
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
2.GraphDemo.vue
<template>
<div class="yh-page">
<h1>关系图演示</h1>
<div class="desc">
Demo源代码：
</div>
<div class="yh-block" style="align:top">
<yh-graph
ref="graph"
style="width:500px;height:400px;display:inline-block"
@select-link="onLinkSelect"
></yh-graph>
<div class="rel-form">
<el-form v-show="editing" :model="rel" label-width="50px" class="yh-small">
<div style="padding-left:50px">{{rel.source}} 与 {{rel.target}}</div>
<el-form-item label="关系">
<el-input v-model="rel.name" size="small"></el-input>
</el-form-item>
<yh-button class="yh-primary" @click="onSaveClick">确定</yh-button>
</el-form>
</div>
</div>
</div>
</template>
<script>
import graph from "../../components/comcompont/echarts/Graph";
import yhbutton from "../../components/comcompont/Button";
export default {
name: "GraphDemo",
data() {
return {
rel: {
id: "",
source: "",
target: "",
oldName: "",
name: ""
},
editing: false,
graph: {
nodes: [
{ id: "0", name: "客户1", size: 100, image: "/images/ic_head.png" },
{ id: "1", name: "A", size: 70 },
{ id: "2", name: "B", size: 70 },
{ id: "3", name: "C", size: 70 },
{ id: "4", name: "D", size: 70 },
{ id: "5", name: "E", size: 70 },
{ id: "6", name: "F", size: 70 },
{ id: "7", name: "G", size: 70 },
{ id: "8", name: "H", size: 70 }
],
links: [
{ id: "0", name: "夫妻", source: "0", target: "1" },
{ id: "1", name: "父子", source: "0", target: "2" },
{ id: "2", name: "母子", source: "0", target: "3" },
{ id: "3", name: "父子", source: "0", target: "4" },
{ id: "4", name: "同事", source: "0", target: "5" },
{ id: "5", name: "同事", source: "0", target: "6" },
{ id: "6", name: "同事", source: "0", target: "7" },
{ id: "7", name: "同事", source: "0", target: "8" }
]
}
};
},
methods: {
onLinkSelect(link) {
var r = this.rel;
r.id = link.id;
r.name = link.name;
r.oldName = link.name;
r.source = link.source.name;
r.target = link.target.name;
this.editing = true;
},
onSaveClick() {
var rel = this.rel;
if (rel.oldName != rel.name) {
this.$refs.graph.updateLinkName(rel.id, rel.name);
}
this.editing = false;
}
},
mounted() {
this.$refs.graph.show(this.graph);
},
components: {
"yh-graph": graph,
"yh-button": yhbutton
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
.rel-form {
width: 300px;
height: 400px;
display: inline-block;
float: right;
margin-right: 20px;
margin-top: 20px;
}
</style>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
赞 (0)
相关推荐
-
vue使用GraphVis开发无限拓展的关系图谱的实现
1.去GraphVis官网下载对应的js,新版和旧版的js有所不同,看自己需求引入旧版还是新版(GraphVis官方网址:http://www.graphvis.cn/) visgraph.min.js (基本配置js) visgraph-layout.min.js(配置布局js) 2.在需要的vue文件引入js文件 import VisGraph from '@/assets/js/GraphVis/old/visgraph.min.js' // 自己对应的js文件位置 import Layo
-
在vue项目中集成graphql(vue-ApolloClient)
1.什么是graphql GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时 下图展示graphql所处的位置 2.优点 1.GraphQL API 有强类型 schema GraphQL schema是强类型的,可使用SDL(GraphQL Schema Definition Language)来定义.比如,可以使用构建工具验证API请求,编译时检查API调用可能发生的错误 2.按需获取 在不添加后端接口的前提下减少不必要的字段,做到前端自主订阅字段
-
vue中使用mxgraph的方法实例代码详解
1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })
-
vue中使用GraphQL的实例代码
上篇给大家介绍了Java 使用 Graphql 搭建查询服务详解.这里我们讲讲如何在Vue中使用GraphQL. 1. 初始化vue项目 npm install -g @vue/cli vue create vue-apollo-demo 选择默认cli的默认模板就可以了 添加 /src/graphql/article.js . /src/utils/graphql.js 两个文件. ├── node_modules └── public │ ├── favicon.ico │ └── inde
-
在vue中使用eacharts创建graph关系图方式
目录 使用eacharts创建graph关系图 vue中关系图组件 1.Graph.vue 2.GraphDemo.vue 使用eacharts创建graph关系图 在最近的工作中遇到了这个问题一开始遇到遇到问题且网上现在的教程不那么详细于是想着自己写一个来记录一下. 首先想使用echarts先下载echarts包命令如下 npm install echarts --save 然后将eacharts引入到项目中,推荐在main.js引入. import * as echarts from 'ec
-
Vue中使用better-scroll实现轮播图组件
better-scroll 是什么 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化. better-scroll 是基于原生 JS 实现的,不依赖任何框架.它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 JS lib. 今天我们利用它实现一个横向
-
vue中touch和click共存的解决方式
在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent.注意阻止默认行为事件不要添加在touchstart事件上,会影响到click事件的发生. touch事件和click事件发生先后顺序: touchstart,touchmove,touchend,click 补充知识:touchstart与click同时触发 产生冲突的原因 我们可以
-
Vue中引入svg图标的两种方式
Vue中引入svg图标的方式 Vue中引入svg图标的方式一 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName&quo
-
使用Keras中的ImageDataGenerator进行批次读图方式
ImageDataGenerator位于keras.preprocessing.image模块当中,可用于做数据增强,或者仅仅用于一个批次一个批次的读进图片数据.一开始以为ImageDataGenerator是用来做数据增强的,但我的目的只是想一个batch一个batch的读进图片而已,所以一开始没用它,后来发现它是有这个功能的,而且使用起来很方便. ImageDataGenerator类包含了如下参数:(keras中文教程) ImageDataGenerator(featurewise_cen
-
vue中兄弟组件传值的两种方式小结
目录 一. bus总线传值的使用 二. 使用常规的传值:(子传父,父再传子) 总结 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值: b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus总线传值的使用 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单,就是暴露一个vue实例而已. 有人喜欢在main.js全局引入该js文件,我一般在需要使用到
-
vue中data里面的数据相互使用方式
目录 data里面的数据相互使用 具体代码如下 data里的数据不能相互引用问题 data里面的数据相互使用 今天在写代码的时候,遇到一个问题,我想使用data里面的一个对象使用data里面的某个数据,附图片: 我想让active的值给params对象里面的topicListType使用,我不想直接在一个方法里面改变这个值(想改的话就直接可以改了,太简单),所以就有了这个想法. 在data里面使用,但是肯定不能写成 this.params.topicListType: this.active,这
-
Vue中定义全局变量与常量的各种方式详解
前言 本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 global.js 并且在其中定义 let a = 10; 在入口文件中引入 global.js import './global.js' 在项目中使用: a // 报错 发现报错了, a 并没有定义. 为什么? 这个涉及到模块作用域: 1 每一个 js 都相当于
-
Vue中的同步调用和异步调用方式
目录 Vue的同步调用和异步调用 Promise实现异步调用 async /await方法实现同步调用 Vue同步和异步的问题 基本语法 实例 Vue的同步调用和异步调用 Promise实现异步调用 异步调用,增加a.b两个方法,并在mounted中调用. 观察客户端,并没有按照方法执行的顺序输出,使用Promise实现了异步调用. 观察客户端,并没有按照方法执行的顺序输出,使用Promise实现了异步调用. async /await方法实现同步调用 使用async 和 await配合promi
-
vue中引入mousewheel事件及兼容性处理方式
目录 引入mousewheel事件及兼容性处理 滚动条设置的要点在于 关于scroll和mousewheel事件的问题 需要注意的点 实验开始 引入mousewheel事件及兼容性处理 项目实现过程中需要对一个已经有纵向滚动条的table表格增加鼠标滚轮(mousewheel)事件,方便查看数据:其实现原理与我上一篇博客中的拖动事件类似,利用模拟出来的同一个滚动条来实现 滚动条设置的要点在于 1.滚动条与滚动槽的高度比例 应该等于 内容区(动态变化)和可视区的高度比例:滚动槽与可视区平齐,高度一