<template>
  <div>
    <div class="sys_charts" ref="sys_charts"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    hostData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chartInstance: null,
      option: {},
      loadPercent: "",
    };
  },
  watch: {
    hostData: {
      immediate: true, // 页面加载时立即触发一次监听
      handler(newVal, oldVal) {
        if (newVal) {
          console.log("charts传值", newVal);
          let data = newVal;
          if (data.length > 0) {
            data.forEach((item) => {
              if (item.paramType === "28") {
                this.loadPercent = item.curValue;
              }
            });
            this.$nextTick(() => {
              // 销毁现有的 ECharts 实例
              if (this.chartInstance) {
                this.chartInstance.dispose();
              }
              // 重新初始化图表
              this.initChart();
            });
          } else {
          }
        }
      },
    },
  },
  mounted() {
    this.initChart();
    this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
  },
  destroyed() {
    //与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 计算颜色设置的函数
    getAxisLineColor(useData, maxData) {
      // 计算阈值
      // 真实值大于最大值的0.75才使用颜色渐变
      const threshold = maxData * 0.75;
      // 判断实际值是否超过阈值
      if (useData > threshold) {
        return [
          [
            useData / maxData,
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "rgba(0,127,208,1)" },
              { offset: 0.6, color: "rgba(0,127,208,1)" },
              { offset: 1, color: "rgba(69, 235, 167,0.5)" },
            ]),
          ],
          [1, "rgba(28,128,245,.0)"],
        ];
      } else {
        return [
          [
            useData / maxData,
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "rgba(0,127,208,1)" },
              { offset: 0.5, color: "rgba(0,127,208,1)" },
              { offset: 1, color: "rgba(0,127,208,1)" },
            ]),
          ],
          [1, "rgba(28,128,245,.0)"],
        ];
      }
    },
    //初始化chartInstance2对象 折线图
    initChart() {
      var value = 80;
      // 初始化数据
      const dataArr = this.loadPercent; //负载数据
      const dataX = 100;
      const titleFontSize = this.$refs.sys_charts.offsetWidth / 20;
      this.chartInstance = echarts.init(this.$refs.sys_charts);
      this.option = {
        backgroundStyle: {
          borderWidth: 1,
          color: "transparent",
        },
        title: [
          {
            text: `${dataArr} %`,
            bottom: titleFontSize,
            left: "center",
            textStyle: {
              fontSize: titleFontSize * 1.5, //标记
              color: "#ffff",
              fontWeight: 800,
            },
            triggerEvent: true,
          },
        ],
        legend: {
          show: false,
        },
        series: [
          {
            name: "最外部进度条",
            type: "gauge",
            radius: "99%",
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [
                    dataArr / dataX,
                    {
                      type: "linear",
                      x: 0,
                      y: 1,
                      x2: 0.5,
                      y2: 0.5,
                      colorStops: [
                        {
                          offset: 0,
                          color: "rgba(0,0,0,0)", // 0% 处的颜色
                        },
                        {
                          offset: 0.8,
                          color: "#195b9d", // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#0a2256", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  ],
                  [1, "#083158"],
                ],
                width: 5, //标记
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              show: false,
            },
            title: {
              // 标题
              show: false,
            },
            data: [
              {
                name: "title",
                value: dataArr,
              },
            ],
            pointer: {
              show: false,
            },
            animationDuration: 4000,
          },
          {
            name: "刻度尺",
            type: "gauge",
            radius: "88%",
            splitNumber: 10, // 刻度数量
            min: 0, // 最小刻度
            max: dataX, // 最大刻度
            // 分隔线
            splitLine: {
              show: true,
              length: 12,
              lineStyle: {
                width: 3,
                color: "#12E5FE",
              },
            },
            // 刻度线
            axisTick: {
              show: true,
              splitNumber: 10,
              length: 5,
              lineStyle: {
                color: "#12E5FE",
                width: 2,
              },
            },
            // 刻度标签
            axisLabel: {
              distance: -8, //刻度数字离轴线的距离
              color: "#CEF3FE",
              fontSize: "6",
              fontWeight: 600,
            },
            detail: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: -10, //刻度离轴线的距离
                color: [
                  [
                    1,
                    {
                      type: "radial",
                      x: 0.5,
                      y: 0.6,
                      r: 0.6,
                      colorStops: [
                        {
                          offset: 0.85,
                          color: "#031F46", // 0% 处的颜色
                        },
                        {
                          offset: 0.93,
                          color: "#060d25", // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#12D7EF", // 100% 处的颜色
                        },
                      ],
                    },
                  ],
                ],
              },
            },
          },
          {
            name: "外部指针",
            type: "gauge",
            radius: "90%",
            axisLine: {
              lineStyle: {
                color: [
                  [dataArr / dataX - 0.001, "rgba(0,0,0,0)"],
                  [dataArr / dataX + 0.003, "#e43c59"],
                  [1, "rgba(0,0,0,0)"],
                ],
                width: 33,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              show: false,
            },
            title: {
              // 标题
              show: false,
            },
            data: [
              {
                name: "title",
                value: dataArr,
              },
            ],
            pointer: {
              show: false,
            },
          },
          {
            name: "内层带指针",
            type: "gauge",
            radius: "60%",
            splitNumber: 10, // 刻度数量
            min: 0, // 最小刻度
            max: dataX, // 最大刻度
            // 仪表盘轴线相关配置
            axisLine: {
              lineStyle: {
                color: [
                  [
                    1,
                    {
                      type: "radial",
                      x: 0.5,
                      y: 0.59,
                      r: 0.6,
                      colorStops: [
                        {
                          offset: 0.72,
                          color: "#032046",
                        },
                        {
                          offset: 0.94,
                          color: "#086989",
                        },
                        {
                          offset: 0.98,
                          color: "#0FAFCB",
                        },
                        {
                          offset: 1,
                          color: "#0EA4C1",
                        },
                      ],
                    },
                  ],
                ],
                width: 1000,
              },
            },
            // 分隔线
            splitLine: {
              show: false,
            },
            // 刻度线
            axisTick: {
              show: false,
            },
            // 刻度标签
            axisLabel: {
              show: false,
            },
            // 仪表盘指针
            pointer: {
              show: true,
              length: "95%",
              width: 5, // 指针粗细
            },
            // 仪表盘指针样式
            itemStyle: {
              color: "#01eaf8",
            },
            data: [
              {
                value: dataArr,
              },
            ],
            detail: {
              show: false,
            },
          },
          // 中间半圆装饰
          {
            type: "gauge",
            radius: "110%", // 大小
            center: ["50%", "127%"],
            axisLine: {
              show: true,
              lineStyle: {
                // 轴线样式
                width: 4, // 宽度
                color: [
                  [
                    1,
                    {
                      type: "radial",
                      x: 0.5,
                      y: 0,
                      r: 0.6,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00f3f9", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#000", // 100% 处的颜色
                        },
                      ],
                    },
                  ],
                ],
              },
            },
            axisTick: {
              // 刻度
              show: false,
            },
            splitLine: {
              // 分割线
              show: false,
            },
            axisLabel: {
              // 刻度标签
              show: false,
            },
            pointer: {
              // 仪表盘指针
              show: false,
            },
            detail: {
              // 仪表盘详情
              show: false,
            },
          },
        ],
      };
      //把配置项给实例对象
      this.chartInstance.setOption(this.option, true);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.sys_charts.offsetWidth / 18;
      const adapterOption = {};
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>
<style lang="scss" scoped>
.sys_charts {
  width: 2rem;
  height: 2rem;
}
</style>

