首先先通过npm下载安装element、echarts相关组件 ，这里不再做多叙述
Vue引入element-ui
在main.js中导入，再使用vue.use()语句调用，之后即可在组件中使用，需注意element必须还要引入css样式
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
Vue引入echarts
在main.js中加入以下
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2.根据官方示例在组件中中加入需要的模型，然后在<template></template>中用一个dev引入即可
具体Echart使用步骤：
1.首先引入echarts库,
2. 在<template></template>中开辟一个显示图形的区域，例如：
<div id="myChart" style="width: 1000px;height:1000px;"></div>
3.图表初始化，
var myChart =this.$echarts.init(document.getElementById('myChart'))
4.option函数设置参数
5.Setoption函数调用option
例如一个简单的两个节点的关系图如下：
<template>
<div id="myChart" style="width: 1000px;height:1000px;"></div>
</template>
<script>
//关系图
export default {
name:"Graph",
data() {
return {
msg:'Welcome to Your Vue.js App'
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
var myChart =this.$echarts.init(document.getElementById('myChart'))
// 基于准备好的dom，初始化echarts实例
//参数设置
var option = {
title: {
text:'Graph 简单示例'
},
tooltip: {},
animationDurationUpdate:1500,
animationEasingUpdate:'quinticInOut',
series: [
{
type:'graph',
layout:'none',
symbolSize:50,
roam:true,
label: {
show:true
},
edgeSymbol: ['circle','arrow'],
edgeSymbolSize: [4,10],
edgeLabel: {
fontSize:20
},
data: [{
name:'节点1',
x:300,
y:300
}, {
name:'节点2',
x:800,
y:300
}],
// links: [],
links: [{
source:0,
target:1,
symbolSize: [5,20],
label: {
show:true
},
lineStyle: {
width:5,
curveness:0.2
}
}, {
source:'节点2',
target:'节点1',
label: {
show:true
},
lineStyle: {
curveness:0.2
}
}],
}
]
};
//参数设置方法option
myChart.setOption(option);
}
}
}
</script>
<style scoped>
</style>
网友评论