1. 程式人生 > >echars關系圖

echars關系圖

style 連接 boot true echarts html otc blog nim

技術分享

<!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關系圖