使用jQuery $.getJSON加载远程JSON数据渲染ApexCharts树形图的问题

• 结构嵌套错误：调用updateSeries时额外包裹了一层对象，把接口返回的完整series数组塞到了data字段中，而接口返回的response本身就是符合ApexCharts要求的series格式数组，不需要额外嵌套。
• 可选优化点：接口返回的y值为字符串类型，建议转换为数字类型，避免部分场景下的数值计算异常。

<!-- 需确保页面提前引入jQuery和ApexCharts依赖 -->
<div id="chart"></div>

<script>
var options = {
  series: [],
  chart: {
    height: 350,
    type: 'treemap',
    toolbar: {
      show: false
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

var url = 'https://run.mocky.io/v3/f6951d2e-a85d-4409-b9d8-f21767af74cf';

$.getJSON(url, function(response) {
  // 可选格式化步骤：把y值从字符串转为数字，保证渲染兼容性
  const formattedSeries = response.map(seriesItem => {
    seriesItem.data = seriesItem.data.map(item => {
      item.y = parseFloat(item.y);
      return item;
    });
    return seriesItem;
  });
  // 直接传入符合格式的series数组即可
  chart.updateSeries(formattedSeries);
  
  // 若确认接口返回的y值永远为合法数值，也可以省略格式化步骤，直接写：
  // chart.updateSeries(response);
});
</script>

内容的提问来源于stack exchange，提问作者Diogo Wernik