Vue ECharts簡易實現雷達圖

發布時間: 2022-12-17 16:53:24 來源: 互聯網作者: 愛學習de測試小白欄目: JavaScript 點擊: 9

目錄前言雷達圖特點雷達圖的基本實現雷達圖的常見效果顯示數值區域面積繪制類型完整代碼前言本篇來學習寫雷達圖雷達圖特點可以用來分析多個維度的數據與標準數據的對比情況雷達圖的基本實現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>

效果

Vue ECharts簡易實現雷達圖

雷達圖的常見效果

顯示數值

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

效果

Vue ECharts簡易實現雷達圖

區域面積

areaStyle：{}

Vue ECharts簡易實現雷達圖

繪制類型

shape：支持 ‘polygon’ (多邊行 )和’circle’ (圓形)

Vue ECharts簡易實現雷達圖

完整代碼

<!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>
php</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
            }
          ]
        }
      ]
    php}
    mCharts.setOption(option)
  </script>
</body>
</html>

到此這篇關于vue ECharts簡易實現雷達圖的文章就介紹到這了,更多相關Vue ECharts雷達圖內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持我們！

本文標題: Vue ECharts簡易實現雷達圖

本文地址: http://www.newsfordelhi.com/wangluo/javascript/544159.html