Vue3中ApexCharts PolarArea图表显示异常问题求助

这不是Vue3和PolarArea的兼容问题，是你的配置存在格式错误，以下是具体问题和修复方案：

问题1：Series格式不符合PolarArea要求 #

PolarArea图表的series需要是纯数字数组，而你当前定义的是对象数组（[{name: 'Wind Rose', data: [...]}]），这种格式是柱状图等其他图表的用法，PolarArea不识别这种结构，导致无法渲染数据。

问题2：Props定义与实际使用不匹配 #

你在defineProps里声明的属性是data，但代码中却使用props.windRoseData，这会导致无法正确获取传入的数据，自然无法渲染图表内容。

问题3：重复配置Series和Chart Type #

• 你在options里已经配置了chart.type: 'polarArea'，同时又在模板的<apexchart>标签里传了type="polarArea"，虽然不会报错，但属于冗余配置。
• options和模板中同时配置了series，会导致优先级冲突，且你的模板传的series格式错误，最终导致图表无法读取有效数据。

修正后的代码 #

<script setup lang="ts">
const props = defineProps({
  windRoseData: { // 统一props名称，和使用的变量一致
    type: Array<number>,
    required: true
  }
})

// PolarArea的series直接传数字数组即可
const series = ref(props.windRoseData.map(data => data * 100))

const options = {
  chart: {
    type: 'polarArea'
  },
  stroke: {
    colors: ['#fff']
  },
  fill: {
    opacity: 0.8
  },
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200
      },
      legend: {
        position: 'bottom'
      }
    }
  }]
  // 移除options里的series配置，避免和模板传的series冲突
};
</script>

<template>
  <div id="chart">
    <!-- 移除type属性，因为options里已经配置了chart.type -->
    <apexchart :options="options" :series="series" />
  </div>
</template>

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