零云®lyCharts v26

Appearance

Gauge 仪表盘 ​

仪表盘是一种用于展示单一数据值与预设范围关系的图表，常用于显示速度、温度、功率等指标。

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基础仪表盘 ​

通过在 [series] 中添加对象并设置数据，可以绘制基础仪表盘。

vue
<template>
  <view>
    <ly-charts-gauge 
      :width="300" 
      :height="300" 
      :option="gaugeOption"
    ></ly-charts-gauge>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const gaugeOption = ref({
    pointer: {
      length: '75%',
      width: 16
    },
    series: [{
      type: 'gauge',
      startAngle: 225,
      endAngle: -45,
      data: [{ value: 60, name: '速度' }]
    }]
  })
</script>

我将把文档中的示例代码转换为组合式API（Composition API）风格。主要修改是将选项式API的data、methods等转换为setup函数中的ref和reactive等。

```markdown::/Users/jry/Documents/www/xyito/open/lyCharts-docs/docs/charts/gauge.md::c46b681d-6e7a-4ef9-b294-c5b38d229c95

带进度条的仪表盘 ​

通过设置 series.progress.show 为 true，可以显示进度条效果。

vue
<template>
  <view>
    <ly-charts-gauge 
      :width="300" 
      :height="300" 
      :option="gaugeOption"
    ></ly-charts-gauge>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const gaugeOption = ref({
  series: [{
    type: 'gauge',
    min: 0,
    max: 240,
    progress: {
      show: true,
      color: 'red'
    },
    detail: {
      valueAnimation: false
    },
    animationDuration: 1000,
    axisLine: {
      lineStyle: {
        width: 12,
        color: [[1, '#eee']]
      }
    },
    data: [{ value: 60, name: '功率' }]
  }]
})
</script>

自定义样式的仪表盘 ​

通过配置 axisLine、splitLine、axisLabel 等属性，可以自定义仪表盘样式。

vue
<template>
  <view>
    <ly-charts-gauge 
      :width="300" 
      :height="300" 
      :option="gaugeOption"
    ></ly-charts-gauge>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const gaugeOption = ref({
  series: [{
    type: 'gauge',
    progress: {
      show: true,
      width: 12
    },
    axisLine: {
      lineStyle: {
        width: 12,
        color: [
          [0.3, '#67C23A'],
          [0.7, '#E6A23C'],
          [1, '#F56C6C']
        ]
      }
    },
    splitLine: {
      splitNumber: 5,
      length: 15,
      lineStyle: {
        width: 3,
        color: '#999'
      }
    },
    axisLabel: {
      distance: 25,
      color: '#666',
      fontSize: 14
    },
    anchor: {
      show: true,
      size: 10,
      itemStyle: {
        borderWidth: 1,
        borderColor: '#5572CA'
      }
    },
    detail: {
      show: true,
      fontSize: 24,
      color: '#333',
      formatter: '{value}%'
    },
    data: [{ value: 20, name: '完成度' }]
  }]
})
</script>

带动画效果的仪表盘 ​

通过设置 detail.valueAnimation 为 true，可以启用数值动画效果。

vue
<template>
  <view>
    <ly-charts-gauge 
      :width="300" 
      :height="300" 
      :option="gaugeOption"
    ></ly-charts-gauge>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const gaugeOption = ref({
  series: [{
    type: 'gauge',
    progress: {
      show: true,
      width: 1
    },
    axisLine: {
      splitNumber: 3,
      lineStyle: {
        width: 12,
        color: [[1, '#f1f1f1']]
      }
    },
    splitLine: {
      length: 10,
      lineStyle: {
        width: 2,
        color: '#999'
      }
    },
    axisLabel: {
      distance: 15,
      color: '#666',
      fontSize: 12
    },
    itemStyle: {
      color: 'green'
    },
    anchor: {
      show: true,
      size: 8,
      itemStyle: {
        borderWidth: 1,
        borderColor: '#5572CA'
      }
    },
    detail: {
      valueAnimation: true,
      show: true,
      fontSize: 25,
      color: '#409EFF',
      formatter: '{value}km/h',
      offsetCenter: [0, 0]
    },
    data: [{ value: 65, name: '时速' }]
  }]
})
</script>

多进度条仪表盘 ​

通过在 series.data 中添加多个数据项，可以实现多进度条仪表盘。

vue
<template>
  <view>
    <ly-charts-gauge 
      :width="260" 
      :height="260" 
      :option="gaugeOption"
    ></ly-charts-gauge>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const gaugeOption = ref({
  series: [{
    type: 'gauge',
    min: 0,
    max: 130,
    progress: {
      show: true,
      width: 38
    },
    startAngle: 270,
    endAngle: -89,
    pointer: {
      show: false
    },
    detail: {
      valueAnimation: true
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    animationDuration: 3000,
    axisLine: {
      lineStyle: {
        width: 40,
        color: [[1, '#f7f7f7']]
      }
    },
    data: [
      { value: 60, name: '功率' },
      { value: 120, name: '功率2' },
      { value: 90, name: '功率3' },
      { value: 80, name: '功率4' }
    ]
  }]
})
</script>

Props ​

参数说明类型默认值可选值
option图表配置项，格式与 ECharts 相似Object--
width图表容器宽度String | Number300-
height图表容器高度String | Number300-

Events ​

事件名说明回调参数
click点击图表时触发event对象

Options 属性 ​

属性名说明类型默认值
series系列列表Array-
series[].type系列类型Stringgauge
series[].name系列名称String-
series[].data系列数据Array-
series[].data[].value数据值Number0
series[].data[].name数据名称String-
series[].startAngle起始角度Number225
series[].endAngle结束角度Number-45
series[].min最小值Number0
series[].max最大值Number100
series[].progress进度条配置Object-
series[].progress.show是否显示进度条Booleanfalse
series[].progress.width进度条宽度Number12
series[].progress.color进度条颜色String-
series[].axisLine轴线配置Object-
series[].axisLine.lineStyle.width轴线宽度Number12
series[].axisLine.lineStyle.color轴线颜色String/Array#E6EBF8
series[].splitLine分割线配置Object-
series[].splitLine.length分割线长度Number10
series[].splitLine.splitNumber分割线数量Number10
series[].axisLabel轴标签配置Object-
series[].axisLabel.distance标签与轴线距离Number10
series[].axisLabel.color标签颜色String#999
series[].axisLabel.fontSize标签字体大小Number12
series[].axisTick刻度线配置Object-
series[].axisTick.show是否显示刻度线Booleantrue
series[].axisTick.splitNumber刻度线数量Number5
series[].pointer指针配置Object-
series[].pointer.show是否显示指针Booleantrue
series[].pointer.length指针长度String/Number80%
series[].pointer.width指针宽度Number8
series[].anchor锚点配置Object-
series[].anchor.show是否显示锚点Booleanfalse
series[].anchor.size锚点大小Number5
series[].detail详情配置Object-
series[].detail.show是否显示详情Booleantrue
series[].detail.fontSize详情字体大小Number20
series[].detail.color详情颜色String#333
series[].detail.formatter详情格式化String
series[].detail.valueAnimation是否启用数值动画Booleanfalse
series[].detail.offsetCenter相对于仪表盘中心的偏移位置Array[0, 0]
series[].animationDuration动画时长Number1000
series[].itemStyle项目样式Object-
series[].itemStyle.color项目颜色String-

方法 ​

方法名说明参数
refresh重新绘制图表-
getChartInstance获取图表实例-