echars关系图
Posted York
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echars关系图相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> <title>echars关系图</title> <script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.min.js"></script> <style> body, html, #main { width: 100%; height: 100%; } </style> </head> <body> <div id="main"> </div> <script> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById(\'main\')); var option = { tooltip: { show: false }, animationDurationUpdate: 1500, animationEasingUpdate: \'quinticInOut\', series: [{ type: \'graph\', layout: \'none\', symbol: \'roundRect\', symbolSize: [120, 50], symbolOffset: [\'15%\', 0], roam: false, //禁止用鼠标滚轮缩小放大效果 edgeSymbol: [\'circle\', \'arrow\'], edgeSymbolSize: [4, 15], //focusNodeAdjacency: true, // 连接线上的文字 edgeLabel: { normal: { show: false, textStyle: { fontSize: 15 } } }, lineStyle: { normal: { opacity: 1, width: 2, curveness: 0,//线条的曲度 } }, itemStyle: { normal: { color: "#2d8cf0" } }, // 圆圈内的文字 label: { normal: { show: true, textStyle: { color: "#fff", fontSize: 14, } } }, data: [{ name: \'节点1\', x: 100, y: 25, }, { name: \'节点2\', x: 100, y: 50, } ], // links: [], links: [{ source: \'节点1\', target: \'节点2\', }] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //单击事件 处理 myChart.on(\'click\', function (params) { if (params.dataType === "node") { } }); //窗口大小改变 关系图重置大小 window.onresize = myChart.resize; </script> </body> </html>
以上是关于echars关系图的主要内容,如果未能解决你的问题,请参考以下文章