fd_dwgz_zhyw/src/views/windAnalysis/phdffx.vue

<template>
  <div id="phdffx">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="wpId"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="
                (wpId) => {
                  getTurbines();
                }
              "
            >
              <el-option
                v-for="item in wpList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">机组：</div>
          <div class="search-input">
            <el-select
              v-model="wtId"
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in wtList"
                :key="item.id"
                :label="item.nemCode"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">开始日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="startDate"
              type="date"
              placeholder="开始日期"
              popper-class="date-select"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">结束日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="endDate"
              type="date"
              placeholder="开始日期"
              popper-class="date-select"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="getCharts()">查询</button>
        </div>
      </div>
    </div>
    <div class="mg-b-16">
      <panel :title="'偏航对风风速分析'" :showLine="false">
        <!-- <LineChart :list="statusData" :units="['']" :height="'220px'" /> -->
        <div class="chart" id="linechart1"></div>
      </panel>
    </div>
    <div class="mg-b-16">
      <panel :title="'偏航对风功率分析'" :showLine="false">
        <div class="chart" id="linechart2"></div>
      </panel>
    </div>
    <div class="mg-b-16">
      <panel :title="'偏航对风分析'" :showLine="false">
        <div class="chart" id="linechart3"></div>
      </panel>
    </div>
    <el-dialog
      :title="'偏航对风分析明细'"
      v-model="dialogShow"
      width="80%"
      top="10vh"
      custom-class="modal dBody"
      :close-on-click-modal="true"
    >
      <div class="chart" id="linechartDialog"></div>
    </el-dialog>
  </div>
</template>
<script>
import LineChart from "../../components/chart/line/normal-line-chart.vue";
import Panel from "../../components/coms/panel/panel.vue";
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";
import api1 from "@api/economic/index.js";
import api from "@api/wisdomOverhaul/energy/index.js";

export default {
  name: "phdffx",
  components: { LineChart, Panel },
  data() {
    return {
      wpList: [],
      wpId: "GJY_FDC",
      wtList: [],
      wtId: "GJY01_001",
      startDate: "",
      endDate: "",
      line1XData: [],
      line2XData: [],
      dialogShow: false,
    };
  },
  created() {
    this.getStations();
    this.getTurbines();
    let end = new Date();
    let start = new Date();
    start.setDate(1);
    this.endDate = end.formatDate("yyyy-MM-dd");
    this.startDate = start.formatDate("yyyy-MM-dd");

    this.getCharts();
  },
  updated() {
    this.getCharts();
  },
  methods: {
    // 场站
    getStations() {
      api1
        .getWpList({
          type: "-1",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.wpList = res.data.data;
            this.wpId = res.data.data[0].id;
            this.getTurbines();
          }
        });
    },
    getTurbines() {
      api1
        .getWtList({
          wpId: this.wpId,
        })
        .then((res) => {
          if (res.code === 200) {
            this.wtList = res.data;
            this.wtId = res.data[0].id;
          }
        });
    },

    getCharts() {
      this.$nextTick(() => {
        this.getChart1();
        // this.getChart2();
        // this.getChart3();
      });
    },

    getChart1() {
      api
        .yawGetPassRate({
          wtId: this.wtId,
          beginDate: this.startDate,
          endDate: this.endDate,
          type: 2,
        })
        .then((res) => {
          if (res && res.data && res.data.data) {
            const xData = [];
            const lData = [];
            res.data.data.forEach((e) => {
              xData.push(e.speed);
              lData.push(e.passrate);
            });
            this.line1XData = xData;
            let option = {
              color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
              tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(0,0,0,0.4)",
                borderColor: partten.getColor("gray"),
                textStyle: {
                  color: "#fff",
                  fontSize: util.vh(16),
                },
              },
              legend: {
                show: false,
                data: ["合格率（%）"],
                right: 56,
                icon: "circle",
                itemWidth: 6,
                inactiveColor: "#606769",
                textStyle: {
                  color: partten.getColor("grayl"),
                  fontSize: 12,
                },
              },
              grid: {
                top: util.vh(40),
                left: util.vh(60),
                right: util.vh(100),
                bottom: util.vh(24),
              },
              xAxis: [
                {
                  name: "风速（m/s）",
                  type: "category",
                  boundaryGap: false,
                  axisLabel: {
                    formatter: "{value}",
                    fontSize: util.vh(14),
                    textStyle: {
                      color: partten.getColor("gray"),
                    },
                  },
                  data: xData,
                },
              ],
              yAxis: [
                {
                  type: "value",
                  name: "合格率（%）",
                  axisLabel: {
                    formatter: "{value}",
                    fontSize: util.vh(14),
                  },
                  splitLine: {
                    lineStyle: {
                      color: partten.getColor("gray") + 55,
                      type: "dashed",
                    },
                  },
                },
              ],
              series: [
                {
                  name: "合格率",
                  type: "line",
                  smooth: true,
                  zlevel: 0,
                  lineStyle: {
                    normal: {
                      color: "#05bb4c",
                      width: 1,
                    },
                  },
                  yAxisIndex: 0,
                  data: lData,
                },
              ],
            };
            const chart = echarts.init(document.getElementById("linechart1"));
            chart.clear();
            chart.setOption(option);
            this.resize = function () {
              chart.resize();
            };
            chart.getZr().off("click");
            chart.getZr().on("click", (params) => {
              const pointInPixel = [params.offsetX, params.offsetY];
              if (chart.containPixel("grid", pointInPixel)) {
                let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
                  params.offsetX,
                  params.offsetY,
                ])[0];
                // 图标点击事件
                this.showDetail("2", this.line1XData[xIndex]);
              }
            });
            window.addEventListener("resize", this.resize);
          }
        });

      // const res = await this.API.requestData({
      //   method: "POST",
      //   subUrl: "yaw/getPassRate",
      //   data: {
      //     wtId: this.wtId,
      //     beginDate: this.startDate,
      //     endDate: this.endDate,
      //     type: 2,
      //   },
      // });

      // if (res && res.data && res.data.data) {
      //   const xData = [];
      //   const lData = [];
      //   res.data.data.forEach((e) => {
      //     xData.push(e.speed);
      //     lData.push(e.passrate);
      //   });
      //   this.line1XData = xData;
      //   let option = {
      //     color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
      //     tooltip: {
      //       trigger: "axis",
      //       backgroundColor: "rgba(0,0,0,0.4)",
      //       borderColor: partten.getColor("gray"),
      //       textStyle: {
      //         color: "#fff",
      //         fontSize: util.vh(16),
      //       },
      //     },
      //     legend: {
      //       show: false,
      //       data: ["合格率（%）"],
      //       right: 56,
      //       icon: "circle",
      //       itemWidth: 6,
      //       inactiveColor: "#606769",
      //       textStyle: {
      //         color: partten.getColor("grayl"),
      //         fontSize: 12,
      //       },
      //     },
      //     grid: {
      //       top: util.vh(40),
      //       left: util.vh(60),
      //       right: util.vh(100),
      //       bottom: util.vh(24),
      //     },
      //     xAxis: [
      //       {
      //         name: "风速（m/s）",
      //         type: "category",
      //         boundaryGap: false,
      //         axisLabel: {
      //           formatter: "{value}",
      //           fontSize: util.vh(14),
      //           textStyle: {
      //             color: partten.getColor("gray"),
      //           },
      //         },
      //         data: xData,
      //       },
      //     ],
      //     yAxis: [
      //       {
      //         type: "value",
      //         name: "合格率（%）",
      //         axisLabel: {
      //           formatter: "{value}",
      //           fontSize: util.vh(14),
      //         },
      //         splitLine: {
      //           lineStyle: {
      //             color: partten.getColor("gray") + 55,
      //             type: "dashed",
      //           },
      //         },
      //       },
      //     ],
      //     series: [
      //       {
      //         name: "合格率",
      //         type: "line",
      //         smooth: true,
      //         zlevel: 0,
      //         lineStyle: {
      //           normal: {
      //             color: "#05bb4c",
      //             width: 1,
      //           },
      //         },
      //         yAxisIndex: 0,
      //         data: lData,
      //       },
      //     ],
      //   };
      //   const chart = echarts.init(document.getElementById("linechart1"));
      //   chart.clear();
      //   chart.setOption(option);
      //   this.resize = function () {
      //     chart.resize();
      //   };
      //   chart.getZr().off("click");
      //   chart.getZr().on("click", (params) => {
      //     const pointInPixel = [params.offsetX, params.offsetY];
      //     if (chart.containPixel("grid", pointInPixel)) {
      //       let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
      //         params.offsetX,
      //         params.offsetY,
      //       ])[0];
      //       // 图标点击事件
      //       this.showDetail("2", this.line1XData[xIndex]);
      //     }
      //   });
      //   window.addEventListener("resize", this.resize);
      // }
    },

    getChart2() {
      api
        .yawGetPassRate({
          wtId: this.wtId,
          beginDate: this.startDate,
          endDate: this.endDate,
          type: 1,
        })
        .then((res) => {
          if (res && res.data && res.data.data) {
            const xData = [];
            const lData = [];
            res.data.data.forEach((e) => {
              xData.push(e.power);
              lData.push(e.passrate);
            });
            this.line2XData = xData;
            let option = {
              color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
              tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(0,0,0,0.4)",
                borderColor: partten.getColor("gray"),
                textStyle: {
                  color: "#fff",
                  fontSize: util.vh(16),
                },
              },
              legend: {
                show: false,
                data: ["合格率（%）"],
                right: 56,
                icon: "circle",
                itemWidth: 6,
                inactiveColor: "#606769",
                textStyle: {
                  color: partten.getColor("grayl"),
                  fontSize: 12,
                },
              },
              grid: {
                top: util.vh(40),
                left: util.vh(60),
                right: util.vh(100),
                bottom: util.vh(24),
              },
              xAxis: [
                {
                  name: "功率（kW）",
                  type: "category",
                  boundaryGap: false,
                  axisLabel: {
                    formatter: "{value}",
                    fontSize: util.vh(14),
                    textStyle: {
                      color: partten.getColor("gray"),
                    },
                  },
                  data: xData,
                },
              ],
              yAxis: [
                {
                  type: "value",
                  name: "合格率（%）",
                  axisLabel: {
                    formatter: "{value}",
                    fontSize: util.vh(14),
                  },
                  splitLine: {
                    lineStyle: {
                      color: partten.getColor("gray") + 55,
                      type: "dashed",
                    },
                  },
                },
              ],
              series: [
                {
                  name: "合格率",
                  type: "line",
                  smooth: true,
                  zlevel: 0,
                  lineStyle: {
                    normal: {
                      color: "#05bb4c",
                      width: 1,
                    },
                  },
                  yAxisIndex: 0,
                  data: lData,
                },
              ],
            };
            const chart = echarts.init(document.getElementById("linechart2"));
            chart.clear();
            chart.setOption(option);
            this.resize = function () {
              chart.resize();
            };
            chart.getZr().off("click");
            chart.getZr().on("click", (params) => {
              const pointInPixel = [params.offsetX, params.offsetY];
              if (chart.containPixel("grid", pointInPixel)) {
                let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
                  params.offsetX,
                  params.offsetY,
                ])[0];
                this.showDetail("1", this.line2XData[xIndex] / 100);
              }
            });
            window.addEventListener("resize", this.resize);
          }
        });

      // const res = await this.API.requestData({
      //   method: "POST",
      //   subUrl: "yaw/getPassRate",
      //   data: {
      //     wtId: this.wtId,
      //     beginDate: this.startDate,
      //     endDate: this.endDate,
      //     type: 1,
      //   },
      // });
      // if (res && res.data && res.data.data) {
      //   const xData = [];
      //   const lData = [];
      //   res.data.data.forEach((e) => {
      //     xData.push(e.power);
      //     lData.push(e.passrate);
      //   });
      //   this.line2XData = xData;
      //   let option = {
      //     color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
      //     tooltip: {
      //       trigger: "axis",
      //       backgroundColor: "rgba(0,0,0,0.4)",
      //       borderColor: partten.getColor("gray"),
      //       textStyle: {
      //         color: "#fff",
      //         fontSize: util.vh(16),
      //       },
      //     },
      //     legend: {
      //       show: false,
      //       data: ["合格率（%）"],
      //       right: 56,
      //       icon: "circle",
      //       itemWidth: 6,
      //       inactiveColor: "#606769",
      //       textStyle: {
      //         color: partten.getColor("grayl"),
      //         fontSize: 12,
      //       },
      //     },
      //     grid: {
      //       top: util.vh(40),
      //       left: util.vh(60),
      //       right: util.vh(100),
      //       bottom: util.vh(24),
      //     },
      //     xAxis: [
      //       {
      //         name: "功率（kW）",
      //         type: "category",
      //         boundaryGap: false,
      //         axisLabel: {
      //           formatter: "{value}",
      //           fontSize: util.vh(14),
      //           textStyle: {
      //             color: partten.getColor("gray"),
      //           },
      //         },
      //         data: xData,
      //       },
      //     ],
      //     yAxis: [
      //       {
      //         type: "value",
      //         name: "合格率（%）",
      //         axisLabel: {
      //           formatter: "{value}",
      //           fontSize: util.vh(14),
      //         },
      //         splitLine: {
      //           lineStyle: {
      //             color: partten.getColor("gray") + 55,
      //             type: "dashed",
      //           },
      //         },
      //       },
      //     ],
      //     series: [
      //       {
      //         name: "合格率",
      //         type: "line",
      //         smooth: true,
      //         zlevel: 0,
      //         lineStyle: {
      //           normal: {
      //             color: "#05bb4c",
      //             width: 1,
      //           },
      //         },
      //         yAxisIndex: 0,
      //         data: lData,
      //       },
      //     ],
      //   };
      //   const chart = echarts.init(document.getElementById("linechart2"));
      //   chart.clear();
      //   chart.setOption(option);
      //   this.resize = function () {
      //     chart.resize();
      //   };
      //   chart.getZr().off("click");
      //   chart.getZr().on("click", (params) => {
      //     const pointInPixel = [params.offsetX, params.offsetY];
      //     if (chart.containPixel("grid", pointInPixel)) {
      //       let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
      //         params.offsetX,
      //         params.offsetY,
      //       ])[0];
      //       this.showDetail("1", this.line2XData[xIndex] / 100);
      //     }
      //   });
      //   window.addEventListener("resize", this.resize);
      // }
    },
    getChart3() {
      api
        .yawGetTotalRanges({
          wtId: this.wtId,
          beginDate: this.startDate,
          endDate: this.endDate,
          type: 1,
        })
        .then((res) => {
          if (res && res.data && res.data.data) {
            const xData = [];
            const lData = [];
            const dataMap = res.data.data;
            for (let key in dataMap) {
              let tmpKey = key.replace(/r/, "");
              tmpKey = tmpKey.replace(/_/, "-");
              if (tmpKey < 100) {
                xData.push(tmpKey);
                lData.push(dataMap[key]);
              }
            }
            this.line3Data = lData;
            let option = {
              color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
              tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(0,0,0,0.4)",
                borderColor: partten.getColor("gray"),
                textStyle: {
                  color: "#fff",
                  fontSize: util.vh(16),
                },
              },
              legend: {
                show: false,
                data: ["偏航次数"],
                right: 56,
                icon: "circle",
                itemWidth: 6,
                inactiveColor: "#606769",
                textStyle: {
                  color: partten.getColor("grayl"),
                  fontSize: 12,
                },
              },
              grid: {
                top: util.vh(40),
                left: util.vh(60),
                right: util.vh(130),
                bottom: util.vh(24),
              },
              xAxis: [
                {
                  name: "对风偏差（度）",
                  type: "category",
                  boundaryGap: false,
                  axisLabel: {
                    formatter: "{value}",
                    fontSize: util.vh(14),
                    textStyle: {
                      color: partten.getColor("gray"),
                    },
                  },
                  data: xData,
                },
              ],
              yAxis: [
                {
                  type: "value",
                  name: "数量",
                  axisLabel: {
                    formatter: "{value}",
                    fontSize: util.vh(14),
                  },
                  splitLine: {
                    lineStyle: {
                      color: partten.getColor("gray") + 55,
                      type: "dashed",
                    },
                  },
                },
              ],
              series: [
                {
                  name: "数量",
                  type: "line",
                  smooth: true,
                  zlevel: 0,
                  lineStyle: {
                    normal: {
                      color: "#05bb4c",
                      width: 1,
                    },
                  },
                  yAxisIndex: 0,
                  data: lData,
                },
              ],
            };
            const chart = echarts.init(document.getElementById("linechart3"));
            chart.clear();
            chart.setOption(option);
            this.resize = function () {
              chart.resize();
            };
            window.addEventListener("resize", this.resize);
          }
        });

      // const res = await this.API.requestData({
      //   method: "POST",
      //   subUrl: "yaw/getTotalRanges",
      //   data: {
      //     wtId: this.wtId,
      //     beginDate: this.startDate,
      //     endDate: this.endDate,
      //     type: 1,
      //   },
      // });
      // if (res && res.data && res.data.data) {
      //   const xData = [];
      //   const lData = [];
      //   const dataMap = res.data.data;
      //   for (let key in dataMap) {
      //     let tmpKey = key.replace(/r/, "");
      //     tmpKey = tmpKey.replace(/_/, "-");
      //     if (tmpKey < 100) {
      //       xData.push(tmpKey);
      //       lData.push(dataMap[key]);
      //     }
      //   }
      //   this.line3Data = lData;
      //   let option = {
      //     color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
      //     tooltip: {
      //       trigger: "axis",
      //       backgroundColor: "rgba(0,0,0,0.4)",
      //       borderColor: partten.getColor("gray"),
      //       textStyle: {
      //         color: "#fff",
      //         fontSize: util.vh(16),
      //       },
      //     },
      //     legend: {
      //       show: false,
      //       data: ["偏航次数"],
      //       right: 56,
      //       icon: "circle",
      //       itemWidth: 6,
      //       inactiveColor: "#606769",
      //       textStyle: {
      //         color: partten.getColor("grayl"),
      //         fontSize: 12,
      //       },
      //     },
      //     grid: {
      //       top: util.vh(40),
      //       left: util.vh(60),
      //       right: util.vh(130),
      //       bottom: util.vh(24),
      //     },
      //     xAxis: [
      //       {
      //         name: "对风偏差（度）",
      //         type: "category",
      //         boundaryGap: false,
      //         axisLabel: {
      //           formatter: "{value}",
      //           fontSize: util.vh(14),
      //           textStyle: {
      //             color: partten.getColor("gray"),
      //           },
      //         },
      //         data: xData,
      //       },
      //     ],
      //     yAxis: [
      //       {
      //         type: "value",
      //         name: "数量",
      //         axisLabel: {
      //           formatter: "{value}",
      //           fontSize: util.vh(14),
      //         },
      //         splitLine: {
      //           lineStyle: {
      //             color: partten.getColor("gray") + 55,
      //             type: "dashed",
      //           },
      //         },
      //       },
      //     ],
      //     series: [
      //       {
      //         name: "数量",
      //         type: "line",
      //         smooth: true,
      //         zlevel: 0,
      //         lineStyle: {
      //           normal: {
      //             color: "#05bb4c",
      //             width: 1,
      //           },
      //         },
      //         yAxisIndex: 0,
      //         data: lData,
      //       },
      //     ],
      //   };
      //   const chart = echarts.init(document.getElementById("linechart3"));
      //   chart.clear();
      //   chart.setOption(option);
      //   this.resize = function () {
      //     chart.resize();
      //   };
      //   window.addEventListener("resize", this.resize);
      // }
    },
    showDetail(type, value) {
      this.dialogShow = true;

      api
        .yawGetRanges({
          wtId: this.wtId,
          beginDate: this.startDate,
          endDate: this.endDate,
          type: type,
          value: value,
        })
        .then((res) => {
          if (res && res.data && res.data.data) {
            const xData = [];
            const lData = [];
            const dataMap = res.data.data;
            for (let key in dataMap) {
              let tmpKey = key.replace(/r/, "");
              tmpKey = tmpKey.replace(/_/, "-");
              if (tmpKey < 100) {
                xData.push(tmpKey);
                lData.push(dataMap[key]);
              }
            }
            let option = {
              color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
              tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(0,0,0,0.4)",
                borderColor: partten.getColor("gray"),
                textStyle: {
                  color: "#fff",
                  fontSize: util.vh(16),
                },
              },
              legend: {
                show: false,
                data: ["偏航次数"],
                right: 56,
                icon: "circle",
                itemWidth: 6,
                inactiveColor: "#606769",
                textStyle: {
                  color: partten.getColor("grayl"),
                  fontSize: 12,
                },
              },
              grid: {
                top: util.vh(40),
                left: util.vh(60),
                right: util.vh(130),
                bottom: util.vh(24),
              },
              xAxis: [
                {
                  name: "对风偏差（度）",
                  type: "category",
                  boundaryGap: false,
                  axisLabel: {
                    formatter: "{value}",
                    fontSize: util.vh(14),
                    textStyle: {
                      color: partten.getColor("gray"),
                    },
                  },
                  data: xData,
                },
              ],
              yAxis: [
                {
                  type: "value",
                  name: "数量",
                  axisLabel: {
                    formatter: "{value}",
                    fontSize: util.vh(14),
                  },
                  splitLine: {
                    lineStyle: {
                      color: partten.getColor("gray") + 55,
                      type: "dashed",
                    },
                  },
                },
              ],
              series: [
                {
                  name: "数量",
                  type: "line",
                  smooth: true,
                  zlevel: 0,
                  lineStyle: {
                    normal: {
                      color: "#05bb4c",
                      width: 1,
                    },
                  },
                  yAxisIndex: 0,
                  data: lData,
                },
              ],
            };
            const chart = echarts.init(
              document.getElementById("linechartDialog")
            );
            chart.clear();
            chart.setOption(option);
            this.resize = function () {
              chart.resize();
            };
          }
        });

      // const res = await this.API.requestData({
      //   method: "POST",
      //   subUrl: "yaw/getRanges",
      //   data: {
      //     wtId: this.wtId,
      //     beginDate: this.startDate,
      //     endDate: this.endDate,
      //     type: type,
      //     value: value,
      //   },
      // });
      // if (res && res.data && res.data.data) {
      //   const xData = [];
      //   const lData = [];
      //   const dataMap = res.data.data;
      //   for (let key in dataMap) {
      //     let tmpKey = key.replace(/r/, "");
      //     tmpKey = tmpKey.replace(/_/, "-");
      //     if (tmpKey < 100) {
      //       xData.push(tmpKey);
      //       lData.push(dataMap[key]);
      //     }
      //   }
      //   let option = {
      //     color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
      //     tooltip: {
      //       trigger: "axis",
      //       backgroundColor: "rgba(0,0,0,0.4)",
      //       borderColor: partten.getColor("gray"),
      //       textStyle: {
      //         color: "#fff",
      //         fontSize: util.vh(16),
      //       },
      //     },
      //     legend: {
      //       show: false,
      //       data: ["偏航次数"],
      //       right: 56,
      //       icon: "circle",
      //       itemWidth: 6,
      //       inactiveColor: "#606769",
      //       textStyle: {
      //         color: partten.getColor("grayl"),
      //         fontSize: 12,
      //       },
      //     },
      //     grid: {
      //       top: util.vh(40),
      //       left: util.vh(60),
      //       right: util.vh(130),
      //       bottom: util.vh(24),
      //     },
      //     xAxis: [
      //       {
      //         name: "对风偏差（度）",
      //         type: "category",
      //         boundaryGap: false,
      //         axisLabel: {
      //           formatter: "{value}",
      //           fontSize: util.vh(14),
      //           textStyle: {
      //             color: partten.getColor("gray"),
      //           },
      //         },
      //         data: xData,
      //       },
      //     ],
      //     yAxis: [
      //       {
      //         type: "value",
      //         name: "数量",
      //         axisLabel: {
      //           formatter: "{value}",
      //           fontSize: util.vh(14),
      //         },
      //         splitLine: {
      //           lineStyle: {
      //             color: partten.getColor("gray") + 55,
      //             type: "dashed",
      //           },
      //         },
      //       },
      //     ],
      //     series: [
      //       {
      //         name: "数量",
      //         type: "line",
      //         smooth: true,
      //         zlevel: 0,
      //         lineStyle: {
      //           normal: {
      //             color: "#05bb4c",
      //             width: 1,
      //           },
      //         },
      //         yAxisIndex: 0,
      //         data: lData,
      //       },
      //     ],
      //   };
      //   const chart = echarts.init(document.getElementById("linechartDialog"));
      //   chart.clear();
      //   chart.setOption(option);
      //   this.resize = function () {
      //     chart.resize();
      //   };
      // }
    },
  },
};
</script>
<style lang="less">
#phdffx {
  .chart {
    width: 100%;
    height: 220px;
    display: block;
    margin: auto;
  }
}
</style>