Echarts+Vue结合贝塞尔曲线实现特殊形状柱状图

getEcharts() {
            let myChart = echarts.init(this.$refs.custom_charts);
            myChart.setOption({
                //调整图标位置
                grid: {
                    left: "4%",
                    right: "3%",
                    bottom: "0%",
                    top: '18%',
                    containLabel: true,
                },
                legend: {
                    data: ['pictorialBar', 'bar']
                },
                //x坐标轴
                xAxis: {
                    data: ['一季度', '二季度', '三季度', '四季度'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#daf4e6',
                            fontSize: 10
                        }
                    },
                },
                //y坐标轴
                yAxis: {
                    type: 'value',
                    name: '次',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#a1cace',
                            width: 1,
                            cap: 'round'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#a1cace77'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#daf4e6',
                            fontSize: 10
                        }
                    },
                },
                animationEasing: 'elasticOut',
                series: [
                    {
                        type: 'custom',
                        renderItem: function (params, api) {
                            var pointTop = api.coord([api.value(0), api.value(1)]);
                            var pointRight = api.coord([api.value(0) + 0.5, 0]);
                            var pointLeft = api.coord([api.value(0) - 0.3, 0]);
                            // 贝塞尔曲线
                            function bezierCurve(t, P0, P1, P2, P3) {
                                // 计算曲线上的点
                                var x = Math.pow(1 - t, 3) * P0.x + 3 * Math.pow(1 - t, 2) * t * P1.x + 3 * (1 - t) * Math.pow(t, 2) * P2.x + Math.pow(t, 3) * P3.x;
                                var y = Math.pow(1 - t, 3) * P0.y + 3 * Math.pow(1 - t, 2) * t * P1.y + 3 * (1 - t) * Math.pow(t, 2) * P2.y + Math.pow(t, 3) * P3.y;
                                return [x, y];
                            }

                            // 使用示例,这里可以调节参数来实现不同样式的形状
                            var P0 = { x: pointTop[0], y: pointTop[1] };   // 起点
                            var P1 = { x: pointTop[0] - 10, y: pointLeft[1] * 0.8 }; // 第一个控制点
                            var P2 = { x: pointTop[0] - 10, y: pointLeft[1] * 0.8 }; // 第二个控制点
                            var P3 = { x: pointLeft[0] - 50, y: pointRight[1] };  // 终点

                            var P01 = { x: pointTop[0], y: pointTop[1] };   // 起点
                            var P11 = { x: pointTop[0] + 10, y: pointLeft[1] * 0.8 }; // 第一个控制点
                            var P21 = { x: pointTop[0] + 10, y: pointLeft[1] * 0.8 }; // 第二个控制点
                            var P31 = { x: pointRight[0] - 40, y: pointRight[1] };  // 终点

                            // 创建数组来存储曲线上的点
                            var points = [];
                            var points1 = [];
                            //循环遍历生成点
                            for (var i = 0; i <= 100; i++) {
                                var t = i / 100;
                                var point = bezierCurve(t, P0, P1, P2, P3);
                                points1.push(bezierCurve(t, P01, P11, P21, P31))
                                points.push(point);
                            }
                            points1 = points1.reverse();
                            return {
                                type: 'polygon',
                                shape: {
                                    points: [
                                        [pointTop[0], pointTop[1]],
                                        ...points,
                                        [pointLeft[0], pointLeft[1]],
                                        [pointRight[0], pointRight[1]],
                                        ...points1,
                                    ]
                                },
                                transition: 'shape',
                                style: {
                                    "fill": {
                                        type: 'linear',
                                        // x=0,y=1,柱子的颜色在垂直方向渐变
                                        x: 1,
                                        y: 1,
                                        colorStops: [
                                            // 0%处的颜色
                                            {
                                                offset: 0,
                                                color: api.value(0) % 2 == 0 ? '#f8989800' : '#dae31200',
                                            },
                                            // 50%处的颜色
                                            {
                                                offset: 0.5,
                                                color: api.value(0) % 2 == 0 ? '#f89898' : '#dae312',
                                            },
                                            // 100%处的颜色
                                            {
                                                offset: 1,
                                                color: api.value(0) % 2 == 0 ? '#f89898' : '#dae312',
                                            },
                                        ],
                                        global: false // 缺省为 false
                                    },
                                    "textPosition": "inside",
                                    "textDistance": 5,
                                    "fontStyle": "normal",
                                    "fontWeight": "normal",
                                    "fontSize": 12,
                                    "fontFamily": "Microsoft YaHei",
                                    "textFill": "#fff",
                                    "textStroke": "#5470c6",
                                    "textStrokeWidth": 2,
                                    "text": null,
                                    "legacy": true
                                }

                            };
                        },
                        // 数据
                        data: [4000, 3000, 4000, 3500],
                        label: {
                            normal: {
                                show: true,
                                formatter: params => {
                                    console.log(params);

                                    return 1//可以设置两个数相加的合
                                },
                                textStyle: {
                                    fontSize: 16,
                                    color: '#fff',
                                    fontWeight: 'bold'
                                },
                                position: 'inside' // 标签位置，可以是 'inside', 'top', 'left', 'right', 'bottom', 或者一个数组指定位置
                            }
                        },
                    },
                    // 这里是为了在图表上显示出数据,如果不需要可以不写
                    {
                        type: 'bar',
                        data: [4000, 3000, 4000, 3500],
                        label: {
                            normal: {
                                show: true,
                                formatter: params => {
                                    console.log(params);

                                    return params.data//可以设置两个数相加的合
                                },
                                textStyle: {
                                    fontSize: 16,
                                    color: '#fff',
                                    fontWeight: 'normal'
                                },
                                position: 'top' // 标签位置，可以是 'inside', 'top', 'left', 'right', 'bottom', 或者一个数组指定位置
                            }
                        },
                        itemStyle: {
                            color: "#00000000"
                        }
                    }
                ]
            });
}