jn_sis_zhfx/src/components/chart/powerEcharts.vue

<template>
  <!--    72小时功率曲线-->
  <div
    class="powerTitle"
    :style="{ 'margin-bottom': orient ? '10px' : '' }"
    v-if="showTitle"
  >
    24小时功率曲线
  </div>
  <div :id="'main' + id" :style="{ width: width, height: height }"></div>
</template>

<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
export default {
  name: "powerEcharts",
  props: {
    id: {
      type: String,
      default: "",
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    predictFlag: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    CurveValues: {
      type: Array,
      required: true,
    },
    // 单位
    unit: {
      type: String,
      default: "",
    },
    //倍率
    ratio: {
      type: Number,
      default: 1,
    },
    orient: String,
  },

  data() {
    return {
      emptyData: [],
      current: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getChart();
      window.addEventListener("resize", this.resize);
    });
  },
  methods: {
    resize() {
      var chartDom = document.getElementById(`main${this.id}`);
      var myChart = echarts.init(chartDom); // 绘制图表
      myChart.resize();
    },
    getChart() {
      var chartDom = document.getElementById(`main${this.id}`);
      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(5, 187, 76,0.35)",
          borderColor: "#05bb4c",
          formatter: function (params) {
            var htmlStr = `<div style='font-size:16px;color:#fff;margin-bottom:5px'>${params[0].axisValue}</div>`;
            for (var i = 0; i < params.length; i++) {
              htmlStr += `<div style='font-size:16px;color:#fff;margin-bottom:2px'>`;
              var param = params[i];
              var seriesName = param.seriesName; //图例名称
              var value = param.value; //y轴值
              var data = param.data; //单位判断code
              var mark = param.marker; //点
              var unit = `<span style='font-size:14px'>`;

              htmlStr += mark; //一个点
              htmlStr += `${seriesName} : ${
                value != null ? value + unit + " MW</span>" : "--"
              }`; //圆点后面显示的文本
              htmlStr += "</div>";
            }
            return htmlStr;
          },
        },
        legend: {
          top: this.orient ? "0" : "6%",
          right: this.orient ? "16%" : "2%",
          textStyle: {
            fontSize: "12",
            color: "#A4A4A5",
          },
          orient: this.orient ? this.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: 25,
            right: this.orient ? 100 : 28,
            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,
            };
          } 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() {
      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: {
    "$store.state.isFixed"() {
      this.$nextTick(() => {
        this.resize();
      });
    },
    CurveValues: {
      handler() {
        this.$nextTick(() => {
          this.getChart();
          window.addEventListener("resize", this.resize);
        });
      },
    },
  },
};
</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>