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 () {