yxk-electronic-archives/src/views/components/echarts/serverGpuOther.vue

<template>
  <div id="mainOther" :style="{height:height,width:width}" style="margin-top: -20px;" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'EchartsComponent',
  mixins: [resize],
  props: {
    memoryTotal: {
      type: Number,
      require: true,
      default: function() {
        return 0
      }
    },
    memoryFree: {
      type: Number,
      require: true,
      default: function() {
        return 0
      }
    },
    width: {
      type: String,
      default: '50%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  watch: {
    'memoryTotal': {
      handler(val) {
        setTimeout(() => {
          this.initChart()
        }, 100)
      },
      immediate: true,
      deep: true
    },
    'memoryFree': {
      handler(val) {
        setTimeout(() => {
          this.initChart()
        }, 100)
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.initChart()
    // window.addEventListener('resize', this.__resizeHandler)
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('mainOther')
      const myChart = echarts.init(chartDom)

      const dataValue = this.memoryTotal === 0 ? 0 : ((this.memoryTotal - this.memoryFree) / this.memoryTotal * 100).toFixed(0)

      const axisLineHandler = (value) => {
        const ratio = Number(value / 100)
        if (ratio <= 0.7) {
          return [
            [ratio, '#56BC91'], // 进度色
            [1, 'rgba(216, 216, 216, 1)'] // 背景色
          ]
        } else if (ratio <= 0.9) {
          return [
            [ratio, '#FF973E'], // 进度色
            [1, 'rgba(216, 216, 216, 1)'] // 背景色
          ]
        } else if (ratio <= 1) {
          return [
            [ratio, '#fd666d'], // 进度色
            [1, 'rgba(216, 216, 216, 1)'] // 背景色
          ]
        }
      }

      const itemStyleHandler = (value) => {
        if (value <= 70) {
          return `#56BC91`
        } else if (value <= 90) {
          return `#FF973E`
        } else if (value <= 100) {
          return `#fd666d`
        }
        return ''
      }

      // const dataNameHandler = (value) => {
      //   if (value <= 60) {
      //     return value + '°C'
      //   } else if (value <= 80) {
      //     return value + '°C'
      //   } else if (value <= 100) {
      //     return value + '°C'
      //   }
      //   return ''
      // }

      const option = {
        series: [
          {
            type: 'gauge',
            center: ['40%', '38%'],
            radius: 60,
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: itemStyleHandler(dataValue)
            },
            progress: {
              show: true,
              width: 20
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 14,
                color: axisLineHandler(dataValue)
              }
            },
            axisTick: {
              show: false,
              distance: -35,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: 'auto'
              }
            },
            splitLine: {
              show: false,
              distance: -42,
              length: 14,
              lineStyle: {
                width: 3,
                color: 'auto'
              }
            },
            axisLabel: {
              show: false,
              distance: -40,
              color: 'inherit',
              fontSize: 14
            },
            anchor: {
              show: false
            },
            title: {
              show: true,
              offsetCenter: [0, '50%'],
              fontSize: 14,
              color: '#000'
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, '0'],
              fontSize: 26,
              fontWeight: 'bolder',
              formatter: '{value} %',
              color: 'auto'
            },
            data: [
              {
                value: dataValue,
                name: ((this.memoryTotal - this.memoryFree) / 1024).toFixed(2) + 'G' + ' / ' + (this.memoryTotal / 1024).toFixed(0) + 'G'
              }
            ]
          },
          // 最外侧
          {
            type: 'gauge',
            radius: 66, // 半径
            center: ['40%', '38%'], // 位置
            min: 0,
            max: 100,
            startAngle: 200,
            endAngle: -20,
            axisLine: {
              show: false,
              lineStyle: {
                width: 1,
                color: '#999'
              }
            },
            axisTick: {
              show: true,
              splitNumber: 8,
              length: 2,
              lineStyle: {
                width: 1,
                color: '#999'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            detail: {
              show: false
            }
          }
        ]
      }

      if (option) {
        myChart.setOption(option)
      }
    }
  }
}
</script>

<style scoped>
</style>