echart 圆环1

需要实现的效果：

 相关实现代码如下：

<template>
  <div class="temperature">
    <div
      ref="temperatureChart"
      class="temperature-chart"
    />
    <!-- <div
      v-else
      class="noData"
    >
      暂无数据
    </div> -->
  </div>
</template>

<script>
import echarts from 'echarts'
import { debounce } from '@/utils'
export default {
  name: 'gaugeChart',
  props: {
    colorStyle: {
      type: String,
      default: 'rgba(20, 154, 250, 1)',
    },
    dataObj: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      // 实例
      myChart: null,
      options: {},

      resizeChart: debounce(() => {
        if (!this.myChart) return
        this.myChart.resize()
      }, 200),
    }
  },
  watch: {
    'dataObj.vehicleSpeed'(val) {
      this.initChart()
    },
    // 'dataObj.remainHydrogenPercentage'(val) {
    //   this.initChart()
    // },
    'dataObj.soc'(val) {
      this.initChart()
    },
  },
  mounted() {
    // 初始化
    this.initChart()
  },

  destroyed() {
    // 销毁
    window.removeEventListener('resize', this.resizeChart)
    this.myChart && this.myChart.dispose()
  },
  methods: {
    initChart(val) {
      var min = [0, 0, 0]
      var max = [280, 100, 100]
      var options = {
        tooltip: {
          show: false
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            type: 'gauge',
            name: '当前时速',
            radius: '80%', // 仪表盘半径
            z: 3, // 控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
            min: min[0],
            max: max[0],
            splitNumber: 7, // 仪表盘刻度的分割段数
            axisLine: {
              // 仪表盘轴线 // 无数据的底部背景圆环 
              show: true,
              lineStyle: {
                width: 5,
                shadowColor: '#fff',
                color: [
                  // 仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。
                  [
                    this.dataObj.vehicleSpeed / max[0], 'rgba(28, 195, 211, 1)'
                    // new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    //   {
                    //     offset: 0,
                    //     color: ' rgba(28, 195, 211, 1)',
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: 'rgba(46, 227, 137, 1)',
                    //   },
                    // ]),
                  ],
                  [1, '#E5E5E5'],
                ],
              },
            },
            splitLine: {
              // 刻度分隔线
              show: true,
              length: 10, // 刻度线长
              lineStyle: {
                color: 'auto',
                width: 1, // '#E5E5E5'
              }
            },
            axisTick: {
              // 刻度样式// 刻度分割线设置成圆环 
              show: true,
              splitNumber: 10,    // 分隔线之间分割的刻度数
              length: 8, // 出现刻度文字的线长
              lineStyle: {
                color: 'auto', // rgba(229, 229, 229, 1)',
                width: 1
              }
            },
            axisLabel: {
              // 刻度标签
              show: true,
              distance: 5, // 标签与刻度线的距离
              fontSize: 10,
              color: '#8b8b8b',
              // formatter:'' // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
            },
            pointer: {
              // 仪表盘指针
              show: true,
              // length: '5%', // 指针长度
              width: 1 // 指针宽度
            },
            title: {
              fontSize: 14,
              offsetCenter: [0, '80%'],
              color: '#666',
            },
            detail: {
              valueAnimation: true,
              offsetCenter: [5, 0],
              formatter: function (value) {
                return '{value|' + value + '} \n{unit|km/h}'
              },
              align: 'center',
              rich: {
                value: {
                  fontSize: 32,
                  fontWeight: 'bold',
                  color: 'rgba(28, 195, 211, 1)',// ' #19ACBA',
                  padding: [0, 0, 10, 0],
                  borderRadius: 25,
                  backgroundColor: 'rgba(255, 255, 255, .8)'
                },
                unit: {
                  fontSize: 12,
                  padding: [0, 5, 0, 0],
                  color: '#8B8B8B',
                },
              },
            },
            data: [
              {
                value: this.dataObj.vehicleSpeed || 0,
                name: '当前时速',
              },
            ],
          },
          {
            name: '剩余氢量',
            type: 'gauge',
            center: ['20%', '55%'],
            radius: '45%', // 半径
            min: min[1],
            max: max[1],
            clockwise: false, // 仪表盘刻度是否是顺时针增长
            startAngle: 45, // 起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度
            endAngle: 315, // 结束角度
            splitNumber: 40, // 分割线之间的刻度
            pointer: {
              // 仪表盘指针
              show: true,
              // showAbove: false, // 指针是否显示在标题和仪表盘详情上方。从 v5.2.0 开始支持
              // icon: this.startPointicon, // 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',从 v5.0 开始支持
              // keepAspect: false, // 如果图标是 path:// 的形式，是否在缩放时保持该图形的长宽比,从 v5.0 开始支持
              // length: '5%', // 指针长度
              width: 1, // 指针宽度
              // offsetCenter: ['0', '-40%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。从 v5.0 开始支持
              // itemStyle: {
              //   // 指针样式
              //   // color: 'rgba(205, 196, 196, 1)'
              // }
            },
            axisLine: {
              // 仪表盘轴线
              lineStyle: {
                // 控制线条样式
                width: 3,
                color: [
                  [
                    0, 'rgba(28, 195, 211, 1)'
                    // new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    //   {
                    //     offset: 0,
                    //     color: ' rgba(28, 195, 211, 1)',
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: 'rgba(46, 227, 137, 1)',
                    //   },
                    // ]),
                  ],
                  [1, ' #E5E5E5'],
                ],
              },
            },
            axisTick: {
              // 刻度
              show: false,
            },
            axisLabel: {
              // //刻度标签
              show: false,
              distance: -40
            },
            splitLine: {
              // 分隔线
              show: true,
              length: 6, // -4,
              distance: 10,
              lineStyle: {
                color: '#E5E5E5',
                width: 1,
              }
            },
            title: {
              fontSize: 10,
              offsetCenter: [0, '65%'],
              color: '#666',
            },
            detail: {
              // 仪表盘文字
              offsetCenter: [0, 0],
              formatter: function (value) {
                var value = '-'
                return '{value|' + value + '} \n{unit|kg}' // ％
              },
              align: 'center',
              rich: {
                value: {
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: 'rgba(28, 195, 211, 1)',// ' #19ACBA',
                  padding: [0, 0, 4, 10],
                  borderRadius: 25,
                  backgroundColor: '#fff'
                },
                unit: {
                  fontSize: 10,
                  padding: [0, 0, 0, 0],
                  color: '#8B8B8B',
                },
              },
            },
            data: [
              {
                value: this.dataObj.remainHydrogenPercentage || 0,
                name: '剩余氢量',
              },
            ],
          },
          {
            name: 'SOC',
            type: 'gauge',
            center: ['80%', '55%'],
            radius: '45%',
            min: min[2],
            max: max[2],
            startAngle: 135,
            endAngle: -135,
            splitNumber: 40,
            pointer: {
              // 仪表盘指针
              show: true,
              // showAbove: false, // 指针是否显示在标题和仪表盘详情上方。从 v5.2.0 开始支持
              // icon: this.startPointicon, // 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',从 v5.0 开始支持
              // keepAspect: false, // 如果图标是 path:// 的形式，是否在缩放时保持该图形的长宽比,从 v5.0 开始支持
              // length: '5%', // 指针长度
              width: 1, // 指针宽度
              // offsetCenter: ['0', '-40%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。从 v5.0 开始支持
              // itemStyle: {
              //   // 指针样式
              //   // color: 'rgba(205, 196, 196, 1)'
              // }
            },
            axisLine: {
              lineStyle: {
                width: 3,
                color: [
                  [
                    this.dataObj.soc / max[2], 'rgba(28, 195, 211, 1)'
                    // new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    //   {
                    //     offset: 0,
                    //     color: ' rgba(28, 195, 211, 1)',
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: 'rgba(46, 227, 137, 1)',
                    //   },
                    // ]),
                  ],
                  [1, ' #E5E5E5'],
                ],
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 6, // 刻度线长
              distance: 10,  // 刻度线与圆环的距离
              lineStyle: {
                color: 'auto', // '#E5E5E5',
                width: 1,
              },
              // show: true,
              // length: 6, // -4,
              // distance: 10,
              // lineStyle: {
              //   color: '#E5E5E5',
              //   width: 1,
              // }
            },
            title: {
              fontSize: 10,
              offsetCenter: [0, '65%'],
              color: '#666',
            },
            detail: {
              offsetCenter: [0, 0],
              formatter: function (value) {
                return '{value|' + value + '} \n{unit|%}'
              },
              align: 'center',
              rich: {
                value: {
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: 'rgba(28, 195, 211, 1)',// ' #19ACBA',
                  padding: [0, 0, 8, 10],
                  borderRadius: 25,
                  backgroundColor: '#fff'
                },
                unit: {
                  fontSize: 10,
                  padding: [0, 0, 0, 0],
                  color: '#8B8B8B',
                },
              },
            },
            data: [
              {
                value: this.dataObj.soc || 0,
                name: 'SOC',
              },
            ],
          },
        ],
      }
      this.myChart = echarts.init(this.$refs.temperatureChart)
      this.myChart.setOption(options)
      window.addEventListener('resize', this.resizeChart)
    },
  },
}
</script>

<style lang="scss" scoped>
.temperature {
  margin-top: -18px;
  margin-left: -20px;
  // padding: 0.18rem;
  height: 100%;

  .temperature-chart {
    width: 400px;
    height: 200px;
    font-weight: 400;
    color: rgb(0, 0, 0);
    text-align: center;
    // line-height: 0.36rem;
    font-size: 12px;
  }
}
</style>

utils:

export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }

    return result
  }
}