基于echarts对雷达图的封装

矫情吗；* 2022-12-24 02:58 170阅读 0赞

## 核心库 ##

*  echarts
 *  lodash
 *  ResizeListener

## 代码 ##

<template>
        <div class="charts" ref="charts"></div>
    </template>
    
    <script>
    import echarts from 'echarts';
    import {  merge } from 'lodash';
    import ResizeListener from 'element-resize-detector';
    
    export default { 
        name: 'ChartBar',
        props: { 
            extraOption: {  // 其他配置项
                type: Object,
                default: () => ({ })
            }
        },
        watch: { 
            extraOption: { 
                immediate: true,
                deep: true,
                handler () { 
                    this.updateChartView();
                }
            },
        },
        data () { 
            return { 
                myChart: null, // 图表对象
                option: {  // 配置项
                    avoidLabelOverlap: true,
                    legend: { 
                        itemHeight: 14,
                        itemWidth: 14,
                        icon: "circle",
                        orient: 'vertical',
                        zlevel: 999,
                        z: 999,
                        left: '73%',
                        top: '24%',
                        data: [],
                        formatter: (name) => { 
                            const arr = [
                                '{aa|' + name + '}'
                            ]
                            return arr.join('')
                        },
                        textStyle: { 
                            rich: { 
                                aa: { 
                                    fontSize: 14,
                                    color: '#666666',
                                    fontWeight: 'normal',
                                    padding: [-2, 0, 0, 5],
                                    lineHeight: 18
                                },
                            }
                        },
                        selectedMode: true, // 图例是否可点击
                    },
                    color: ['#2966b6', '#7460EE'], // 绘制区域的线条颜色
                    tooltip: { 
                        confine: true, // 将图表限制在区域内
                        enterable: true, //鼠标是否可以移动到tooltip区域内
                    },
                    radar: { 
                        center: ["50%", "50%"],
                        radius: "70%",
                        nameGap: 8, // 图中工艺等字距离图的距离
                        name: { 
                            textStyle: { 
                                color: '#666666',
                                fontSize: 14,
                            }
                        },
                        indicator: [], // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
                        axisLine: {  // 指向外圈文本的分隔线样式, 坐标轴轴线
                            show: true,
                            lineStyle: { 
                                color: '#c6d4e1'
                            }
                        },
                        splitLine: {  // 坐标轴在 grid 区域中的分隔线。
                            lineStyle: { 
                                color: '#c6d4e1',
                                // width: 2,
                                // type: 'dotted'
                            }
                        },
                        splitArea: {  // 坐标轴在 grid 区域中的分隔区域
                            show: false,
                            areaStyle: { 
                                color: '#fff'
                            }
                        }
                    },
                    grid: { 
                        top: '18%',
                        left: '3%',
                        right: '4%',
                        bottom: '6%',
                        containLabel: true
                    },
                    series: []
                },
            }
        },
        methods: { 
    
            updateChartView () {  // 更新视图
                if (!this.myChart) return;
                const fullOption = this.mergeDataToOption();
                this.myChart.setOption(fullOption, true);
            },
    
            mergeDataToOption () {  // 合并并将数据加入到配置项
                return merge(
                    { },
                    this.option,
                    this.extraOption
                )
            },
    
            addChartResizeListener () {  // 监听元素变化
                // 创建实例带参
                const instance = ResizeListener({ 
                    strategy: 'scroll',
                    callOnAdd: true
                });
    
                // 监听元素大小的变化
                instance.listenTo(this.$refs.charts, () => { 
                    if (!this.myChart) return;
                    this.myChart.resize();
                });
            }
        },
        mounted () { 
            if (!this.myChart) { 
                // 初始化图表
                this.myChart = echarts.init(this.$refs.charts);
    
                // 绘制图表
                this.updateChartView();
    
                // 监听元素大小变化
                this.addChartResizeListener();
            }
        },
    }
    </script>
    
    <style lang="less" scoped>
        .charts { 
            width: 100%;
            height: 100%;
        }
    </style>

## 使用 ##

同之前链接

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c17337bcb13248969dcb6567468afcac.png