Vue+ECharts+关系图

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>
  //初始化ecahrts
	let 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 () {