jn_sis_zhfx/src/components/chart/powerEcharts.vue

<template>
  <!--    72小时功率曲线-->
  <div class="powerTitle" v-if="showTitle">24小时功率曲线</div>
  <div id="main" :style="{ width: width, height: height }"></div>
</template>

<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
export default {
  name: "powerEcharts",
  props: {
    showTitle: {
      type: Boolean,
      default: true,
    },
    predictFlag: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "870px",
    },
    height: {
      type: String,
      default: "165px",
    },
    CurveValues: {
      type: Array,
      required: true,
    },
    // 单位
    unit: {
      type: String,
      default: "",
    },
    //倍率
    ratio: {
      type: Number,
      default: 1,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getChart();
    });
  },
  data() {
    return {
      emptyData: [],
      current: 0,
    };
  },
  methods: {
    getChart() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom); // 绘制图表
      var options = {
        title: {},
        axisLine: {
          lineStyle: {
            color: "#272729", //x轴的颜色
            width: 2, //轴线的宽度
          },
        },
        tooltip: {
          // formatter: '{a} <br/>{b} : {c}',
          trigger: "axis",
          backgroundColor: "rgba(0, 0, 0, 0.3)",
          textStyle: {
            color: "white", //设置文字颜色
          },
        },
        legend: {
          top: "6%",
          right: "2%",
          textStyle: {
            fontSize: "12",
            color: "#A4A4A5",
          },
          orient: "vertical",
          icon: "roundRect",
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 7,
        },
        xAxis: {
          boundaryGap: false, //x轴从0开始
          axisLabel: {
            textStyle: {
              color: "#606769",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#606769", //x轴的颜色
              width: 1, //轴线的宽度
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
          splitLine: { show: false },
          data: this.getTimeStanp,
        },
        yAxis: {
          type: "value",
          name: this.unit,
          nameTextStyle: {
            color: "#828484",
            fontSize: 14,
            align: "right",
          },
          splitNumber: 3,
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606769",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#606769", // y轴的颜色
              width: 1, //y轴线的宽度
            },
          },
        },
        grid: [
          {
            left: 50,
            right: 100,
            top: 30,
            bottom: 30,
            containLabel: true,
          },
        ],
        series: this.series,
      };
      myChart.setOption(options);
    },
    //处理数据
    getData(datas) {
      let data = [];
      //查询的测点没有数据情况
      if (datas && datas.length > 0) {
        datas.forEach((item) => {
          let result;
          if (item.value) {
            result = {
              dateTime: item.dateTime,
              value: (item.value / this.ratio).toFixed(2),
            };
          } else {
            result = item;
          }
          data.push(result);
        });
        return data;
      } else {
        return this.emptyData;
      }
    },
  },
  computed: {
    getTimeStanp() {
      // 当日0点时间
      var timeStamp = [];
      let stamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
      if (this.predictFlag) {
        for (let i = 0; i < 48; i++) {
          timeStamp.push(dayjs(stamp).format("HH:mm"));
          this.emptyData.push("0");
          stamp = parseInt(stamp) + 30 * 60 * 1000;
        }
        timeStamp.push("24:00");
      } else {
        for (let i = 0; i < 24; i++) {
          timeStamp.push(dayjs(stamp).format("HH:mm"));
          this.emptyData.push("0");
          stamp = parseInt(stamp) + 60 * 60 * 1000;
        }
      }

      this.emptyData.push("0");
      return timeStamp;
    },
    series() {
      if (this.predictFlag) {
        let series = [
          {
            name: "预测功率",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            color: "#05BB4C",
            data: this.getData(this.CurveValues[0]?.value),
          },
          {
            name: "保证功率",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            color: "#C530C8",
            data: this.getData(this.CurveValues[1]?.value),
          },
          {
            name: "理论功率",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            color: "#FF8700FF",
            data: this.getData(this.CurveValues[2]?.value),
          },
          {
            name: "实际功率",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            color: "#1C99FFFF",
            textStyle: {
              color: "red",
            },
            data: this.getData(this.CurveValues[3]?.value),
          },
        ];
        return series;
      } else {
        let series = [
          {
            name: "保证功率",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            color: "#C530C8",
            data: this.getData(this.CurveValues[0]?.value),
          },
          {
            name: "理论功率",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            color: "#FF8700FF",
            data: this.getData(this.CurveValues[1]?.value),
          },
          {
            name: "实际功率",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 1,
            },
            color: "#1C99FFFF",
            textStyle: {
              color: "red",
            },
            data: this.getData(this.CurveValues[2]?.value),
          },
        ];
        return series;
      }
    },
  },
  watch: {
    CurveValues: {
      handler() {
        this.$nextTick(() => {
          this.getChart();
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
.powerTitle {
  font-size: 16px;
  font-family: "思源黑体";
  font-weight: 400;
  color: #ffffff;
  padding-top: 16px;
  padding-left: 27px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 25px;
    margin-top: -10px;
  }
  .left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 25px;
    background: rgba(67, 81, 107, 0.6);
    border: 1px solid #3b4c6c;
    border-radius: 13px 0px 0px 13px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #b3b3b3;
    &.active {
      background: rgba(0, 70, 199, 0.5);
      color: #ffffff;
    }
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 25px;
    background: rgba(67, 81, 107, 0.6);
    border: 1px solid #3b4c6c;
    border-radius: 0px 13px 13px 0px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #b3b3b3;
    &.active {
      background: rgba(0, 70, 199, 0.5);
      color: #ffffff;
    }
  }
}
</style>