Vue Echarts簡易實現(xiàn)儀表盤

更新時間：2022年12月17日 09:57:15 作者：愛學習de測試小白

這篇文章主要為大家詳細介紹了Vue Echarts實現(xiàn)儀表盤案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

本篇來學習寫儀表盤圖

儀表盤的特點

可以更直觀的表現(xiàn)出某個指標的進度或實際情況

儀表盤的基本實現(xiàn)

ECharts 最基本的代碼結構
準備數(shù)據(jù), 設置給 series 下的 data
在 series 下設置 type:gauge

<!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"))
    var option = {
      series: [
        {
          type: 'gauge',
          data: [ 
            {
              value: 95             
            }     
          ]       
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

效果

儀表盤的常見效果

數(shù)值范圍: max min
多個指針: 增加data中數(shù)組的元素
多個指針顏色的差異: itemStyle

<!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"))
    var option = {
        series: [
            {
                type: 'gauge',
                data: [
                    // 每一個對象就代表一個指針
                    {
                        name: 'mem',
                        value: 70,
                        itemStyle: { // 指針的樣式
                            color: 'purple' // 指針的顏色
                        },
                        title: {
                            offsetCenter: ['-40%', '80%']
                        },
                        detail: {
                            offsetCenter: ['-40%', '95%']
                        }
                    },
                    {
                        name: 'cpu',
                        value: 80,
                        itemStyle: {
                            color: 'blue'
                        },
                        title: {
                            offsetCenter: ['40%', '80%']
                        },
                        detail: {
                            offsetCenter: ['40%', '95%']
                        }
                    },
                ],
                detail: {   // 數(shù)值文案樣式
                    width: 40,
                    height: 14,
                    fontSize: 14,
                    color: '#fff',
                    backgroundColor: 'auto',
                    borderRadius: 3,
                    formatter: '{value}%'
                },
                title: {  // name 文字大小
                    fontSize: 20
                },
                progress: {  // 儀表盤數(shù)據(jù)樣式
                    show: true,
                    overlap: true,
                    roundCap: true
                },
                max: 100,
                min: 20 // min max 控制儀表盤數(shù)值范圍
            }
        ]
    }
    mCharts.setOption(option)
</script>
</body>
</html>

效果