强制echarts的强制导向图形布局无论节点值如何都保持不变

Question

我需要在图表上对不同的值进行颜色编码。问题是，一旦我改变节点值，图形的布局就会改变，这很不方便。

我尝试使用圆形布局初始化以及设置节点的实际初始位置，但这两种解决方案都失败了。

<script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js'></script>
<div id='main' style='width: 100vh;;height:100vh;'></div>
<script type='text/javascript'>
document.addEventListener('contextmenu', event => event.preventDefault());
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
graph = {
    'nodes': [{
        'name': 'node1',
        'value': 183
    }, {
        'name': 'node2',
        'value': 500
    }, {
        'name': 'node3',
        'value': 139
    }, {
        'name': 'node4',
        'value': 10
    }],
    'links': [{
        'source': 'node1',
        'target': 'node2'
    }, {
        'source': 'node2',
        'target': 'node3'
    }, {
        'source': 'node3',
        'target': 'node1'
    }, {
        'source': 'node1',
        'target': 'node4'
    }]
};
var max_value = Math.max.apply(Math, graph.nodes.map(function(o) {
    return o.value;
}));
var min_value = Math.min.apply(Math, graph.nodes.map(function(o) {
    return o.value;
}));
myChart.hideLoading();
myChart.setOption(option = {
    visualMap: {
        min: min_value,
        max: max_value,
        precision: 2,
        calculable: true,
        realtime: true,
        orient: 'horizontal',
        left: 'center',
        top: 'top',
        color: ['#800026', '#ffffcc']
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [{
        type: 'graph',
        layout: 'force',
        force: {
            initLayout: 'circular'
        },
        symbolSize: 10,
        roam: true,
        zoom: 3,
        label: {
            show: false
        },
        emphasis: {
            focus: 'adjacency',
            label: {
                show: false
            }
        },
        edgeSymbol: ['circle'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
            fontSize: 20
        },
        data: graph['nodes'],
        links: graph['links'],
        lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0
        }
    }]
});
</script>

这是对应的小提琴。

Answer 1

我知道这已经很旧了，但是在谷歌搜索这个问题时偶然发现了这里。 @Ch'nycos 提到的方法实际上在这里有效：

可以使用“完成”事件将位置转换为静态坐标。基本方法（我们在 Vue-Echarts 设置中使用 this，因此所有“this”引用都引用 Vue 组件数据）：

on_finished: function() {
    // getting the coordinate data from the rendered graph:
    const model = this.chart.getModel()
    const series = model.getSeriesByIndex(0);
    const nodeData = series.getData();
    
    // set the active layout to 'none' to avoid force updating:
    this.active_layout = 'none'
    
    // loop over node data to set the coordinates to the fixed node Data
    this.graph_data.nodes.forEach((node, nodenum) => {
      [node.x, node.y] = nodeData.getItemLayout(nodenum)
    })
}