apache / apache/echarts

自定义图表的arcTo画的弧线在鼠标hover时会失效

Open
#15,479 4 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version
5.1.2

### Steps to reproduce
```ts
import * as echarts from 'echarts/core';
import { CustomSeriesOption } from 'echarts/charts';

const CylinderBody = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const { x, y, xAxisPoint, itemWidth } = shape;
const c0 = [x itemWidth / 2, y];
const c1 = [x - itemWidth / 2, y];
const c2 = [xAxisPoint[0] - itemWidth / 2, xAxisPoint[1]];
const c3 = [xAxisPoint[0] itemWidth / 2, xAxisPoint[1]];

const arc = [xAxisPoint[0], xAxisPoint[1] itemWidth / 2];

ctx
.moveTo(c0[0], c0[1])!
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.arcTo(arc[0], arc[1], c3[0], c3[1], (itemWidth / 2) * Math.sqrt(2))
// .lineTo(c3[0], c3[1])
.closePath();
},
});
echarts.graphic.registerShape('cylinderBody', CylinderBody);

export default function createCylinderSeries(seriesData: { name?: string; data: number[] }) {
return {
type: 'custom',
name: seriesData.name,
data: seriesData.data,
yAxisIndex: 0,
// silent: true,
renderItem: (_, api) => {
const location = api.coord([api.value(0), api.value(1)]);
const xAxisPoint = api.coord([api.value(0), 0]);

return {
type: 'cylinderBody',
shape: {
x: location[0],
y: location[1],
itemWidth: 20,
xAxisPoint,
},
style: {
fill: 'red',
},
};
},
} as CustomSeriesOption;
}
```
使用:
```ts
const option = {
color: [theme.colors.primary300],
legend: {
...baseChartConfig.legend,
},
grid: {
...baseChartConfig.grid,
},
xAxis: {
type: "category",
data: xAxisData,
...baseChartConfig.xAxis,
},
yAxis: {
name: unit,
...baseChartConfig.yAxis,
},
series: [createCylinderSeries({ name, data })],
};

```
### What is expected?
期望自定义图表可以正常渲染

### What is actually happening?
在鼠标没有hover在柱子上时表现正常,但是鼠标hover上去之后,柱子会变形,看到的表现就是arcTo没有生效

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the provided custom-series example, focusing on the registered cylinderBody shape, its buildPath method, and the arcTo call. Inspect how hover state changes the custom shape or its path, then verify that the arc remains correctly rendered before and after hovering.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.