echarts仪表盘

<template>
  <div class="gague-wrap">
    <div class="gague" ref="gagueEchart"></div>
  </div>
</template>
<script>
import * as $echarts from 'echarts'
export default {
  name: 'gagueChart',
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {
        return {
          name: 'Km/h',
          value: 50
        }
      }
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    }
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.init();
      }
    }
  },
  data() {
    return {
      // 图表类型
      myEchart: null,
      // 图标配置项
      options: {
        backgroundColor: ['#000'],
        tooltip: {show: false},
        series: [
          {
            type: 'gauge',
            min: this.min,
            max: this.max,
            // 仪表盘宽度及颜色
            axisLine: {
              lineStyle: {
                width: 3,
                color: [
                  [1, '#000']
                ]
              }
            },
            // 不显示指针
            pointer: {
              show: false
            },
            // 小刻度
            axisTick: {
              // show: false,
              distance: 10,
              length: 2,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            // 大刻度
            splitLine: {
              // show: false,
              distance: -5,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            // 刻度值
            axisLabel: {
              // show: false,
              color: '#fff',
              distance: 2,
              fontSize: 5
            },
            // name位置
            title: {offsetCenter: [0, '80%'], color: '#fff',fontSize:8},
            // value位置
            detail: {
              formatter: '{value}',
              offsetCenter: [0, 0],
              fontSize: 12,
              fontWeight: 'bold',
              color: '#fff'
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      }
    };
  },
  // 创建元素
  mounted() {
    this.init();
  },
  // 销毁
  destroyed() {
    // 销毁图表
    this.destroyedChart();
  },
  methods: {
    /**
     * @description 初始化的方法
     * @name init
     * @return {*} 无
     */
    init() {
      // 更新数据
      this.update(this.data);
    },
    /**
     * @description 刷新图表
     * @return {*} 无
     */
    refresh() {
      if (this.myEchart) {
        this.myEchart.resize();
      }
    },
    /**
     * @description 更新
     * @param {Object} data 图标数据
     * @name update
     * @return {*} 无
     */
    update(data) {
      // 如果不存在echarts
      if (!this.myEchart) {
        // 图表对象
        this.myEchart = $echarts.init(this.$refs.gagueEchart);
        // 绑定resize 事件
        this.bindResizeEvent();
      }
      // 更新数据
      this.updateData(data);
      // 清空图表
      this.myEchart.clear();
      // 生成图表
      this.myEchart.setOption(this.options);
    },
    /**
     * @description 更新数据
     * @name updateData
     * @param {object} data 参数
     * @return {*} 无
     */
    updateData(data) {
      this.options.series[0].data[0].name = data.name;
      this.options.series[0].data[0].value = data.value;
    },
    /**
     * @description 事件处理函数
     * @name resizeHandler
     * @return {*} 无
     */
    resizeHandler() {
      if (this.myEchart) {
        this.myEchart.resize();
      }
    },
    /**
     * @description 绑定resize 事件
     * @name init
     * @return {*} 无
     */
    bindResizeEvent() {
      // 绑定resize事件
      window.addEventListener('resize', this.resizeHandler);
    },
    // 取消事件绑定
    unbindResizeEvent() {
      // 取消绑定resize事件
      window.removeEventListener('resize', this.resizeHandler);
    },
    /**
     * @description 销毁图表
     * @name destroyedChart
     * @return {*} 无
     */
    destroyedChart() {
      // 如果存在echarts
      if (this.myEchart) {
        // 销毁实例，销毁后实例无法再被使用。
        this.myEchart.dispose();
        this.myEchart = null;
        // 取消事件绑定
        this.unbindResizeEvent();
      }
    }
  }
};
</script>
<style lang="scss">
.gague-wrap {
  .gague {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>