我正在尝试在我的 React 项目的 Highchart 极坐标图中的 2 系列的相交区域应用渐变颜色。这是我的 JSFiddle 链接：https ://jsfiddle.net/pgkk/s29d51zt/604/

期望是：

1. 标记内的区域应与每个标记的颜色相同。
2. 具有彩色系列的轮廓，在末端略微弯曲，如附件中的“样条/区域样条”。你能帮我一下吗，先谢谢了。

  "credits": {
    "enabled": false
  },
  "chart": {
    "polar": true,
    "height": 190,
    "width": 290,
    "marginBottom": -25,
    "style": {
      "fontWeight": 400,
      "fontSize": 11,
      "letterSpacing": "-0.06px",
      "lineHeight": "16px"
    }
  },
  "tooltip": {
    "enabled": false
  },
  "title": {
    "text": ""
  },
  "xAxis": {
    "min": 0,
    "categories": [
      "Category1",
      "Category2",
      "Category3"
    ],
    "tickmarkPlacement": "on",
    "lineWidth": 0,
    "labels": {
      "useHTML": true,
      "align": "center",
      "style": {
        "whiteSpace": "nowrap",
        "color": "#26415e",
        "fontSize": "12px"
      }
    }
  },
  "yAxis": {
    "gridLineInterpolation": "polygon",
    "min": 0,
    "max": 100,
    "showFirstLabel": false,
    "showLastLabel": true,
    "tickInterval": 25,
    "labels": {
      "align": "center",
      "y": 5,
      "x": 0,
      "style": {
        "color": "#333333",
        "fontSize": "10px"
      }
    }
  },
  "plotOptions": {
    "series": {
      "marker": {
        "radius": 2.5
      },
      "states": {
        "hover": {
          "enabled": false
        },
        "inactive": {
          "opacity": 1
        }
      }
    },
    "area": {
      "color": {
        "radialGradient": {
          "cx": 0.45,
          "cy": 0.5,
          "r": 1
        },
        "stops": [
          [
            0,
            "#DFA124"
          ],
          [
            0.25,
            "#AF9D3F"
          ],
          [
            0.5,
            "#5A9772"
          ],
          [
            1,
            "#229595"
          ]
        ]
      },
      "dataLabels": {
        "enabled": false
      },
    }
  },
  "series": [{
      "showInLegend": false,
      "data": [{
          "y": 100,
          "color": "#dce1e6"
        },
        {
          "y": 100,
          "color": "#dce1e6"
        },
        {
          "y": 100,
          "color": "#dce1e6"
        }
      ],
      "color": "transparent",
      "pointPlacement": "on",
      "marker": {
        "symbol": "circle"
      }
    },
    {
      "showInLegend": false,
      "data": [{
          "y": 36,
          "color": "#AF9D3F"
        },
        {
          "y": 64,
          "color": "#229595"
        },
        {
          "y": 33,
          "color": "#AF9D3F"
        }
      ],
      "pointPlacement": "on",
      "type": "area"
    }
  ]
});