Recently due to work reasons, realized echarts a custom graphics implementation, asked a god to solve this problem, now take over to share with you, hope to receive praise zan 👍 oh, pen core ~

The effect picture is as follows:

var myChart = echarts.init(document.getElementById('main'));
        option = {
            xAxis: {
                type: "category",
                data: ["A"."B"."C"],
            },
            yAxis: {
                type: "value",
                splitLine: {
                    show: false}}, series: [{name:"A".type: "bar",
                barWidth: 40,
                data: [320, 302, 301]
            }, {
                type: 'custom',
                renderItem: function(params, api) { const w1 = 60; // const w2 = 20; // const h = 40; Const bandWidth = api.size([0, 0])[0] const halfBandWidth = bandWidth / 2 const start = api.coord([api.value(0), Value (1)]) const startX = start[0] + halfBandWidth - (w1 + w2) / 2; //start[0] is the middle of each region const startY = start[1] -h / 2return {
                        type: 'group', / / when need multiple custom stitching, need to use group, this case is the joining together of text and graphics children: [{type: 'text', position: [startX, startY],// relative position: [startX, startY],// relative position: [startX, startY],// relative position: [startX, startY],// relative position: [startX, startY],// Relative position: [startX, startY]type: "path",
                                shape: {
                                    pathData: `M${startX} ${startY} L${startX +
                                        w1} ${startY} L${startX + w1 + w2} ${startY +
                                        h / 2} L${startX + w1} ${startY + h} L${startX}${startY + h}Z '// Draw a path with SVG}, style: {fill:"transparent",// Set transparent fill stroke:"# 000"Our lineWidth, / / font black: 1}}}}], data: [[0, 300/2,"50%"], [1, 300/2,"20%"]]}}; myChart.setOption(option,true);
        window.addEventListener("resize".function () {
            myChart.resize();
        });
Copy the code

You can look at the explanation on the official website, and then compare this to do it, it will be better to understand; The arrow part is not easy to draw, it needs to use SVG, at first I thought it was difficult, but after understanding it, I found it was easy. SVG path mainly has the following path, uppercase indicates absolute location, lowercase indicates relative location, here only use M to where L to and Z to end:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
Copy the code

Well, that’s it. Good night