更新记录

1.0.3（2023-12-15） 下载此版本

删除无用的文件，添加 极简主题

1.0.2（2023-12-15） 下载此版本

支持自定义顶点个数，不支持手动指定顶点位置，只能通过计算得出

1.0.1（2023-12-15） 下载此版本

支持自定义顶点个数，不支持，手动支持顶点位置，只能通过计算得出

平台兼容性

uni-app

cj-polygonal

在实际使用中，宽高可能需要手动计算后指定（重点）

示例代码

<template>
    <view class="content">
        <view>
            <cj-polygonal :data="data" :width="width" :height="height" :title="title" :theme="theme"></cj-polygonal>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                theme: "default",
                width: 300,
                height: 400,
                title: "个人能力属性图",
                data: [{
                    label: "力量",
                    value: 100,
                    //显示值
                    displayValue: "85KG"
                }, {
                    label: "天赋",
                    value: 84,
                    displayValue: "56点",
                }, {
                    label: "智力",
                    value: 66,
                    displayValue: "66点",
                }, {
                    label: "敏捷",
                    value: 49,
                    displayValue: '36点',
                }, {
                    label: "坚毅",
                    value: 33,
                    displayValue: '50点',
                }, {
                    label: "防御",
                    value: 16.66,
                    displayValue: '优秀',
                }]
            }
        },
        onLoad() {
            let arr = ["bright", "default", "dark", "minimalist"]
            setInterval(() => {
                for (var i = 0; i < this.data.length; i++) {
                    this.data[i].value = Math.floor(Math.random() * 100)
                    this.data[i].displayValue = this.data[i].value + "点"
                }
                this.theme = arr[Math.floor(Math.random() * 4)]
            }, 1000)
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>