hb_sis_zhfx/src/views/sampleDatabase/performance/performanceEcharts.vue

<template>
  <div class="chart" :id="id"></div>
</template>

<script>
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";
import ecStat from "echarts-stat";
export default {
  components: {
    ecStat,
  },
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    // 传入数据
    data: {
      type: Array,
      default: () => [
        [96.24, 11.35],
        [33.09, 85.11],
        [57.6, 36.61],
        [36.77, 27.26],
        [20.1, 6.72],
        [45.53, 36.37],
        [110.07, 80.13],
        [72.05, 20.88],
        [39.82, 37.15],
        [48.05, 70.5],
        [0.85, 2.57],
        [51.66, 63.7],
        [61.07, 127.13],
        [64.54, 33.59],
        [35.5, 25.01],
        [226.55, 664.02],
        [188.6, 175.31],
        [81.31, 108.68],
      ],
    },
    dotName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      id: "",
      chart: null,
      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
      xdata: [],
    };
  },
  methods: {
    resize() {},
    initChart() {
      const chart = echarts.init(this.$el);
      echarts.registerTransform(ecStat.transform.regression);
      let option = {
        legend: {
          show: true,
          data: ["实发功率","理论功率", "实时风速"],
          right: 120,
          icon: "ract",
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontSize: "14px",
            color: "#fff",
          },
        },
        dataset: [
          {
            source: this.data,
          },
          {
            transform: {
              type: "ecStat:regression",
              config: {
                method: "polynomial",
                order: 3,
              },
            },
          },
        ],
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              interval:
                Number((this.xdata.length / 6).toFixed(0)) > 2
                  ? Number((this.xdata.length / 6).toFixed(0))
                  : 0,
              showMinLabel: true,
              showMaxLabel: true,
              formatter: "{value}",
              fontSize: 12,
              textStyle: {
                color: "#606769",
              },
            },
            axisLine: {
              show: false,
            },
            data: this.xdata,
          },
        ],

        // {
        //   name: "时间",
        //   splitLine: {
        //     lineStyle: {
        //       color: partten.getColor("gray") + 55,
        //       type: "dashed",
        //     },
        //   },
        //   splitNumber: 20,
        //   data: this.xAxisData,
        // },
        yAxis: [
          {
            name: "功率(kWh)",
            type: "value",
            axisTick: {
              show: false,
              length: 1,
            },
            splitLine: {
              lineStyle: {
                color: partten.getColor("gray") + 55,
                type: "dashed",
              },
            },
          },
          {
            name: "风速(m/s)",
            type: "value",
            axisTick: {
              show: false,
              length: 1,
            },
            splitLine: {
              lineStyle: {
                color: partten.getColor("gray") + 55,
                type: "dashed",
              },
            },
          },
        ],
        series: [],
      };
      if (this.data.power.length > 0) {
        let arr = [];
        this.data.power.forEach((item) => {
          arr.push(item.doubleValue);
        });
        let obj = {
          name: "实发功率",
          type: "line",
          data: arr,
          smooth: true, //平滑展示
          yAxisIndex: 0,
        };

        option.series.push(obj);
      }
      if (this.data.llglpower.length > 0) {
        let arr = [];
        this.data.llglpower.forEach((item) => {
          arr.push(item.doubleValue);
        });
        let obj = {
          name: "理论功率",
          type: "line",
          data: arr,
          smooth: true, //平滑展示
          yAxisIndex: 0,
        };

        option.series.push(obj);
      }
      if (this.data.speed.length > 0) {
        let arr = [];
        this.data.speed.forEach((item) => {
          arr.push(item.doubleValue);
        });
        let obj = {
          name: "实时风速",
          type: "line",
          data: arr,
          smooth: true, //平滑展示
          yAxisIndex: 1,
        };
        option.series.push(obj);
      }
      chart.clear();
      chart.setOption(option);

      this.resize = function () {
        chart.resize();
      };

      window.addEventListener("resize", this.resize);
    },
  },
  created() {
    this.id = "pie-chart-" + util.newGUID();
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.style.width = this.width;
      this.$el.style.height = this.height;
      this.initChart();
    });
  },
  updated() {
    let data = [];
    if (this.data?.power.length > 0 || this.data?.speed.length > 0)
      this.data?.power.forEach((value, index) => {
        data.push(new Date(value.ts).formatDate("yyyy-MM-dd hh:mm"));
      });
    this.xdata = data;
    this.$nextTick(() => {
      this.initChart();
    });
  },
  unmounted() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

<style lang="less">
.chart {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>