# 雷达图

仪表盘的特点:

  • 仪表盘可以更直观的表现出某个指标的进度或实际情况

# 1. 简单的雷达图

实现:

option = {
  series: [
    {
      type: 'gauge',
      data: [
        { value: 95 }, // 指针的值
      ],
    },
  ],
}

示例:

<!--35-gauge-basic.html-->
<div id="box_35-gauge-basic" style="width: 600px; height: 600px; border: solid 1px #ddd;"></div>
<script type="module">
  echarts.init(document.querySelector('#box_35-gauge-basic')).setOption({
    series: [
      {
        type: 'gauge',
        data: [
          { value: 95 },
        ],
      },
    ],
  });
</script>

# 2. 常用效果

说明:

  • 数值范围: min, max
  • 多个指针
  • 指针样式

示例:

<!--36-gauge-common-config.html-->
<div id="box_36-gauge-common-config" style="width: 600px; height: 600px; border: solid 1px #ddd;"></div>
<script type="module">
  echarts.init(document.querySelector('#box_36-gauge-common-config')).setOption({
    series: [
      {
        type: 'gauge',
        data: [
          { value: 95 },
        ],
        min: 80,
        max: 160,
      },
    ],
  });
</script>
本章目录