自定义图表的arcTo画的弧线在鼠标hover时会失效
- 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
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