<template>
    <div id="operationEchart" ></div>
</template>

<script>
export default {
name: "echarsDemo",
 props: {
  ydata: {
      default: () => false,
            type: [Array, Boolean],
            required: true
    },
  xdata: {
      default: () => false,
            type: [Array, Boolean],
            required: true
    },
  },
  data(){
  return{

  };
  },
  watch:{
    ydata:{
      handler:function(newV){
        console.log("newV",newV)
         this.getLoadEcharts()
      }
    },
    xdata:{
      handler:function(newV1){
         console.log("newV1",newV1)
         this.getLoadEcharts()
      }
    }
  },
  mounted() {
  this.getLoadEcharts()
  console.log("111",this.xdata);
   console.log("222",this.ydata);
  },
  methods:{
  getLoadEcharts(){
    var myChart = this.$echarts.init(
      document.getElementById("operationEchart")
    );
    // let value = [5, 7, 8, 9, 10, 11, 13, 15, 16, 14, 13, 12, 8, 6, 5, 4, 5, 6, 7, 8, 10, 11, 10, 8,12,13,9,6]; 
    let value = this.ydata
   let min = Math.min(...value); //计算最小值
   let max = Math.max(...value); //计算最大值
    var option = {
      tooltip: {
        trigger: 'axis'
      },
      color:['#52F478'],
      icon: "circle",
      // legend: {
      //   x:'580px',
      //   y: '30px',
      //   data: [{
      //     name: '月',
      //     icon:'none'
      //   },
      //     {
      //       name: '日',
      //        icon:'none'
      //     }],
      //   textStyle:{
      //     fontSize: 14,//字体大小
      //     color: '#BBF6FF',//字体颜色
         
      //   },
      //   selectedMode: 'single',
      // },
      grid: {
        left: '5px',
        right: '5px',
        bottom: '5px',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        name:'',
        nameGap:'16',
        show:true,
        boundaryGap:false,
        axisLabel:{
          textStyle:{
            color:'#FFFFFF'
          }
        },
         axisTick:{       
          show:false
        },
        splitArea : {
          show : false,
        },
        splitLine : {
          show :false,
        },
        axisLine: {
          show:false,
          lineStyle:{
            color:'#BBF6FF',
            width:2,
          },
          symbol:['none','arrow']
        },
        // data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
        data:this.xdata
        
      },
      yAxis: {
        type: 'value',
        name:'单位: 次',
        show: true,
        nameTextStyle: {
          color:'#ffffff'
        },
        axisLabel:{
          textStyle:{
            color:'#ffffff'
          }
        },
         axisTick:{       //y轴刻度线
          show:true
        },
        splitArea : {
          show : false,
        },
        splitLine : {
          show: true,
          lineStyle:{
            color: 'rgb(8,99,116)',
            width:1,
          },
        },
        axisLine: {
          show:false,
          lineStyle:{
            color:'rgb(8,99,116)',
            width:1,
          },
          symbol:['none','arrow']
        },
      },
      series: [
        {
          // name:'月',
          name:'故障次数',
          type: 'line',
          smooth: true,
          lineStyle:{
            normal:{
              color:'#4EEE79',
              width:3
            }
          },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgb(9,84,88)'
              }, {
                offset: 1,
                color: 'rgb(9,71,72)'
              }]),
            },
          },
          // data: [5, 7, 8, 9, 10, 11, 13, 15, 16, 14, 13, 12, 8, 6, 5, 4, 5, 6, 7, 8, 10, 11, 10, 8, 12, 13, 9, 6],
           data:this.ydata,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
              ]
              
            },
          symbol: function (value, params) {
                if (value == min || value == max) {
                    return 'circle'; //拐点类型
                } else {
                    return 'none'; //拐点不显示
                }
          },
          itemStyle: {
                normal: {
                    color: '#52F478',
                    borderColor: '#ffffff', //拐点边框颜色
                    lineStyle: {
                        color: '#52F478', //折线颜色
                    },
                },
            },
        },
        // {
        //   name:'日',
        //   type:'line',
        //   smooth: true,
        //   lineStyle:{
        //     normal:{
        //       color:'#FFCD8B',
        //       width:3
        //     }
        //   },
        //   areaStyle: {
        //     normal: {
        //       color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        //         offset: 0,
        //         color: 'rgb(9,84,88)'
        //       }, {
        //         offset: 1,
        //         color: 'rgb(9,71,72)'
        //       }]),
        //     },
        //   },
        //    data:this.ydata,
        //    markPoint: {
        //         data: [
        //             {type: 'max', name: '最大值'},
        //       ]
              
        //     },
        //   symbol: function (value, params) {
        //         if (value == min || value == max) {
        //             return 'circle'; //拐点类型
        //         } else {
        //             return 'none'; //拐点不显示
        //         }
        //   },
        //   itemStyle: {
        //         normal: {
        //             color: '#FFCD8B',
        //             borderColor: '#ffffff', //拐点边框颜色
        //             lineStyle: {
        //                 color: '#FFCD8B', //折线颜色
        //             },
        //         },
        //     },
        // }
      ]
    };

    myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
#operationEchart{
  width: 100%;
  height: 100%;
}
</style>
