(1)自定义关系图表组件:WuGuiXinGraphEcharts.vue
<template>
<div ref="myChart"></div>
</template>
<script>
export default {
name: "WuGuiXinGraphEcharts",
props: {
// 节点数组
chartNodes: {
type: Array,
default: [{name:'节点1名称',value:'节点1的值',img:'节点1的图片',tip:'节点1的提示'}]
},
// 核心节点
chartLinks: {
type: Array,
default: [{source:'节点1名称',target:'节点2名称'}]
},
onClick:{
type:Function,
default:function(){}
}
},
data () {
return {
myChart:null,
}
},
created () {
},
mounted (){
},
methods: {
createChart() {
this.$nextTick(()=>{
// 如果已经创建,则不需要再次创建
if(this.myChart==null){
this.myChart = this.$echarts.init(this.$refs.myChart);
console.log("创建关系图表")
};
this.draw(this.myChart,this.chartNodes,this.chartLinks);
this.onBindChart(this.myChart);
console.log("渲染关系图表")
});
},
// 画关系图表
draw(myChart, chartNodes, chartLinks){
myChart.setOption({
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
// 布局:默认'none'、环形'circular'、权重'force'
layout: 'none',
/