Vue ECharts簡易實現(xiàn)雷達圖

更新時間：2022年12月17日 10:06:17 作者：愛學(xué)習(xí)de測試小白

這篇文章主要介紹了基于Vue ECharts簡易實現(xiàn)雷達圖,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

本篇來學(xué)習(xí)寫雷達圖

雷達圖特點

可以用來分析多個維度的數(shù)據(jù)與標準數(shù)據(jù)的對比情況

雷達圖的基本實現(xiàn)

ECharts 最基本的代碼結(jié)構(gòu)
定義各個維度的最大值
準備具體產(chǎn)品的數(shù)據(jù)
在 series 下設(shè)置 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>雷達圖的實現(xiàn)</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: '續(xù)航',
        max: 100
      }
    ]
    // 3. 準備數(shù)據(jù)
    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>

效果

雷達圖的常見效果

顯示數(shù)值

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

效果

區(qū)域面積

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>雷達圖的實現(xiàn)</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最基本的代碼結(jié)構(gòu)
    //2. 定義各個維度的最大值, 通過radar屬性配置
    //   易用性,功能,拍照,跑分,續(xù)航, 每個維度的最大值都是100
    //3. 準備產(chǎn)品數(shù)據(jù), 設(shè)置給series下的data
    //4. 將type的值設(shè)置為radar
    var mCharts = echarts.init(document.getElementById("app"))
    // 各個維度的最大值
    var dataMax = [
      {
        name: '易用性',
        max: 100
      },
      {
        name: '功能',
        max: 100
      },
      {
        name: '拍照',
        max: 100
      },
      {
        name: '跑分',
        max: 100
      },
      {
        name: '續(xù)航',
        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: { // 設(shè)置標簽的樣式
            show: true // 顯示數(shù)值
          },
          areaStyle: {}, // 將每一個產(chǎn)品的雷達圖形成陰影的面積
          data: [
            {
              name: '手機1',
              value: phone1
            },
            {
              name: '手機2',
              value: phone2
            }
          ]
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

到此這篇關(guān)于Vue ECharts簡易實現(xiàn)雷達圖的文章就介紹到這了,更多相關(guān)Vue ECharts雷達圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: