如何在高德地图上用SvgMarker绘制柱状图效果？

AMapUI.loadUI(['overlay/SvgMarker'], (SvgMarker) => {
    if (!SvgMarker.supportSvg) {
        alert('当前浏览器不支持SVG');
        return;
    }

    const data = [
        {
            height: 60,
            width: 20,
            fillColor: 'red',
            id: '1',
            position: [121.47567708984376, 31.22694067865231],
            title: "上石化边界卫六路站1"
        },
        {
            height: 80,
            width: 20,
            fillColor: 'green',
            id: '2',
            position: [121.48567708984376, 31.22694067865231],
            title: "上石化边界卫六路站2"
        }
    ];

    data.forEach(item => {
        const svgMarker = new SvgMarker({
            icon: {
                content: `<rect width="${item.width}" height="${item.height}" fill="${item.fillColor}" />`,
                anchor: 'bottom-center' // 锚点设置
            },
            position: item.position,
            zIndex: 100, // 设置图层叠加顺序
            title: item.title // 设置title属性，方便鼠标悬停显示信息
        });
        map.add(svgMarker); // 将SvgMarker添加到地图上

        // 添加点击事件
        svgMarker.on('click', () => {
            alert(`您点击了：${item.title}`);
        });
    });
});