echarts - 无论节点值如何，强制 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>

这是相应的 fiddle。

标签： echarts