如何用echarts在Vue中实现长尾词关系的graph图绘制？
- 内容介绍
- 文章标签
- 相关推荐
本文共计4087个文字，预计阅读时间需要17分钟。
目录 + 使用 eacharts 创建 graph 关系图 + vue 中关系图组件 + 1.Graph.vue + 2.GraphDemo.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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。
本文共计4087个文字，预计阅读时间需要17分钟。
目录 + 使用 eacharts 创建 graph 关系图 + vue 中关系图组件 + 1.Graph.vue + 2.GraphDemo.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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。