首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue ECharts雷达图

Vue ECharts简易实现雷达图

2022-12-17 10:06:17 作者：爱学习de测试小白

这篇文章主要介绍了基于Vue 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>

到此这篇关于Vue ECharts简易实现雷达图的文章就介绍到这了,更多相关Vue ECharts雷达图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！