Vue Echarts簡易實現儀表盤

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

目錄前言儀表盤的特點儀表盤的基本實現儀表盤的常見效果前言本篇來學習寫儀表盤圖儀表盤的特點可以更直觀的表現出某個指標的進度或實際情況儀表盤的基本實現ECharts最基本的代碼結構準備數據,設置給s...

前言

本篇來學習寫儀表盤圖

儀表盤的特點

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

儀表盤的基本實現

ECharts 最基本的代碼結構
準備數據, 設置給 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: [
        {
     python     type: 'gauge',
          data: [ 
     編程客棧       {
              value: 95             
            }     
          ]       
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

效果

Vue Echarts簡易實現儀表盤

儀表盤的常見效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="androidUTF-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' // 指針的顏色
                        },
       android                 title: {
                            offsetCenter: ['-40%', '80%']
                        },
                        detail: {
                            offsetCenter: ['-40%', '95%']
                        }
                    },
                    {
                        name: 'cpu',
                        value: 80,
                        itemStyle: {
                            color: 'blue'
                        },
                        title: {
                            offsetCenter: ['40%', '80%']
                        },
                        detail: {
                            offsetCenter: ['40%', '95%']
                        }
                    },
                ],
                detail: {   // 數值文案樣式
                    width: 40,
                    height: 14,
                    fontSize: 14,
                    color: '#fff',
                    backgroundColor: 'auto',
                    borderRadius: 3,
                    formatter: '{value}%'
                },
                title: {  // name 文字大小
                    fontSize: 20
                },
                progress: {  // 儀表盤數據樣式
                    show: true,
                    overlap: true,
                    roundCap: true
                },
                max: 100,
                min: 20 // min max 控制儀表盤數值范編程客棧圍
            }
        ]
    }
    mCharts.setOption(option)
</script>
</body>
</html>

效果

Vue Echarts簡易實現儀表盤