plotly-radial-polar-simple

Vue 3 Plotly radial wind PPI polar scatter component.

Install

npm install plotly-radial-polar-simple vue plotly.js-dist-min

Multi-angle data

<script setup>
import VuePlotlyRadialPolarSimple from 'plotly-radial-polar-simple'

const frames = Array.from({ length: 480 }, (_, index) => {
  const angle = index * 360 / 480
  const data = Array.from({ length: 500 }, (_, gate) => {
    return 4 * Math.cos(angle * Math.PI / 180) * Math.min(gate * 0.03 / 2, 1)
  })

  return { angle, data }
})
</script>

<template>
  <VuePlotlyRadialPolarSimple
    :frames="frames"
    :distance-data="[0.03, 0.03, 500]"
    :plot-radius="15"
  />
</template>

Single-angle data

<script setup>
import VuePlotlyRadialPolarSimple from 'plotly-radial-polar-simple'

const singleData = Array.from({ length: 500 }, (_, gate) => {
  return 2.5 * Math.sin(gate * 0.02)
})
</script>

<template>
  <VuePlotlyRadialPolarSimple
    :single-angle="35"
    :single-data="singleData"
    :distance-data="[0.03, 0.03, 500]"
  />
</template>

Props

| Prop | Type | Default | | --- | --- | --- | | frames | Array | [] | | singleAngle | Number | 0 | | singleData | Array | [] | | distanceData | Array | [0.03, 0.03, 500] | | plotRadius | Number | 15 | | vMin | Number | -5 | | vMax | Number | 5 | | colorscale | String | Jet | | markerSize | Number | 3.8 | | opacity | Number | 0.7 | | showColorbar | Boolean | true | | showHover | Boolean | true | | radialTitle | String | 距离 (km) | | valueTitle | String | 径向风 (m/s) | | height | Number | 540 |

Core API

import { buildRadialPolarSimpleData } from 'plotly-radial-polar-simple'

const { data, layout, pointCount } = buildRadialPolarSimpleData(
  { frames },
  { plotRadius: 15, vMin: -5, vMax: 5 }
)