在vue3环境下，echarts仪表盘颜色随数值变化，数值低于20时，仪表盘颜色为红色，数值大于20时显示蓝色

可以通过设置 ECharts 中仪表盘的颜色范围来实现这个功能。具体实现步骤如下：

1. 安装 echarts 和 vue-echarts。

npm install echarts vue-echarts

2. 在 vue 组件中引入 echarts 和 vue-echarts。

import echarts from 'echarts'
import ECharts from 'vue-echarts'

3. 在组件的 template 中添加 ECharts 组件，并且设置仪表盘的 option。

<template>
  <div class="dashboard">
    <e-charts :options="option" />
  </div>
</template>

export default {
  components: {
    ECharts,
  },
  data() {
    return {
      option: {
        series: [
          {
            type: 'gauge',
            detail: {
              formatter: '{value}',
              offsetCenter: [0, '60%'],
            },
            data: [
              {
                value: 0,
                name: '仪表盘',
              },
            ],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.2, '#ff4500'],
                  [1, '#1e90ff'],
                ],
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
              },
            },
            axisTick: {
              length: 8,
              lineStyle: {
                color: 'auto',
              },
            },
            splitLine: {
              length: 12,
              lineStyle: {
                width: 2,
                color: 'auto',
              },
            },
            pointer: {
              width: 5,
            },
          },
        ],
      },
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // TODO: 获取数据并更新 option.series[0].data[0].value
    },
  },
}

4. 上面的代码中，仪表盘的颜色范围通过 axisLine.lineStyle.color 来设置。其中，[0.2, '#ff4500'] 表示数值在 0 到 20 之间的颜色为红色，[1, '#1e90ff'] 表示数值在 20 到 100 之间的颜色为蓝色。可以根据实际需求进行调整。

以上就是在 vue3 环境下实现 echarts 仪表盘颜色随数值变化的方法。