<template>
  <div ref="chart" :style="{ width: '100%', height: '600px' }"></div>
</template>
<script>
import Echarts from "echarts";

export default {
  data() {
    return { chart: null };
  }, //图表实例
  props: {
    obj: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    this.init();
    console.log("父组件传递过来的值", this.obj);
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  methods: {
    init() {
      // 初始化echarts实例
      this.chart = Echarts.init(this.$refs.chart);
      // let date = [this.orderDetail.startTime,this.orderDetail.endTime];
      // let arr = [this.orderDetail.startTime,this.orderDetail.endTime]
      // let data = [this.orderDetail.startTime,this.orderDetail.endTime]
      // console.log(date,arr,data)
      // 绘制图表
      let option = {
        tooltip: {
          trigger: "axis",
          // position: function (pt) {
          //   return [pt[0], '10%'];
          // }
          axisPointer: {
            type: "cross",
          },
        },
        title: {
          left: "left",
          text: "电压、电流、功率数据表",
        },
        toolbox: {
          // 右上角的图标
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            // dataZoom: {
            //   yAxisIndex: 'none'
            // },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["电流", "电压", "功率",'SOC'],
        },
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          // boundaryGap: false,
          // data: date // x轴数据
          // data:['2020-12.20','2021-12.20']
          data: this.obj.realTimeMonitorDataList
            .map((str) => {
            return str.time.replace(" ", "\n");
          }),
        },
        yAxis: [
          {
            type: "value",
            // boundaryGap: [0, '100%']
            name: "电流",
            position: "left",
            alignTicks: true,
            axisLabel: {
              formatter: "{value} A",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#5470C6",
              },
            },
            // axisPointer: {
            //   snap: true
            // }
          },
          {
            type: "value",
            // boundaryGap: [0, '100%']
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#EE6666",
              },
            },
            name: "电压",
            position: "right",
            offset: 60,
            axisLabel: {
              formatter: "{value} V",
            },
          },
          {
            type: "value",
            position: "right",
            // boundaryGap: [0, '100%']
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#91CC75",
              },
            },
            name: "功率",
            axisLabel: {
              formatter: "{value}W",
            },
          },
          {
            type: "value",
            position: "right",
            // boundaryGap: [0, '100%']
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#91CC75",
              },
            },
            name: "SOC",
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        // dataZoom: [
        //   {
        //     type: 'inside',
        //     start: 0,
        //     end: 10
        //   },
        //   {
        //     start: 0,
        //     end: 10
        //   }
        // ],
        series: [
          {
            name: "电流",
            type: "line",
            // symbol: 'none',
            smooth: true,
            yAxisIndex: 0,
            // sampling: 'lttb',
            tooltip: {
              valueFormatter: function (value) {
                return value + " V/A";
              },
            },
            // itemStyle: {
            //   color: 'rgb(255, 70, 131)'
            // },
            // data: data
            data: this.obj.realTimeMonitorDataList
              .map((item) => {
              return item.instantCurrent;
            }),
          },
          {
            name: "电压",
            type: "line",
            yAxisIndex: 1,
            // symbol: 'none',
            // sampling: 'lttb',
            tooltip: {
              valueFormatter: function (value) {
                return value + "V";
              },
            },
            // itemStyle: {
            //   color: 'pink'
            // },
            data: this.obj.realTimeMonitorDataList
              .map((item) => {
              return item.instantVoltage;
            }),
            // data: arr
          },
          {
            name: "功率",
            type: "line",
            yAxisIndex: 2,
            // symbol: 'none',
            // sampling: 'lttb',
            tooltip: {
              valueFormatter: function (value) {
                return value + " W";
              },
            },
            // itemStyle: {
            //   color: 'black'
            // },
            data: this.obj.realTimeMonitorDataList
              .map((item) => {
              return item.instantPower;
            }),
          },
          {
            name: "SOC",
            type: "line",
            yAxisIndex: 3,
            // symbol: 'none',
            // sampling: 'lttb',
            tooltip: {
              valueFormatter: function (value) {
                return value + " W";
              },
            },
            // itemStyle: {
            //   color: 'black'
            // },
            data: this.obj.realTimeMonitorDataList
              .map((item) => {
              return item.soc;
            }),
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>
