Vue+ECharts画关系图
项目需求：使用echarts画出一个关系图并在前端进行展示
使用框架：vue2.x
今天忙了一天，终于是做出了一个简单的示意图。先上图看看效果。
只是简单的做了一个视图，数据是写死的，后面会记录动态获取数据并生成关系图的方法。
接下来介绍，使用vue+echarts画图的方法。
首先，引入echarts模块。在vue框架里每使用一个模块几乎都是同一个方法–引入模块。
这里我们首先下载echart模块，使用以下命令：
npm install echarts –save
下载完了之后就是引入了。共有两种方式供引入，一种是全局引用，还有一种是局部引用。
全局引用：
添加main.js如下：
import echarts from “echarts”;Vue.prototype.$echarts = echarts;
后再绘图vue文件里调用时要加上this.$echarts,给个例子：
<template><div id=’chart’> </div></template><script> //初始化ecahrtslet myEchart = this.$echarts.init(document.getElementById(‘chart’))</script>
局部引用
每一个模块都用全局引用会导致启动服务时速度降低，所以，魁梧的白云项目中echarts模块使用的比较少的时候就可以使用局部引用的形式。就比如我这个项目，只有一个组件能使用到echarts，因而就使用了局部引用的方式。
在绘图vue文件直接导入echarts模块（当然是以已经下载echarts模块为前提的）
直接贴上源代码
<template> <div id=”graph-chart”> <div id=”main-chart” style=”width: 100%; height: 100%”></div> </div></template><script>import echarts from “echarts”; export default { methods:{ initChart: function () { let myChart = echarts.init(document.getElementById(“main-chart”)); myChart.resize(); //这里只节选了部分 }, } }
注意与全局的不同，一个是this.$echarts;一个直接是echarts。
当然还有更为轻便的引入方式，就是使用require进行按需引入，这里就不深究了。好了，当echarts引用完后就可以进行下一步了。
这一步就不过多赘述了，直接上代码。
先定义一个盒子用来装关系图
<template> <div id=”graph-chart”> <div id=”main-chart” style=”width: 100%; height: 100%”></div> </div></template><style lang=”scss” scoped>#graph-chart { height: 100%; width: 100%;}</style>
注意给div定一个大小，否则会有点丑。
盒子定好了就直接上手echarts了
//初始化echarts initChart: function () { let myChart = echarts.init(document.getElementById(“main-chart”)); myChart.resize(); //自适应大小 myChart.setOption(this.setOption()); },
定义*initChart()方法用来初始化图表，调用setOption()*方法写echarts的参数配置，我们继续来写这个函数。
setOption: function () { let option = { title: { text: “Graph 简单示例”, }, tooltip: {}, //提示框 animationDurationUpdate: 1500, animationEasingUpdate: “quinticInOut”, series: [ { type: “graph”, layout: “force”, // symbolSize: 50, //倘若该属性不在link里，则其表示节点的大小；否则即为线两端标记的大小 symbolSize: (value, params) => { switch (params.data.category) { case 0: return 100; break; case 1: return 50; break; } }, roam: true, //鼠标缩放功能 label: { show: true, //是否显示标签 }, focusNodeAdjacency: true, //鼠标移到节点上时突出显示结点以及邻节点和边 edgeSymbol: [“none”, “arrow”], //关系两边的展现形式，也即图中线两端的展现形式。arrow为箭头 edgeSymbolSize: [4, 10], draggable: true, edgeLabel: { fontSize: 20, //关系（也即线）上的标签字体大小 }, force: { repulsion: 200, edgeLength: 120, }, data: [ { name: “节点1”, category: 0, }, { name: “节点2”, category: 1, }, { name: “节点3”, category: 1, }, { name: “节点4”, category: 1, }, ], // links: [], links: [ { source: “节点1”, target: “节点3”, }, { source: “节点1”, target: “节点2”, }, { source: “节点1”, target: “节点4”, }, ], lineStyle: { opacity: 0.9, width: 2, curveness: 0, }, }, ], }; return option; },
代码解释写得很清楚，就不再啰嗦了。既然方法都写好了，那就再需要一个钩子函数来调用这个方法。一般绘图会放在*mounted()*函数里。
所以再加上一行代码
mounted() { this.initChart(); },
这样简单的echarts就画好了。因为之前用纯js画过echarts大屏，所以接触起来基本没什么问题。
但是，今天还是有个问题一直困惑着我，希望能得到解答。问题是
注意是回车键后再传值，我在el-input里已经使用了v-model绑定inputEntity,然后使用props将值传给了子组件，传值实现了。但是是同步传值，就是在输入框输入值之后子组件立马能获得输入框里的数据，用户并未回车确认搜索但是值还是传过去了。
尝试过直接绑定键盘事件，不使用v-model，但是失败了，不是用v-model输入框直接不能输入数据。还是希望能早点解决这个问题。
好了，本次记录到此为止！
93237749
