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

<script>
export default {
name: "echarsDemo",
 props: {
  ydata: {
      default: () => false,
            type: [Array, Boolean],
            required: true
    },
    ydata1: {
      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()
      }
    },
     ydata1:{
      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("batchEcharts"));
      //     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 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: {
          // top: "10px",
          left: "6%", //默认10%
          right: "10%", //默认10%
          bottom: "8%", //默认60
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "",
          nameGap: "16",
          show: true,
          boundaryGap: "1%",
          offset: 25,
          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],
          data:this.xdata
        },
        yAxis: [{
          type: "value",
          name: "单位: 分钟",
          show: true,
          offset: 48,
          id:0,
          nameTextStyle: {
            color: "#ffffff",
            padding: [0, -15, 15, 0],
            // verticalAlign: 'top'
            align: "right",
          },
          axisLabel: {
            textStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgb(13,190,196)",
              width: 1,
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgb(8,99,116)",
              width: 1,
            },
            symbol: ["none", "arrow"],
          },
        },{
           type: "value",
          name: "单位: Kg",
          show: true,
          offset: 30,
          id:1,
          nameTextStyle: {
            color: "#ffffff",
            padding: [0, -40, 15, 0],
            // verticalAlign: 'top'
            align: "right",
          },
          axisLabel: {
            textStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgb(13,190,196)",
              width: 1,
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgb(8,99,116)",
              width: 1,
            },
            symbol: ["none", "arrow"],
          },
        }
        ],
        series: [
                   {
            name: "单位: 分钟",
            type: "line",
            smooth: true,
            // symbol: "rect",
            // symbolSize: 10,
            yAxisIndex:0,
            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: [3666, 2666, 1666, 234, 250, 899, 1200, 900, 2000, 666, 999,3666, 2666, 1666, 234, 250, 899, 1200, 900, 2000, 666, 999,1200, 900, 2000, 666, 999],
            data:this.ydata1,
            // markPoint: {
            //   data: [{ type: "max", name: "最大值" }],
            // },
            // symbol: function (value, params) {
            //   if (value == min || value == max) {
            //     return "circle"; //拐点类型
            //   } else {
            //     return "none"; //拐点不显示
            //   }
            // },
            markPoint: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#52F478",
                borderColor: "#52F478", //拐点边框颜色

                lineStyle: {
                  color: "#52F478", //折线颜色
                },
                label: { show: false, color: "#ffffff" },
              },
            },
          },
            {
            name: "单位:kg",
            type: "line",
            smooth: true,
            stack: 'Total',
            yAxisIndex:1,
            // symbol: "rect",
            // symbolSize: 10,
            // lineStyle: {
            //   normal: {
            //     color: "rgb(4,252,254)",
            //     width: 3,
            //   },
            // },
             itemStyle: {
                borderColor: 'transparent',
                color: "rgb(4,252,254)",
                 normal: {
              // 柱形图圆角，初始化效果
              // barBorderRadius: [10, 10, 10, 10],
              color: "rgb(4,252,254)",
            }
              },
            // 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: [1200, 900, 2000, 666, 999,1200, 3666, 2666,  2666, 1666, 234, 250, 899, 1666, 234, 250, 899, 1200, 900, 2000, 666, 999,3666,900, 2000, 666, 999],
            data:this.ydata,
            // markPoint: {
            //   data: [{ type: "max", name: "最大值" }],
            // },
            // symbol: function (value, params) {
            //   if (value == min || value == max) {
            //     return "circle"; //拐点类型
            //   } else {
            //     return "none"; //拐点不显示
            //   }
            // },
            // markPoint: {
            //   show: false,
            // },
            // itemStyle: {
            //   normal: {
            //     color: "#52F478",
            //     borderColor: "#52F478", //拐点边框颜色

            //     lineStyle: {
            //       color: "#52F478", //折线颜色
            //     },
            //     label: { show: false, color: "#ffffff" },
            //   },
            // },
      //        emphasis: {
      //   itemStyle: {
      //     borderColor: 'transparent',
      //     color: 'transparent'
      //   }
      // },
        // data: [1000,2000, 1700, 1400, 1200, 300, 199,2000, 1700, 1400, 1200, 300, 199,2000, 1700, 1400, 1200, 300, 199]
          },
          //  {
          // name: 'Life Cost',
          // type: 'bar',
          // stack: 'Total',
          //  barWidth : 4,
          // label: {
          //   show: false,
          //   position: 'inside'
          // },
          // itemStyle: {
          //       borderColor: 'transparent',
          //       color: "rgb(4,252,254)",
          //        normal: {
          //     // 柱形图圆角，初始化效果
          //     barBorderRadius: [15, 15, 15, 15],
          //     color: "rgb(4,252,254)",
          //   }
          //     },
          //   data: [2900, 1200, 300, 200, 900, 300,2900, 1200, 300, 200, 900, 300,2900, 1200, 300, 200, 900, 300]
          // }
        ],
      };

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

<style scoped>
#batchEcharts{
   width: 90%;
          height: 95%;
}
</style>