hn_bigScreen/src/components/echart/waterPressureOutDoor.vue

<template>
  <div id="main3" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/utils/resizeMixins.js'

export default {
  name: 'WaterPressureOutDoor',
  mixins: [resize],
  props: {
    outDoorData: {
      type: Number,
      require: true,
      default: function() {
        return 0
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null,
      timeRePie: null
    }
  },
  watch: {
    'outDoorData': {
      handler(val) {
        setTimeout(() => {
          this.initChart()
        }, 100)
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.__resizeHandler)
  },
  methods: {
    resetPieChartData() {
      clearInterval(this.timeRePie)
      this.timeRePie = setInterval(() => {
        if (!this.chart) {
          return
        }
        this.chart.clear()
        this.initChart()
      }, 8000)
    },
    initChart() {
      const chartDom = document.getElementById('main3')
      this.chart = echarts.init(chartDom)

      const option = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 1.2,
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [0.08, '#f65164'],
                  [0.8, '#18b08f'],
                  [1, '#c4c859']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '30%',
              width: 6,
              offsetCenter: [0, '-60%'],
              itemStyle: {
                color: '#F2F2F2'
              }
            },
            axisTick: {
              distance: -10,
              splitNumber: 1,
              lineStyle: {
                width: 1,
                color: '#fff'
              }
            },
            splitLine: {
              distance: -10,
              length: 2,
              lineStyle: {
                width: 1,
                color: '#FAC858'
              }
            },
            axisLabel: {
              distance: -15,
              color: '#fff',
              fontSize: 8
            },
            anchor: {
              show: false
            },
            title: {
              show: true,
              offsetCenter: [0, '50%'],
              fontSize: 14,
              color: '#fff'
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 5,
              borderRadius: 8,
              offsetCenter: [0, '-15%'],
              fontSize: 14,
              fontWeight: 'bolder',
              formatter: '{value} Mpa',
              color: 'auto'
            },
            data: [
              {
                value: this.outDoorData,
                name: '室外'
              }
            ]
          }
        ]
      }

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

<style scoped>
</style>