<template>
<div class='relation'>
<div id='relate_graph2' :style="{width: '100%', height: '100%'}"></div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
props: {
value: String
},
data () {
return {
list1: [{
'serviceCode': 10000,
'serviceName': '总行前置1',
'psize': 20,
'csize': 30,
'category': 0,
'name': '总行前置1'
}, {
'serviceCode': 10001,
'serviceName': '总行前置2',
'psize': 16,
'csize': 30,
'category': 0,
'name': '总行前置2'
}, {
'serviceCode': 10002,
'serviceName': '总行前置3',
'psize': 56,
'csize': 30,
'category': 1,
'name': '总行前置3'
}],
list2: [{
'sourceId': '10000',
'targetId': '10001'
}, {
'targetId': '10000',
'sourceId': '10001'
}]
}
},
mounted () {
this.drawLine();
this.GetRandom(this.list1);
},
methods: {
drawLine () {
this.GetRandom(this.list1);
var myChart = echarts.init(document.getElementById
echart力导向图的绘制
最新推荐文章于 2023-10-31 20:59:08 发布
本文将详细介绍如何在Vue项目中利用ECharts库绘制关系图,通过实例代码展示力导向图的配置和实现过程,帮助开发者理解并掌握ECharts在可视化数据关系中的应用。
摘要由CSDN通过智能技术生成