<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) => {
              let month = parseInt(item.months.substring(5,7));
              this.monthMileage[month-1] = item.monthMileage==null?0:item.monthMileage;
              this.monthCarbon[month-1] = item.monthCarbon==null?0:item.monthCarbon;
            // this.monthHydrogen.push(item.monthHydrogen);
            // this.monthMileage.push(item.monthMileage);
            // this.monthCarbon.push(item.monthCarbon);
          });
          //console.log('用氢量：'+ this.monthHydrogen);
          //console.log('里程数：'+ this.monthMileage);
          this.initChart();
        });
    },
    initChart() {
      let chart = echarts.init(this.$refs.chart);
      let option = {
        grid:{
          left:'15%'
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            console.log(params)
            return `碳减排：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
          }
        },
        legend: {
          //data: ['用氢量', '用电量', '行驶里程'],
          data: ['碳减排(kg)','行驶里程(km)'],
          textStyle: { color: '#000000' }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.seriesData,
          axisLine: { lineStyle: { color: '#000000' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#000000' } },
          splitLine: { lineStyle: { color: '#091a40' } },
          axisLabel: {
            formatter: '{value}kg'
          }
        },
        series: [
          // {
          //   name: '用氢量(kg)',
          //   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: this.monthCarbon,
          //   itemStyle: { color: '#3f89ff' }
          // },
          {
            name: '碳减排(kg)',
            type: 'line',
            //data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
             data: this.monthCarbon,
            // data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: { color: '#3399FF' }
          },
          {
            name: '行驶里程(km)',
            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: 300px;
}
</style>
