Version
5.4.2
Link to Minimal Reproduction
https://codesandbox.io/s/echarts-pie-gauge-forked-wnk4dj?file=/src/App.js
Steps to Reproduce
- 使用 react ref 创建 echarts 示例
const chart = echarts.init(this.chartRef.current); - 定义 option
const option = { title: { text: "Basic Graph" }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: "quinticInOut", series: [ { type: "graph", layout: "none", symbolSize: 50, zoom: 1, roam: false, label: { show: true }, edgeSymbol: ["circle", "arrow"], edgeSymbolSize: [4, 10], edgeLabel: { fontSize: 20 }, data: [ { name: "Node 1", x: 100, y: 300 }, { name: "Node 2", x: 300, y: 300 }, { name: "Node 3", x: 200, y: 300 } ], // links: [], links: [ { source: "Node 1", target: "Node 3" }, { source: "Node 2", target: "Node 3" }, { source: "Node 2", target: "Node 4" } ], lineStyle: { opacity: 0.9, width: 2, curveness: 0 } } ] }; - setOption
chart.setOption(option);
Current Behavior
图的宽度是 854，节点的最大 x 是 300。可以明显的发现，节点的位置并不是设置的 x，y 的值
Expected Behavior
节点位置是定义的 x，y
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response
7条答案
按热度按时间laximzn51#
@Hugo-seth It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED
TITLE
[Bug] data position (x, y) of type graph not work. (Relationship graph node coordinates do not take effect)
jqjz2hbq2#
This is not a bug. Please note that the values of
xandyare not in pixels but are only relative to other values of the data.avwztpqn3#
This is not a bug. Please note that the values of
xandyare not in pixels but are only relative to other values of the data.How to set the minimum distance between nodes,The effect of the picture below is not what I want。（那要怎么设置节点最小距离，下图的效果不是我想要的，几乎重叠在一起了）
4si2a6ki4#
这是因为关系图的静态布局有一个策略：尽量使图的外包围盒平铺画布。这就是为什么你的坐标设置了最大300，但还是被拉伸的原因。如果你想用固定值绘制图形，你可以考虑用【自定义系列】。或者利用echarts的扩展极值，扩展一个没有该策略的静态布局。如果没有特殊的交互的话，你甚至可以使用Graphic绘制
wj8zmpe15#
这是因为关系图的静态布局有一个策略：尽量使图的外包围盒平铺画布。这就是为什么你的坐标设置了最大300，但还是被拉伸的原因。如果你想用固定值绘制图形，你可以考虑用【自定义系列】。或者利用echarts的扩展极值，扩展一个没有该策略的静态布局。如果没有特殊的交互的话，你甚至可以使用Graphic绘制
@li942475402 想请问下怎么利用echarts的扩展极值，扩展一个没有该策略的静态布局，是哪个 API呢？我去看下。【自定义系列】又是哪个API，麻烦能给下链接？
7xzttuei6#
if you want to fix point(x,y), you could think of using [ coordinateSystem: 'cartesian2d']; then setting Yaxis.max and Xaxis.max matches the height and width of the original image; Maybe your inital point is the top left corner, you can set Yaxis.inverse is true
7rtdyuoh7#
if you want to fix point(x,y), you could think of using [ coordinateSystem: 'cartesian2d']; then setting Yaxis.max and Xaxis.max matches the height and width of the original image; Maybe your inital point is the top left corner, you can set Yaxis.inverse is true
You slove this problem! And the position of node in coordinate system depends on the option value of node. Here is the example