<!--
 * @Author: your name
 * @Date: 2021-10-12 10:31:13
 * @LastEditTime: 2021-12-02 13:47:35
 * @LastEditors: Please set LastEditors
 * @Description: 重要指标
 * @FilePath: \hyyfClient\src\views\PdcData\analysis\ImportantLine.vue
-->
<template>
  <div class="important-line">
    <div id="importantLine"></div>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      default: () => [],
    },
    isPercentage: {
      type: Number,
      default: 0,
    },
    isWeight: {
      type: Number,
      default: 0,
    },
    isHead: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    init() {
      let seriesData = [];
      let legendData = [];
      // [
      //     {
      //       name: "头",
      //       type: "line",
      //       smooth: false,
      //       data: [
      //         1500,
      //       ],
      //       itemStyle: {
      //         normal: {
      //           color: "rgb(251,222,107)",
      //           lineStyle: {
      //             color: "rgb(251,222,107)",
      //             width: 3,
      //           },
      //         },
      //       },
      //     },
      //   ],
      this.listData.forEach((item) => {
        // let yName = ["头", "百分比", "千克"];
        legendData.push(item.name);
        seriesData.push({
          name: item.name,
          type: "line",
          smooth: false,
          data: item.value,
        });
      });
      let yAxisData = [];
      if (this.isWeight) {
        yAxisData.push({
          type: "value",
          name: "千克",
          axisLabel: {
            show: true,
            formatter: "{value}",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#6e7079",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        });
      }
      if (this.isPercentage) {
        yAxisData.push({
          type: "value",
          name: "百分比",
          axisLabel: {
            show: true,
            formatter: "{value}",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#6e7079",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        });
      }
      if (this.isHead) {
        yAxisData.push({
          type: "value",
          name: "头",
          axisLabel: {
            show: true,
            formatter: "{value}",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#6e7079",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        });
      }
      console.log("纵轴坐标", yAxisData);
      let options = {
        title: {
          text: "重要指标",
          x: 10,
          y: 0,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legendData,
          padding: [20, 0, 0, 0],
        },
        color: ["#3aa0ff", "#4dcb73", "#fad337", "#f2637b", "#975fe4"],
        grid: {
          top: "20%",
          left: "10%",
          bottom: "10%",
          right: "10%",
        },
        xAxis: [
          {
            type: "category",
            data: this.listData[0].time,
            axisPointer: {
              type: "none",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#6e7079",
              },
            },
            axisTick: {
              show: true,
            },
          },
        ],
        //[
        yAxis: yAxisData,
        series: seriesData,
      };
      this.myChart.setOption(options, true);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("importantLine"));
    // this.init();
  },
  watch: {
    listData(newValue) {
      console.log("重要指标的图", newValue);
      this.init();
    },
  },
};
</script>

<style scoped>
.important-line {
  /* display: inline-block; */
  width: 100%;
  height: 300px;
}
#importantLine {
  width: 100%;
  height: 100%;
}
</style>
