echars关系图

最新推荐文章于 2023-11-05 21:50:54 发布

weixin_30716725

最新推荐文章于 2023-11-05 21:50:54 发布

阅读量139

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tangchun/p/7778078.html

版权

<!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>

转载于:https://www.cnblogs.com/tangchun/p/7778078.html

weixin_30716725

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echars关系图

<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> <title>echars关系图</title> ...
复制链接

扫一扫