<!--
 * @Author: your name
 * @Date: 2021-12-05 16:50:40
 * @LastEditTime: 2021-12-05 17:01:00
 * @LastEditors: Please set LastEditors
 * @Description: 车辆管理 - 车辆烘干 - 温度详情图
 * @FilePath: \hyyfClient\src\views\BioSafety\chart\ChartCarDrying.vue
-->
<template>
  <div id="chart-car-dring" style="width: 100%; height: 100%"></div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ChartPigTemp",
  computed: {
    ...mapState(["color"]),
  },
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    tempList: {
      type: Object,
      default: function() {
        return {
          timeList: [],
          tempList: [],
        };
      },
    },
  },
  watch: {
    color(newVal) {
      if (newVal) {
        this.myChart.clear();
        this.init();
      }
    },
    tempList: {
      handler(newVal) {
        if (newVal) {
          this.myChart.clear();
          this.init();
        }
      },
      deep: true,
    },
  },
  methods: {
    init() {
      let start = 0;
      let end = this.tempList.timeList.length - 1;
      let time = this.tempList.timeList;
      let data = this.tempList.tempList;
      // let name = this.tempList.name;
      // this.tempList.list.forEach((item) => {
      //   time.push(item.createTime);
      //   data.push(item.value);
      // });
      let options = {
        // title: {
        //   text: `${name}温度曲线`,
        //   left: "center",
        // },
        tooltip: {
          trigger: "axis",
        },
        color: [this.color],
        dataZoom: [
          {
            type: "inside",
            startValue: start,
            endValue: end,
            show: false,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: time,
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#6e7079",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "温度统计情况",
            axisLabel: {
              formatter: "{value}℃",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#6e7079",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: `${name}`,
            type: "line",
            // stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              color: this.color,
              borderColor: this.color,
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    fontSize: 14,
                  },
                },
              },
            },
            data: data,
          },
        ],
      };
      this.myChart.setOption(options);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(
      document.getElementById("chart-car-dring")
    );
    this.init();
  },
};
</script>

<style scoped></style>
