<template>
  <div id="rose-chart2"  style="flex:1" >
    <div :id="pieId" class="pie-chart-container"></div>
  </div>
</template>

<script>
function getRecentSixMonths() {
    const months = [];
    const today = new Date();

    for (let i = 5; i >= 0; i--) {
        const date = new Date(today);
        date.setMonth(today.getMonth() - i);

        const month = date.getMonth() + 1; // 月份从0开始，所以要加1

        // 格式化为 'X月'
        const formattedMonth = `${month}月`;
        months.push(formattedMonth);
    }

    return months;
}
import * as echarts from 'echarts';
export default {
  name: 'RoseChart',
  props: {
    pieId: {
      type: String,
    },
    chartData: {
      type: Object,
    },
    dataType: {
    }
  },
  data() {
    return {
      option: {}
    }
  },
  methods: {
    createData() {

      var myChart = echarts.init(document.getElementById(this.pieId));
      console.log(myChart)
      this.option = {
        title: {
          text: '月生产情况',
          subtext: '完成率',
          subtextStyle:{
            color:'#fff'
          },
          textStyle:{
            color:'#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: this.dataType == '整机' ?['机芯1线', '机芯2线', '盖板线'] : ['整机线'],
          textStyle:{
            color:'#fff'
          }
        },
        toolbox: { 
        },
        calculable: true,
        xAxis:[
        {
            type: 'category',
            axisLine:{
              lineStyle:{
                color:'#fff'
              }
            },
            // prettier-ignore
            data:getRecentSixMonths(),
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine:{
              lineStyle:{
                color:'#fff'
              }
            },
          }
        ],
        series:
        this.dataType == '整机' ?
        [
          {
            name: '整机线',
            type: 'bar',
            data: [
            75, 65, 68, 69, 40, 82
            ],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]:
        [
          {
            name: '机芯1线',
            type: 'bar',
            data: [
            75, 65, 68, 69, 40, 82
            ],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '机芯2线',
            type: 'bar',
            data: [
              70, 75, 88, 85, 97, 85, 75, 78, 59, 80, 82, 63
            ],
            markPoint: {
              data: [
                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '盖板线',
            type: 'bar',
            data: [
              80, 85, 78, 75, 67, 45, 55, 68, 49, 50, 72, 93
            ],
            markPoint: {
              data: [
                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };
      myChart.setOption(this.option);
    },
    // randomExtend (minNum, maxNum) {
    //   if (arguments.length === 1) {
    //     return parseInt(Math.random() * minNum + 1, 10)
    //   } else {
    //     return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
    //   }
    // }
  },
  mounted() {
    const { createData } = this

    createData()

    // setInterval(createData, 100000)
  }
}
</script>

<style lang="less">
#rose-chart2 {
  box-sizing: border-box;
  color: white; 

  .pie-chart-container {
    height: 100%
  }
}
</style>
