怎么用echarts做仪表盘

下面我用**「从零到可运行」**的方式，教你用 ECharts 做仪表盘（Gauge），包含最常用场景和示例。

一、基本使用步骤

1️⃣ 引入 ECharts

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

2️⃣ 准备容器

<div id="gauge" style="width: 400px;height:300px;"></div>

3️⃣ 初始化 ECharts

const chart = echarts.init(document.getElementById('gauge'));

4️⃣ 配置仪表盘（最基础示例）

const option = {
  series: [
    {
      type: 'gauge',
      min: 0,
      max: 100,
      data: [{ value: 72 }]
    }
  ]
};

chart.setOption(option);

✅ 这样你就有一个最简单的仪表盘了。

二、常见仪表盘样式配置

✅ 1. 修改起始角度 & 进度

series: [
  {
    type: 'gauge',
    startAngle: 180,
    endAngle: 0,
    min: 0,
    max: 100,
    progress: {
      show: true,
      width: 18
    },
    axisLine: {
      lineStyle: {
        width: 18
      }
    },
    data: [{ value: 65 }]
  }
]

✅ 2. 设置颜色区间（红黄绿）

axisLine: {
  lineStyle: {
    width: 18,
    color: [
      [0.3, '#ff4d4f'],
      [0.7, '#faad14'],
      [1, '#52c41a']
    ]
  }
}

✅ 3. 显示标题 & 单位

detail: {
  formatter: '{value} %',
  fontSize: 24,
  offsetCenter: [0, '70%']
},
title: {
  offsetCenter: [0, '100%'],
  fontSize: 14
},
data: [{ value: 88, name: '完成率' }]

三、动态更新仪表盘

setInterval(() => {
  const value = Math.floor(Math.random() * 100);
  chart.setOption({
    series: [{ data: [{ value }] }]
  });
}, 2000);

四、完整示例（可直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ECharts 仪表盘</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
  <div id="gauge" style="width:400px;height:300px;"></div>

  <script>
    const chart = echarts.init(document.getElementById('gauge'));

    chart.setOption({
      series: [
        {
          type: 'gauge',
          min: 0,
          max: 100,
          progress: { show: true, width: 20 },
          axisLine: {
            lineStyle: {
              width: 20,
              color: [
                [0.3, '#ff4d4f'],
                [0.7, '#faad14'],
                [1, '#52c41a']
              ]
            }
          },
          pointer: { width: 5 },
          detail: {
            formatter: '{value} %',
            fontSize: 24,
            offsetCenter: [0, '70%']
          },
          data: [{ value: 80, name: 'CPU使用率' }],
          title: {
            offsetCenter: [0, '100%']
          }
        }
      ]
    });
  </script>
</body>
</html>

五、常见用途

• CPU / 内存监控
• 业务完成率
• KPI 指标展示
• 大屏可视化

如果你告诉我：

• ✅ 用在 Vue / React？
• ✅ 要做 多个仪表盘？
• ✅ 要做 大屏风格？

我可以直接给你对应版本代码。