自定义绘图采用两条Y坐标四个点均相同，曲率不同的贝塞尔曲线并闭合，hover区域存在bug

[userxiong]

zrender/src/graphic/Path.ts

Line 418 in 9377dd2

return pathContain.contain(pathProxy, x, y);

以下是demo：

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById('container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var MyShape = echarts.graphic.extendShape({ shape: { cpx1: 242, cpx2: 121, cpy1: 390, cpy2: 390, extent: 56.66666666666667, orient: "vertical", x1: 242, x2: 121, y1: 380, y2: 380 }, buildPath: function (ctx, shape) { ctx.moveTo(shape.x1, shape.y1); ctx.bezierCurveTo( shape.cpx1, shape.cpy1 + (shape.x1 > shape.x2 ? 0 : shape.dvDirection == 'top' ? -10 : 10), shape.cpx2 + shape.extent, shape.cpy2 + (shape.x1 > shape.x2 ? 0 : shape.dvDirection == 'top' ? -10 : 10), shape.x2 + shape.extent, shape.y2 ); ctx.lineTo(shape.x2, shape.y2); } }); echarts.graphic.registerShape('myCustomShape', MyShape); var options = { series: { type: 'custom', coordinateSystem: 'none', renderItem: function (params, api) { const random = Math.random() return random > 0.5 ? { type: 'myCustomShape', shape: { cpx1: 242, cpx2: 121, cpy1: 390, cpy2: 390, extent: 56.66666666666667, orient: "vertical", x1: 242, x2: 121, y1: 380, y2: 380 }, style: { fill: 'red' } } : { type: 'rect', x: 100, y: 100, shape: { width: 200, height: 200 } }; }, data: [10, 20, 30, 40], emphasis: { itemStyle: { color: 'blue' } } } }; myChart.setOption(options) window.addEventListener('resize', myChart.resize); </script>