32-Vue之ECharts-雷达图

news2024/11/25 14:31:07

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的值设置为radar
    var 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>