echarts 关系图

最新推荐文章于 2024-05-14 15:01:22 发布

fk129

最新推荐文章于 2024-05-14 15:01:22 发布

阅读量1.3k

点赞数 5

分类专栏： echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_36061522/article/details/107352555

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

先放一张效果图
在这里插入图片描述
下面呈现代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="relationChart" style="width: 800px;height:800px;"></div>
    <script type="text/javascript">
        // 基于准备好的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){
            
        })

    </script>
  </body>
</html>

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

fk129

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
5
评论
echarts 关系图

先放一张效果图// 基于准备好的dom，初始化echarts实例myChart = echarts.init(document.getElementById('relationChart'));// 数据格式let data = { nodes: [{ name: '王大妈', category: 0 }, { name: '王二麻子', category: 1 }, {
复制链接

扫一扫