echarts---雷达图

echarts—雷达图

本次写小组官网的项目要负责概况部分的内容，一些统计图之类的，想要写一个雷达图，发现组件库中只有react的写法，在vue项目中不能使用，让豆包简单生成了一下，发现需要用到echarts，简单学习了一下完成了一个雷达图。

echarts的简单使用

1. 下载echarts

npm install echarts --save

2. 引入

import * as echarts from 'echarts';

3. echarts常见图类型

series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'，//折线图
      type: 'bar'，//柱状图
      type: 'pie'，//饼状图
      type: 'scatter'，//散点图
      type: 'candlestick'，//K线图
      type: 'radar'，//雷达图
      type: 'xx'，
 
    }
  ]

这次写的是雷达图radar，下面以雷达图为例子介绍

4. 准备工作

a. 创建一个固定宽高的div为作图做准备

<div ref="radarChart" style="width: 200px; height: 140px;" class="mx-auto aspect-square max-h-[300px]">
</div>

b. 准备一些数据

const chartData = [
    { type: "博客", desktop: 186 },
    { type: "公告", desktop: 305 },
    { type: "交流", desktop: 237 },
    { type: "头脑风暴", desktop: 273 },
    { type: "用户", desktop: 209 },
];

const chartConfig = {
    desktop: {
        label: "Desktop",
        color: "#3d79b1",
    },
};

c. 将图表初始化为响应式

const radarChart = ref<HTMLElement | null>(null);

5. 初始化

a. 基于准备好的dom，初始化echarts

const myChart = echarts.init(radarChart.value);

b. 设置图表max值，为了防止max设置过大或过小导致雷达图分布不均匀情况，通过动态计算来设置最大值

// 自定义每个指标的最大值
const indicators = chartData.map(item => ({
   name: item.type,
   max: Math.max(...chartData.map(data => data.desktop)) // 动态计算最大值
}));

6. 设置图表配置项（option）

a. 设置图表的位置以及大小以及数据

radar: {
   indicator: indicators,  // 数据
   center: ['50%', '55%'],   // 位置
   radius: '70%'  // 大小
},

b. 设置悬浮提示框

tooltip: {
  trigger: 'item',
  formatter: function (params) {
  const typeName = params.name;
  const value = params.value;
  return `<div>
  	<p>类别: ${typeName}</p>
    <p>数值: ${value}</p>
     </div>`;
    }
},

c. 传入数据

series: [
   {
     type: 'radar',
     data: [
        {
           // 将每个指标的值按顺序放入数组
           value: chartData.map(item => item.desktop),
           name: chartConfig.desktop.label,
           areaStyle: {
               color: chartConfig.desktop.color,
               opacity: 0.3
           }
        }
	]
  }
]

d. 使用刚指定的配置项和数据显示图表

myChart.setOption(option);

雷达图完整代码

<template>
    <div class="card">
        <div class="card-header items-center pb-4">
            <h3 class="card-title">Radar Chart</h3>
        </div>
        <div class="card-content pb-0">
            ##
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { TrendingUp } from 'lucide-vue-next';
import * as echarts from 'echarts';

const chartData = [
    { type: "博客", desktop: 186 },
    { type: "公告", desktop: 305 },
    { type: "交流", desktop: 237 },
    { type: "头脑风暴", desktop: 273 },
    { type: "用户", desktop: 209 },
];

const chartConfig = {
    desktop: {
        label: "Desktop",
        color: "#3d79b1",
    },
};


const radarChart = ref<HTMLElement | null>(null);

onMounted(() => {
    if (radarChart.value) {
        const myChart = echarts.init(radarChart.value);

        // 自定义每个指标的最大值
        const indicators = chartData.map(item => ({
            name: item.type,
            max: Math.max(...chartData.map(data => data.desktop)) // 动态计算最大值
        }));

        const option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    const typeName = params.name;
                    const value = params.value;
                    return `<div>
                        <p>类别: ${typeName}</p>
                        <p>数值: ${value}</p>
                    </div>`;
                }
            },
            radar: {
                indicator: indicators,
                center: ['50%', '55%'],
                radius: '70%'
            },
            series: [
                {
                    type: 'radar',

                    // data:
                    // chartData.map(item => ({
                    //     value: item.desktop,
                    //     name: item.type,
                    //     areaStyle: {
                    //         color: chartConfig.desktop.color,
                    //         opacity: 0.3
                    //     }
                    // }))
                    data: [
                        {
                            // 将每个指标的值按顺序放入数组
                            value: chartData.map(item => item.desktop),
                            name: chartConfig.desktop.label,
                            areaStyle: {
                                color: chartConfig.desktop.color,
                                opacity: 0.3
                            }
                        }
                    ]
                }
            ]
        };
        myChart.setOption(option);
    }
});

</script>

<style lang="scss" scoped>
.card {
    padding: 10px;
    width: 24%;
    background-color: #fff;

    .card-header {
        .card-title {
            color: rgb(139, 139, 139);
            font-size: 18px;
            padding-bottom: 10px;
            border-bottom: #edecec 1px solid;
        }
    }

    .card-content {}
}
</style>

更多的使用

echarts作图功能是非常强大的，可以从echarts官网上查看更多的相关配置操作等等