雷达图

---

效果

使用方法

<template>
    <div>
       <lt-canvas ref="canvas" :width="750" :height="500"></lt-canvas>       
    </div>
</template>
<script>
    import LightChart from 'light-chart';
    export default {
        components:{
            ltCanvas:require("light-chart/canvas")
        },
        data(){
            return {}
        },
        mounted(){
            const data = [
                { item: 'Design', user: '用户 A', score: 70 },
                { item: 'Design', user: '用户 B', score: 30 },
                { item: 'Development', user: '用户 A', score: 60 },
                { item: 'Development', user: '用户 B', score: 70 },
                { item: 'Marketing', user: '用户 A', score: 50 },
                { item: 'Marketing', user: '用户 B', score: 60 },
                { item: 'Users', user: '用户 A', score: 40 },
                { item: 'Users', user: '用户 B', score: 50 },
                { item: 'Test', user: '用户 A', score: 60 },
                { item: 'Test', user: '用户 B', score: 70 },
                { item: 'Language', user: '用户 A', score: 70 },
                { item: 'Language', user: '用户 B', score: 50 },
                { item: 'Technology', user: '用户 A', score: 70 },
                { item: 'Technology', user: '用户 B', score: 40 },
                { item: 'Support', user: '用户 A', score: 60 },
                { item: 'Support', user: '用户 B', score: 40 }
            ];
            let chart = new LightChart.Chart({
                ltCanvas:this.$refs.canvas
            });

            chart.coord('polar');
            chart.source(data, {
                score: {
                    min: 0,
                    max: 120,
                    nice: false,
                    tickCount: 4
                }
            });
            
            chart.axis('score', {
                label(text, index, total) {
                    if (index === total - 1) {
                        return null;
                    }
                    return {
                        top: true
                    };
                },
                grid: {
                    lineDash: null,
                    type: 'arc'
                }
            });
            chart.axis('item', {
                line: {
                    lineWidth: 1,
                    stroke: '#e8e8e8'
                }
            });
            chart.line().position('item*score').color('user');
            chart.point().position('item*score').color('user').style({
                stroke: '#fff',
                lineWidth: 1
            });
            chart.render();
        }
    }
</script>
<style scoped>

</style>