在vue中使用eacharts创建graph关系图方式_vue.js_

npm install echarts --save

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts//将echarts挂载到vue的原型上

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的配置文件进行渲染