首先先通過(guò)npm下載安裝element朝扼、echarts相關(guān)組件 ，這里不再做多敘述
Vue引入element-ui
在main.js中導(dǎo)入谜疤，再使用vue.use()語(yǔ)句調(diào)用澎怒，之后即可在組件中使用，需注意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.根據(jù)官方示例在組件中中加入需要的模型脸甘，然后在<template></template>中用一個(gè)dev引入即可
具體Echart使用步驟：
1.首先引入echarts庫(kù),
2. 在<template></template>中開辟一個(gè)顯示圖形的區(qū)域恳啥，例如：
<div id="myChart" style="width: 1000px;height:1000px;"></div>
3.圖表初始化，
var myChart =this.$echarts.init(document.getElementById('myChart'))
4.option函數(shù)設(shè)置參數(shù)
5.Setoption函數(shù)調(diào)用option
例如一個(gè)簡(jiǎn)單的兩個(gè)節(jié)點(diǎn)的關(guān)系圖如下：
<template>
<div id="myChart" style="width: 1000px;height:1000px;"></div>
</template>
<script>
//關(guān)系圖
? ? 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'))
// 基于準(zhǔn)備好的dom丹诀，初始化echarts實(shí)例
? ? ? ? ? ? //參數(shù)設(shè)置
? ? ? ? ? var option = {
title: {
text:'Graph 簡(jiǎn)單示例'
? ? ? ? ? ? },
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:'節(jié)點(diǎn)1',
x:300,
y:300
? ? ? ? ? ? ? ? }, {
name:'節(jié)點(diǎn)2',
x:800,
y:300
? ? ? ? ? ? ? ? }],
// links: [],
? ? ? ? ? ? ? ? links: [{
source:0,
target:1,
symbolSize: [5,20],
label: {
show:true
? ? ? ? ? ? ? ? ? },
lineStyle: {
width:5,
curveness:0.2
? ? ? ? ? ? ? ? ? }
}, {
source:'節(jié)點(diǎn)2',
target:'節(jié)點(diǎn)1',
label: {
show:true
? ? ? ? ? ? ? ? ? },
lineStyle: {
curveness:0.2
? ? ? ? ? ? ? ? ? }
}],
}
]
};
//參數(shù)設(shè)置方法option
? ? ? ? ? ? myChart.setOption(option);
}
}
}
</script>
<style scoped>
</style>
