仪表盘演示

仪表盘演示https://yundie.xyz/x-charts-demo/index.html?type=gauge

参考配置

基础仪表盘

<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'gauge',
  animation: true,
  dataLabel: true,
  series: [{
    name: '速度',
    data: [{ value: 60 }],
    color: '#2979ff'
  }]
});
</script>

配置说明

type

图表类型，设置为 'gauge' 表示仪表盘。

series

数据系列配置：

• name: 系列名称
• data: 数据数组，每个元素包含：
  • value: 数值
• color: 仪表盘颜色

仪表盘展示数值在特定范围内的位置，类似汽车仪表盘。