eachrt

<!--
 * @Author: your name
 * @Date: 2021-07-05 10:48:58
 * @LastEditTime: 2021-08-10 11:43:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shiva-trtms-air-service-web\src\views\airLink\components\gaugeChart.vue
-->
<template>
  <div ref="chartEl" style="height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "gaugeChart",
  props: {
    chartOptions: {
      type: Array,
      required: false,
      default: () => [0.1, 0.25, 0.1, "#61C032"],
    },
  },
  data() {
    return {
      chart: null,
      option: {
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            radius: "60%",
            center: ["50%", "80%"],
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.chartOptions[0], "#F0B06A"],
                  [1, this.chartOptions[3]],
                ],
              },
            },
            axisTick: {
              show: false,
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: "#666666",
              fontSize: 14,
              distance: -24,
              formatter: function (value) {
                if (value === 0) {
                  return "中转";
                }
              },
            },

            splitLine: {
              show: false,
            },
            // 仪表盘指针
            pointer: {
              show: false,
            },
          },
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            radius: "80%",
            center: ["50%", "80%"],
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [this.chartOptions[1], "#F0B06A"],
                  [1, this.chartOptions[3]],
                ],
              },
            },
            axisTick: {
              show: false,
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: "#666666",
              fontSize: 14,
              distance: -24,
              formatter: function (value) {
                if (value === 0) {
                  return "安检";
                }
              },
            },

            splitLine: {
              show: false,
            },
            // 仪表盘指针
            pointer: {
              show: false,
            },
          },
          {
            name: "外部刻度",
            type: "gauge",
            center: ["50%", "80%"],
            radius: "100%",
            min: 0, //最小刻度
            max: 100, //最大刻度

            startAngle: 180,
            endAngle: 0,
            //颜色
            axisLine: {
              show: true,
              lineStyle: {
                width: 15,
                color: [
                  [this.chartOptions[2], "#F0B06A"],
                  [1, this.chartOptions[3]],
                ],
              },
            },
            //仪表盘轴线
            axisLabel: {
              show: false,
              color: "#666666",
              fontSize: 14,
              distance: -24,
              formatter: function (value) {
                if (value === 0) {
                  return "舱位";
                }
              },
            }, //刻度标签。
            axisTick: {
              show: false,
              splitNumber: 5,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
        ],
      },
    };
  },
  watch: {
    chartOptions(val) {
      this.setOption(val);
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chartEl);
    this.chart.setOption(this.option);
    //节流
    function throttle(func, wait, options) {
      let time, context, args, result;
      let previous = 0;
      if (!options) options = {};

      let later = function () {
        previous = options.leading === false ? 0 : new Date().getTime();
        time = null;
        func.apply(context, args);
        if (!time) context = args = null;
      };

      let throttled = function () {
        let now = new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        let remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
          if (time) {
            clearTimeout(time);
            time = null;
          }
          previous = now;
          func.apply(context, args);
          if (!time) context = args = null;
        } else if (!time && options.trailing !== false) {
          time = setTimeout(later, remaining);
        }
      };
      return throttled;
    }
    // 添加窗口改变监听
    let chart = this.chart;
    this.chart.__resize = throttle(function () {
      chart.resize();
    }, 200);
    setTimeout(() => {
      window.addEventListener("resize", this.chart.__resize);
    }, 200);
  },
  beforeDestroy() {
    // 移除窗口改变监听
    window.removeEventListener("resize", this.chart.__resize);
  },
  methods: {
    setOption(list) {
      this.option.series[0].axisLine.lineStyle.color[0][0] = list[0];
      this.option.series[1].axisLine.lineStyle.color[0][0] = list[1];
      this.option.series[2].axisLine.lineStyle.color[0][0] = list[2];

      this.option.series[0].axisLine.lineStyle.color[1][1] = list[3];
      this.option.series[1].axisLine.lineStyle.color[1][1] = list[3];
      this.option.series[2].axisLine.lineStyle.color[1][1] = list[3];
      this.chart && this.chart.setOption(this.option, true);
    },
  },
};
</script>