fd_dwgz_zhyw/src/views/Home/components/windChartCom.vue

<template>
  <div :id="chartId" :style="{ width: width, height: height }"></div>
</template>

<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
import { h } from "vue";
export default {
  name: "windChartCom",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "70vh",
    },
    CurveTitle: {
      type: String,
      required: true,
    },
    chartShow: {
      type: Boolean,
      required: true,
      default: false,
    },
    windCurveValues: {
      type: Array,
      required: true,
    },
    chartId: {
      type: String,
      required: true,
    },
    ratio: {
      type: Number,
      default: 1,
    },
    unit: {
      type: String,
      default: "",
    },
  },
  async created() {},
  mounted() {
    this.$nextTick(() => {
      this.getChart();
    });
  },
  data() {
    return {
      emptyData: [],
    };
  },
  methods: {
    getChart() {
      var chartDom = document.getElementById(this.chartId);
      var myChart = echarts.init(chartDom); // 绘制图表
      var units = this.unit;
      var options = {
        tooltip: {
          trigger: "axis",

          textStyle: {
            fontSize: 16,
            fontFamily: "楷体",
            color: "white", //设置文字颜色
            fontWeight: "400",
          },
          backgroundColor: "rgba(5, 187, 76,0.35)",
          borderColor: "#05bb4c",
          formatter: function (params) {
            var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
            for (var i = 0; i < params.length; i++) {
              htmlStr += `<div style='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[1] != null ? value[1] + unit + ` ${units}</span>` : "--"
              }`; //圆点后面显示的文本
              htmlStr += "</div>";
            }

            return htmlStr;
          },
        },
        legend: {
          top: "0",
          right: "2%",
          textStyle: {
            fontSize: "12",
            color: "#A4A4A5",
          },
          orient: "vertical",
          icon: "roundRect",
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 7,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606769",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#606769", //x轴的颜色
              width: 1, //轴线的宽度
            },
          },
          //   splitLine: { show: false },
          //   data: this.windCurveValues.map((item) => item.dateTime),
        },
        yAxis: {
          name: this.unit,
          nameTextStyle: {
            fontSize: 16,
            align: "right",
          },

          type: "value",
          splitNumber: this.unit == "%" ? 2 : 3,
          max: this.unit == "%" ? "100" : null,
          splitLine: {
            show: false,
            textStyle: {
              color: "#606769",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#606769", // y轴的颜色
              width: 1, //y轴线的宽度
            },
          },
        },
        grid: [
          {
            left: 80,
            right: 40,
            top: 30,
            bottom: 30,
            containLabel: true,
          },
        ],
        series: [
          {
            name: this.CurveTitle,
            type: "line",
            smooth: true,
            symbol: "none",
            areaStyle: {
              opacity: 0.7,
              color: new echarts.graphic.LinearGradient(2, 2, 0, 2, [
                {
                  offset: 0,
                  color: "rgba(53, 150, 235, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(18, 32, 50, 0.2)",
                },
              ]),
            },
            lineStyle: {
              width: 1,
            },
            color: "#3596EB",
            data: this.windCurveValues.map((item) => {
              return [item.dateTime, item.value];
            }),
          },
        ],
      };
      myChart.setOption(options);
    },
    //处理数据
    getData(datas) {
      let data = [];
      //查询的测点没有数据情况
      if (datas && datas.length > 0) {
        datas.forEach((item) => {
          let result;
          if (item.value) {
            result = (Number(item.value) / this.ratio).toFixed(2);
          } else {
            result = item.value;
          }
          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();
      for (let i = 0; i < 96; i++) {
        timeStamp.push(dayjs(stamp).format("HH:mm"));
        this.emptyData.push("0");
        stamp = parseInt(stamp) + 15 * 60 * 1000;
      }
      timeStamp.push("24:00");
      return timeStamp;
    },
  },
  watch: {
    windCurveValues: {
      handler() {
        this.getChart();
      },
    },
  },
};
</script>

<style lang="less" scoped></style>