1.0.2 • Published 1 month ago

@tanzhenxing/zx-charts-radar v1.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
1 month ago

zx-charts-radar 雷达图组件

组件简介

zx-charts-radar 是基于 Vue3 + + uni-app 实现的高性能多端雷达图表组件,支持 H5、微信/支付宝/百度/字节小程序、App 等平台。无需依赖浏览器专属 API,适合多维数据可视化场景。

属性(Props)

属性名类型默认值说明
legendObject{show: true, size: 24, color: '#333'}图例配置
tooltipBooleantrue是否显示 tooltip 提示
widthNumber/String480雷达图宽度(rpx)
splitNumberNumber/String5分割圈数
indicatorArray[]维度配置,见下方数据格式
labelObject{show: true, color: '#bbb', size: 24}维度标签配置
axisLineColorString'#ddd'轴线颜色
splitLineColorString'#eee'分割线颜色
lineBoldBooleanfalse是否加粗线条

draw 方法数据格式

通过 draw(dataset) 方法传入,格式如下:

[
  {
    name: 'A类用户',
    color: '#3b82f6',
    source: [80, 90, 70, 60, 85]
  },
  {
    name: 'B类用户',
    color: '#f59e42',
    source: [60, 70, 80, 90, 60]
  }
]

indicator 维度格式

[
  { name: '活跃度', max: 100 },
  { name: '消费力', max: 100 },
  { name: '忠诚度', max: 100 },
  { name: '传播力', max: 100 },
  { name: '成长性', max: 100 }
]

事件

事件名说明回调参数
click点击某一数据系列时触发{ datasetIndex }

方法

方法名说明参数
draw绘制/更新图表(dataset)

基本用法示例

详见下方示例或 src/pages/components/charts/radar.vue

<template>
  <view class="demo-radar">
    <zx-charts-radar
      ref="radarRef"
      :legend="{ show: true, size: 24, color: '#333' }"
      :tooltip="true"
      :width="500"
      :splitNumber="5"
      :indicator="indicator"
      :label="{ show: true, color: '#bbb', size: 24 }"
      :axisLineColor="'#ddd'"
      :splitLineColor="'#eee'"
      :lineBold="false"
      @click="onRadarClick"
    />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import zxChartsRadar from '@/components/zx-charts-radar/zx-charts-radar.vue';

const radarRef = ref();
const indicator = [
  { name: '活跃度', max: 100 },
  { name: '消费力', max: 100 },
  { name: '忠诚度', max: 100 },
  { name: '传播力', max: 100 },
  { name: '成长性', max: 100 }
];
const dataset = [
  {
    name: 'A类用户',
    color: '#3b82f6',
    source: [80, 90, 70, 60, 85]
  },
  {
    name: 'B类用户',
    color: '#f59e42',
    source: [60, 70, 80, 90, 60]
  }
];

function onRadarClick(e) {
  uni.showToast({ title: `点击:${e.datasetIndex !== undefined ? dataset[e.datasetIndex].name : ''}` });
}

onMounted(() => {
  radarRef.value.draw(dataset);
});
</script>

注意事项

  • 组件为多端兼容实现,不依赖 window/document。
  • 建议在页面 onReady 或 onMounted 后调用 draw 方法。
  • indicator 数组需与 dataset.source 数组长度一致。
  • 支持自定义颜色、图例、tooltip、线条样式等。
1.0.2

1 month ago

1.0.1

2 months ago