<template>
  <div ref="chart" class="chart-container"></div>
</template>

<script>
import echarts from "echarts";
import { currentGET } from "api/modules";

export default {
  name: "LeftBottomChart",
  data() {
    return {
      monthItems: [],
      monthHydrogen: [],
      monthMileage: [],
      monthCarbon: [],
      seriesData: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    };
  },
  mounted() {
    this.getMonthData();
  },
  methods: {
    getMonthData() {
      currentGET("big2").then((res) => {
        console.log("月度碳减排");
        this.monthItems = res.data;
        console.log(this.monthItems);
        this.monthItems.forEach((item) => {
          //console.log(item.monthHydrogen);
          //console.log(item.monthMileage);
          // this.monthHydrogen.push(item.monthHydrogen);
          // this.monthMileage.push(item.monthMileage);
          let month = parseInt(item.months.substring(5, 7));
          this.monthMileage[month - 1] = item.monthMileage;
          this.monthCarbon[month - 1] = item.monthCarbon;
          this.monthHydrogen[month - 1] = item.monthHydrogen;
        });
        //console.log('用氢量：'+ this.monthHydrogen);
        //console.log('里程数：'+ this.monthMileage);
        this.initChart();
      });
    },
    initChart() {
      let chart = echarts.init(this.$refs.chart);
      let option = {
        grid:{
          left:'13%'
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 0, 0, 0.8)",
          borderColor: "#333333",
          textStyle: { color: "#ffffff" },
          // formatter: (params) => {
          //   console.log(params)
          //   return `用氢量：${params[0].value}kg<br/>用电量：${params[1].value}kWh<br/>行驶里程：${params[2].value}km`;
          // }
          formatter: (params) => {
            console.log(params);
            return `用氢量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
          },
        },
        legend: {
          //data: ['用氢量', '用电量', '行驶里程'],
          data: ["用氢量", "行驶里程"],
          //data: ['用电量', '行驶里程'],
          textStyle: { color: "#333333" },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLine: { lineStyle: { color: "#666666" } },
          axisLabel: { color: "#333333" },
        },
        yAxis: {
          type: "value",
          axisLine: { lineStyle: { color: "#666666" } },
          splitLine: { lineStyle: { color: "#e0e0e0" } },
          axisLabel: {
            color: "#333333",
            //align: 'left',
            // margin:70,
            //width: 100, //将内容的宽度固定
            // overflow: 'truncate', //超出的部分截断
            formatter: "{value}kg",
          },
        },
        series: [
          {
            name: "用氢量",
            type: "line",
            //data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
            data: this.monthHydrogen,
            // data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: { color: "#3399FF" },
          },
          // {
          //   name: '用电量',
          //   type: 'line',
          //   //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500],
          //   data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          //   itemStyle: { color: '#3f89ff' }
          // },
          {
            name: "行驶里程",
            type: "line",
            //data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000],
            data: this.monthMileage,
            //data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: { color: "#a060ff" },
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style scoped>
.chart-container {
  width: 110%;
  height: 270px;
}
</style>
