Echart 关系图使用

最新推荐文章于 2026-04-11 07:54:57 发布

原创最新推荐文章于 2026-04-11 07:54:57 发布 · 6.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Echart

EChart 专栏收录该内容

15 篇文章

订阅专栏

本文档介绍了如何使用Echarts库创建关系图。首先，你需要下载必要的资源文件，如dataTool.min.js和les-miserables.gexf。接着进行编程实现，详细步骤和代码将在Coding章节中阐述。

下载资源文件

Coding

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src='echarts.js'></script>
    <script src='dataTool.min.js'></script>
    <script src='../jquery-1.12.4.min.js'></script>
</head>
<body>
<div id='main' style='width: 600px;height:400px;'></div>
<script type='text/javascript'>
    var myChart = echarts.init(document.getElementById('main'));
    myChart.showLoading();
    $.get('les-miserables.gexf', function (xml) {
        myChart.hideLoading();
        var graph = echarts.dataTool.gexf.parse(xml);
        var categories = [];
        for (var i = 0; i < 9; i++) {
            categories[i] = {
                name: '类目' + i
            };
        }
        graph.nodes.forEach(function (node) {
            node.itemStyle = null;
            node.value = node.symbolSize;
            node.symbolSize /= 1.5;
            node.label = {
                normal: {
                    show: node.symbolSize > 30
                }
            };
            node.category = node.attributes.modularity_class;
        });
        option = {
            title: {
                text: 'Les Miserables',
                subtext: 'Default layout',
                top: 'bottom',
                left: 'right'
            },
            tooltip: {},
            legend: [{
                // selectedMode: 'single',
                data: categories.map(function (a) {
                    return a.name;
                })
            }],
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series : [
                {
                    name: 'Les Miserables',
                    type: 'graph',
                    layout: 'none',
                    circular: {
                        rotateLabel: true
                    },
                    data: graph.nodes,
                    links: graph.links,
                    categories: categories,
                    roam: true,
                    label: {
                        normal: {
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: 'source',
                            curveness: 0.3
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }, 'xml');
</script>
</body>
</html>