32-Vue之ECharts-雷达图

news/2024/4/28 10:53:25/文章来源:https://blog.csdn.net/IT_heima/article/details/128338105

ECharts-雷达图

- - 前言
  - 雷达图特点
  - 雷达图的基本实现
  - 雷达图的常见效果
  - - 显示数值
    - 区域面积
    - 绘制类型
    - 完整代码

前言

本篇来学习写雷达图

雷达图特点

可以用来分析多个维度的数据与标准数据的对比情况

雷达图的基本实现

ECharts 最基本的代码结构
定义各个维度的最大值
准备具体产品的数据
在 series 下设置 type:radar

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>雷达图的实现</title><!-- cdn方式 引入echarts.js文件 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head><body><div id='app' style="width: 600px;height:400px"></div><script>var mCharts = echarts.init(document.getElementById("app"))// 2. 各个维度的最大值var dataMax = [{name: '易用性',max: 100},{name: '功能',max: 100},{name: '拍照',max: 100},{name: '跑分',max: 100},{name: '续航',max: 100}]// 3. 准备数据var phone1 = [80, 90, 80, 82, 90]var phone2 = [70, 82, 75, 70, 78]var option = {radar: {indicator: dataMax, // 配置各个维度的最大值     },series: [{type: 'radar', // 4. radar 此图表时一个雷达图data: [{name: '手机1',value: phone1 },{name: '手机2',value: phone2}]}]}mCharts.setOption(option)</script>
</body></html>

效果

在这里插入图片描述

雷达图的常见效果

显示数值

var option = {series: [{type: 'radar',label: {show: true}]
}

效果

区域面积

areaStyle：{}

绘制类型

shape：支持 ‘polygon’ (多边行 )和’circle’ (圆形)

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>雷达图的实现</title><!-- cdn方式 引入echarts.js文件 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head><body><div id='app' style="width: 600px;height:400px"></div><script>//1. ECharts最基本的代码结构//2. 定义各个维度的最大值, 通过radar属性配置//   易用性,功能,拍照,跑分,续航, 每个维度的最大值都是100//3. 准备产品数据, 设置给series下的data//4. 将type的值设置为radarvar mCharts = echarts.init(document.getElementById("app"))// 各个维度的最大值var dataMax = [{name: '易用性',max: 100},{name: '功能',max: 100},{name: '拍照',max: 100},{name: '跑分',max: 100},{name: '续航',max: 100}]var phone1 = [80, 90, 80, 82, 90]var phone2 = [70, 82, 75, 70, 78]var option = {radar: {indicator: dataMax, // 配置各个维度的最大值shape: 'circle' // 配置雷达图最外层的图形 circle polygon},series: [{type: 'radar', // radar 此图表时一个雷达图label: { // 设置标签的样式show: true // 显示数值},areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积data: [{name: '手机1',value: phone1},{name: '手机2',value: phone2}]}]}mCharts.setOption(option)</script>
</body></html>