radial-polar-chart

甲烷光量子雷达径向风极地图 Vue 组件。基于 Plotly 绘制，内置色标卡、距离裁剪、缺失角度填充。

安装

npm install radial-polar-chart vue plotly.js-dist-min lucide-vue-next

基本用法

<script setup>
import RadialPolarChart from 'radial-polar-chart'
import { ref } from 'vue'

const frames = ref([])
</script>

<template>
  <RadialPolarChart
    :frames="frames"
    :v-min="0"
    :v-max="15845"
    :display-distance="15"
    :show-distance="true"
    :fill-enabled="false"
    :fill-multiple="2"
    side="right"
  />
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | frames | Array | [] | 外部绑定的数据帧集合 | | vMin | Number | 数据最小值 | 色标最小值 | | vMax | Number | 数据最大值 | 色标最大值 | | side | String | 'right' | 色标位置，可选 'left' / 'right' | | unit | String | '' | 色标单位 | | showDistance | Boolean | true | 是否显示距离轴、距离刻度 | | fillEnabled | Boolean | false | 是否启用缺失角度 NaN 填充 | | fillMultiple | Number | 2 | 角度差超过多少倍中位数时填充 | | displayDistance | Number | 15 | 图谱显示的最大距离，超过部分裁剪 |

数据帧格式

{
  angle: 12.5,
  distanceData: [0.03, 0.03, 500],
  data: [1.1, 0.8, NaN, ...],
  dataTime: new Date()
}

外部修改数据示例

组件本身不维护业务数据，外部修改 frames 后自动重绘：

// 添加一帧
frames.value = [...frames.value, newFrame]

// 添加一个周期
frames.value = generateFakeFrames()

// 清空
frames.value = []

填充说明

• fillEnabled = false：不做缺失填充。
• fillEnabled = true：
  • 单条添加时，只判断新增帧与上一条帧之间的角度差。
  • 周期添加时，对全量数据执行一次填充。
  • 当角度差大于 fillMultiple × 中位数 时，插入 data 全为 NaN 的径向帧。

样式

组件需要引入样式文件：

import 'radial-polar-chart/style.css'