echarts 关系环形图

最新推荐文章于 2025-11-05 15:01:37 发布

原创最新推荐文章于 2025-11-05 15:01:37 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

Echarts 专栏收录该内容

22 篇文章

订阅专栏

该博客展示了如何利用Echarts库来创建一个LesMiserables的环形图，通过加载数据并设置图形属性如节点标签、线样式和动画效果，实现了数据的动态展示。此外，还配置了图例、提示框和标题，使得图表具有良好的交互性和可读性。

下定决心，好好过一天 ~
在这里插入图片描述
数据说明：

每个节点的信息

每个点的连接关系



var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

myChart.showLoading();
$.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) { //处理数据
    myChart.hideLoading();

    graph.nodes.forEach(function (node) { //遍历
        node.label = {
            show: node.symbolSize > 30
        };
    });

    option = {
        title: { //标题
            text: 'Les Miserables',
            subtext: 'Circular layout',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {},
        legend: [{ //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
            data: graph.categories.map(function (a) {
                return a.name;
            })
        }],
        animationDurationUpdate: 1500, //数据更新动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：
        animationEasingUpdate: 'quinticInOut', //数据更新动画的缓动效果。
        series: [
            {
                name: 'Les Miserables',
                type: 'graph', //关系图
                layout: 'circular', //图的布局,采用环形布局,none不采用任何布局，使用节点x，y作为节点位置
                circular: { //环形布局相关配置
                    rotateLabel: true //是否旋转标签，默认不旋转
                },
                data: graph.nodes, //数据信息
                links: graph.links, //链接关系
                categories: graph.categories, //属于的类
                roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                    position: 'right',
                    formatter: '{b}' //{a}：系列名。{b}：数据名。{c}：数据值。
                },
                lineStyle: { //关系边的公用线条样式
                    color: 'source', //设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
                    curveness: 0.3 //边的曲度，支持从 0 到 1 的值，值越大曲度越大。
                }
            }
        ]
    };

    myChart.setOption(option);
});

option && myChart.setOption(option);