标签：02 category 12 myChart 节点 2020 模块 使用 echarts
Vue+ECharts画关系图
项目需求：使用echarts画出一个关系图并在前端进行展示
使用框架：vue2.x
今天忙了一天，终于是做出了一个简单的示意图。先上图看看效果。
只是简单的做了一个视图，数据是写死的，后面会记录动态获取数据并生成关系图的方法。
接下来介绍，使用vue+echarts画图的方法。
首先，引入echarts模块。在vue框架里每使用一个模块几乎都是同一个方法–引入模块。
这里我们首先下载echart模块，使用以下命令：
npm intsall 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 () {
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输入框直接不能输入数据。还是希望能早点解决这个问题。
好了，本次记录到此为止！
标签：02,category,12,myChart,节点,2020,模块,使用,echarts 来源： https://blog.csdn.net/weixin_44427407/article/details/110505147
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。