Echarts关系图的例子

最新推荐文章于 2025-04-18 17:22:49 发布

winifred_嘘

最新推荐文章于 2025-04-18 17:22:49 发布

阅读量1.7k

点赞数 2

分类专栏： echarts 文章标签： echarts 知识图谱

本文链接：https://blog.youkuaiyun.com/weixin_42519875/article/details/115176947

版权

本文介绍了如何使用Echarts创建关系图，包括普通关系图和特殊关系图。在特殊关系图中，由于name可能存在重复，所以使用labelName确保唯一性，并通过formatter函数处理显示标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、普通关系图

option = {
    title: {
        text: '数据图谱'
    },
    tooltip: {
         trigger: 'item',
        formatter: '{a} : {b}'// 如果用索引关联关系，悬浮窗会写索引。
    },
    legend : { //=========圖表控件
        show : true,
        data : [ 
        {
            name : '数据项',
            icon : 'circle'
        }, {
            name : '目录',
            
            icon : 'roundRect'
        } ]
    },
    series : [
        {
            name : "数据关系",
            radius: '70%',
            itemStyle : {
                normal : {
                    label : {
                        fontSize:14,
                        // color:'yellow'
                    }
                }
            },
            type: 'graph',
            layout: 'force',//图表类型
             force: {
                    repulsion: 700
                },
            symbolSize: 15,
            roam: true,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            lineStyle: {
                normal: {//指向线
                    opacity: 0.9,
                    width: 1,
                    color:'#333333'
                }

最低0.47元/天解锁文章