apache / apache/echarts

[Bug] graph图连线反向

Open
#20,372 1 comment 0 reactions 0 assignees View on GitHub
bug missing-demo waiting-for: author
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

e.g.5.5.1

### Link to Minimal Reproduction

下方示例

### Steps to Reproduce










var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};

var option;

const chartData = {
"data": [
{
"id": "rule-2",
"name": "rule-2",
"value": 2,
"x": 10,
"y": 20,
"itemStyle": {
"color": "#cae7d0"
},
"symbolSize": [
220,
300
],
"tooltip": {
"formatter": "\n 生效开始时间:2024-01-01 00:01:00<br />\n 生效结束时间:2124-01-01 00:01:00<br />\n 调控生效范围camp_scene_id in (371) and _quick_lift_switch in (1)<br />\n 层级分配策略:<div style=\"width: 400px;white-space: pre-wrap;word-wrap: break-word;overflow: auto;\">{}</div>\n 自定义配置:<div style=\"width: 400px;white-space: pre-wrap;word-wrap: break-word;overflow: auto;\"></div>\n "
},
"label": {
"show": true,
"borderWidth": 0,
"color": "black",
"rich": {}
}
},
{
"id": "entity-68745212103",
"name": "entity-68745212103",
"value": "68745212103",
"x": 20,
"y": 20,
"itemStyle": {
"color": "#cae7d0"
},
"symbolSize": [
240,
400
],
"tooltip": {
"formatter": "\n 时间分配策略:{<br />\n 类型:DAILY<br />\n 时长:86400000<br />\n 时间分配策略:FIXED_BUDGET_VALUE<br />\n 时间分配参数:10000000<br />\n 计量方式:<br />\n 计量单位:<br />\n }<br />\n camp_type:200<br />\n camp_model:1001<br />\n camp_scene_id:371<br />\n "
},
"label": {
"show": true,
"borderWidth": 0,
"color": "black",
"rich": {}
}
},
{
"id": "entity-68745212103EXTRABUDGET",
"name": "entity-68745212103EXTRABUDGET",
"value": "68745212103EXTRABUDGET",
"x": 20,
"y": 40,
"itemStyle": {
"color": "#c3dff3"
},
"symbolSize": [
240,
400
],
"tooltip": {
"formatter": "\n 时间分配策略:{<br />\n 类型:DAILY<br />\n 时长:86400000<br />\n 时间分配策略:FIXED_BUDGET_VALUE<br />\n 时间分配参数:3000000<br />\n 计量方式:<br />\n 计量单位:<br />\n }<br />\n camp_type:200<br />\n camp_model:1001<br />\n camp_scene_id:371<br />\n "
},
"label": {
"show": true,
"borderWidth": 0,
"color": "black",
"rich": {}
}
},
{
"id": "detail-68745212103",
"name": "detail-68745212103",
"value": "68745212103",
"x": 30,
"y": 20,
"itemStyle": {
"color": "#cae7d0"
},
"symbolSize": [
240,
500
],
"tooltip": {
"formatter": "\n 时间分配策略:{<br />\n 类型:DAILY<br />\n 时长:86400000<br />\n 时间分配策略:FIXED_BUDGET_VALUE<br />\n 时间分配参数:10000000<br />\n 计量方式:<br />\n 计量单位:<br />\n }<br />\n camp_type:200<br />\n camp_model:1001<br />\n camp_scene_id:371<br />\n "
},
"label": {
"show": true,
"borderWidth": 0,
"color": "black",
"rich": {}
}
},
{
"id": "detail-68745212103EXTRABUDGET",
"name": "detail-68745212103EXTRABUDGET",
"value": "68745212103EXTRABUDGET",
"x": 30,
"y": 40,
"itemStyle": {
"color": "#c3dff3"
},
"symbolSize": [
240,
500
],
"tooltip": {
"formatter": "\n 时间分配策略:{<br />\n 类型:DAILY<br />\n 时长:86400000<br />\n 时间分配策略:FIXED_BUDGET_VALUE<br />\n 时间分配参数:3000000<br />\n 计量方式:<br />\n 计量单位:<br />\n }<br />\n camp_type:200<br />\n camp_model:1001<br />\n camp_scene_id:371<br />\n "
},
"label": {
"show": true,
"borderWidth": 0,
"color": "black",
"rich": {}
}
}
],
"link": [
{
"source": "rule-2",
"target": "entity-68745212103EXTRABUDGET"
},
{
"source": "entity-68745212103",
"target": "entity-68745212103EXTRABUDGET"
},
{
"source": "entity-68745212103",
"target": "detail-68745212103",
},
{
"source": "entity-68745212103EXTRABUDGET",
"target": "detail-68745212103EXTRABUDGET"
}
],
"yAxis": [
"第二层预算分配",
"第一层预算分配"
]
}

option = {
animation: false,
tooltip: {
show: true,
},
grid: {
left: 100,
right: 0,
top: 30,
bottom: 30,
},
xAxis: {
show: false,
type: 'category',
},
yAxis: {
type: 'category',
data: chartData.yAxis,
splitLine: {
show: true
}
},
series: [
{
type: 'graph',
symbol: 'rect',
// coordinateSystem: 'cartesian2d',
left: 300,
top: 150,
bottom: 130,
right: 200,
layout: 'none',
edgeSymbol: ['arrow'],
itemStyle: {
},
data: chartData.data,
links: chartData.link,
lineStyle: {
width: 1.5,
opacity: 1,
color: 'grey',
},
},
],
};

if (option && typeof option === 'object') {
myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

### Current Behavior

连线有的正向,有的反向

### Expected Behavior

连线节点正向

### Environment

```markdown
- OS:
- Browser: google
- Framework: none
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.