当前位置： 移动技术网 > IT编程>开发语言>JavaScript > echarts 关系图

echarts 关系图

2020年07月17日  | 移动技术网IT编程  | 我要评论

先放一张效果图
在这里插入图片描述
它来了，它来了，它来了。。。

// 基于准备好的dom，初始化echarts实例
myChart = echarts.init(document.getElementById('relationChart'));
// 数据格式
let data = {
    nodes: [{
        name: '王大妈',
        category: 0
    }, {
        name: '王二麻子',
        category: 1
    }, {
        name: '李四',
        category: 1
    }],
    links: [{
        source: '王大妈',
        target: '李四',
        count: '1'
    }, {
        source: '王大妈',
        target: '王二麻子',
        count: '3'
    }]
 }

 const color1 = '#fe4848';
 const color2 = '#5c85ff';

// 节点配置
 data.nodes.forEach(node => {
 	// 判断节点类型
	 if (node.category === 0) {
	 	// 设置节点图片
	     node.symbol = 'image://'+"/images/fk-gxt-zs.png",
	     // 节点图片大小
	     node.symbolSize = 180;
	     // 节点样式
	     node.itemStyle = {
	     	// 图形颜色
	         color: color1
	     };
	 } else if (node.category === 1) {
	     node.symbol = 'image://'+"/images/fk-gxt-qt.png",
	     node.symbolSize = 100
	     node.itemStyle = {
	         color: color2
	     };
	 }
 });

// 节点关系数据
 data.links.forEach(link => {
 	// 关系标签
     link.label = {
     	// 文字水平居中
         align: 'center',
         // 字号
         fontSize: 12
     };
     // 关系线的样式
     link.lineStyle = {
         color: color2
     }
     
 });

 option = {
     series: [{
         type: 'graph',
         layout: 'force',
         // 节点是否可拖拽
         draggable: true,
         // 是否开启鼠标缩放和平移漫游
         roam: true,
         // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
         focusNodeAdjacency: true,
         // edgeSymbol: ['', 'arrow'],  // 线两端的标记类型   arrow箭头
         // edgeSymbolSize: [80, 10],
         // 线标签配置
         edgeLabel: {
             normal: {
             	 // 是否显示
                 show: true,
                 // 标签位置；可选：'start' 线的起始点，'middle' 线的中点，'end' 线的结束点
                 position:'middle',
                 // 文本样式
                 textStyle: {
                     fontSize: 20,
                 },
                 // 标签文本的显示
                 formatter(x) {
                     return '数量'+x.data.count
                     // return x.data.name+x.data.value;
                 }
             }
         },
         // 节点文本配置
         label: {
         	 // 是否显示
             show: true,
             // 字号
             fontSize:14,
             // 文字偏移
             offset: [0, 15],
             // 显示文本
             formatter:function(e){
                 return e.data.value
             }
         },
         force: {
         	 // 节点之间的斥力因子
             repulsion: 2000,
             // 线两边的节点距离
             edgeLength: 300,
         },
         data: data.nodes,
         links: data.links
     }]
 }

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
 // 图表事件监听
 myChart.on('click',function(e){
     
 })

其他具体配置可查看官方文档：https://echarts.apache.org/zh/option.html#series-graph.type

本文地址：https://blog.csdn.net/qq_36061522/article/details/107352555

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网