雷达图

基本使用

暂无数据

<template>
    <care-radar
        :data="chartData"
        :settings="chartSettings"
        :log="true">
    </care-radar>
</template>

<script>
export default {
    data() {
        this.chartSettings = {
            metrics: ['日期', '衣', '食', '住', '行']
        };
        return {
            chartData: [
                { '日期': '2016', '衣': 720, '食': 320, '住': 150, '行': 220 },
                { '日期': '2017', '衣': 732, '食': 332, '住': 232, '行': 182 },
                { '日期': '2018', '衣': 701, '食': 301, '住': 201, '行': 191 },
                { '日期': '2019', '衣': 734, '食': 334, '住': 154, '行': 234 },
                { '日期': '2020', '衣': 690, '食': 390, '住': 190, '行': 290 },
            ]
        }
    }
}
</script>

显示代码 复制代码 复制代码

设置维度、图例

暂无数据

<template>
    <care-radar 
        :data="chartData" 
        :settings="chartSettings"
        :raw-option="chartRawOption">
    </care-radar>
</template>

<script>
export default {
    data() {
        this.chartSettings = {
            dimension: ['日期'],
            metrics: ['衣', '食', '住', '行']
        };
        return {
            chartRawOption: {
                legend: {
                    dataMap: '日期'
                }
            },
            chartData: [
                { '日期': '2016', '衣': 720, '食': 320, '住': 150, '行': 220 },
                { '日期': '2017', '衣': 732, '食': 332, '住': 232, '行': 182 },
                { '日期': '2018', '衣': 701, '食': 301, '住': 201, '行': 191 },
                { '日期': '2019', '衣': 734, '食': 334, '住': 154, '行': 234 },
                { '日期': '2020', '衣': 690, '食': 390, '住': 190, '行': 290 },
            ]
        }
    }
}
</script>

显示代码 复制代码 复制代码