<template>
    <div id="statisticsEcharts" ></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.getRuKuEcharts()
      }
    },
    xdata:{
      handler:function(newV1){
         console.log("newV1",newV1)
         this.getRuKuEcharts()
      }
    }
  },
  mounted() {
  this.getRuKuEcharts()
  console.log("111",this.xdata);
   console.log("222",this.ydata);
  },
  methods:{
   getRuKuEcharts() {
      var myChart = this.$echarts.init(
        document.getElementById("statisticsEcharts")
      );
      //     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: "750px",
        //   y: "0px",
        //   itemGap: 0.5,
        //   data: [
        //     {
        //       name: "年",
        //       icon: "none",
        //     },
        //     {
        //       name: "月",
        //       icon: "none",
        //     },
        //     {
        //       name: "日",
        //       icon: "none",
        //     },
        //   ],
        //   textStyle: {
        //     fontSize: 14, //字体大小
        //     color: "#29f0f1", //字体颜色
        //   },
        //   selectedMode: "single",
        // },
        grid: {
          top: "10px",
          left: "5%", //默认10%
          right: "10%", //默认10%
          bottom: "8%", //默认60
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "",
          nameGap: "16",
          show: true,
          boundaryGap: false,
          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],
          data:this.xdata,
        },
        yAxis: {
          type: "value",
          name: "",
          show: true,
          offset: "40",
          // position: 'absolute',
          // boundaryGap: false,
          splitNumber: 10,
          nameTextStyle: {
            color: "#ffffff",
            padding: [0, -15, 30, 0],
            // verticalAlign: 'top'
            align: "right",
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgb(13,190,196)",
              width: 1,
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgb(8,99,116)",
              width: 1,
            },
            symbol: ["none", "arrow"],
          },
              axisLabel:{
                textStyle:{
                 align:'right' ,
                 color: "#ffffff",    // 文字右对齐
            },
            // inside:true,        // 标签刻度朝内
            margin:30,           // 清除默认间距
            padding:[0,10,0,0], // 右边内边距10
          
        },
        },
        series: [
          {
            name: "出库量",
            type: "bar",
            smooth: true,
            // symbol:'rect',
            //  symbolSize:10,
            lineStyle: {
              normal: {
                color: "#29f0f1",
                width: 3,
              },
            },

            // data: [
            //   44444, 55555, 77777, 6666, 66666, 55555, 33333, 88888, 99999,
            //   22222, 33333, 55555,
            // ],
            data:this.ydata,
            markPoint: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: "#29f0f1",
                borderColor: "#29f0f1", //拐点边框颜色

                lineStyle: {
                  color: "#29f0f1", //折线颜色
                },
                label: { show: false, 
                // color: "#ffffff" ,
                 position: 'top', //数值在上方显示
                  textStyle: {  //数值样式
                    color: '#D1DBFF',   //字体颜色
                    fontSize: 11  //字体大小
                  }
                },
              },
            },
          },
          // {
          //   name: "年",
          //   type: "line",
          //   smooth: true,
          //   // symbol:'rect',
          //   //  symbolSize:10,
          //   lineStyle: {
          //     normal: {
          //       color: "#29f0f1",
          //       width: 3,
          //     },
          //   },

          //   data: [
          //     28888, 3444, 6666, 4888, 3444, 2333, 1200, 900, 2000, 666, 44444,
          //     55555,
          //   ],
          //   markPoint: {
          //     show: true,
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#ffffff",
          //       borderColor: "#29f0f1", //拐点边框颜色

          //       lineStyle: {
          //         color: "#29f0f1", //折线颜色
          //       },
          //       label: { show: false, color: "#ffffff" },
          //     },
          //   },
          // },
          // {
          //   name: "月",
          //   type: "line",
          //   smooth: true,
          //   // symbol:'rect',
          //   //  symbolSize:10,
          //   lineStyle: {
          //     normal: {
          //       color: "#29f0f1",
          //       width: 3,
          //     },
          //   },
          //   data: [
          //     28888, 3444, 6666, 4888, 3444, 2333, 1200, 900, 2000, 666, 44444,
          //     55555,
          //   ],
          //   markPoint: {
          //     show: true,
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#ffffff",
          //       borderColor: "#29f0f1", //拐点边框颜色

          //       lineStyle: {
          //         color: "#29f0f1", //折线颜色
          //       },
          //       label: { show: false, color: "#ffffff" },
          //     },
          //   },
          // },
          // {
          //   name: "日",
          //   type: "line",
          //   smooth: true,
          //   // symbol:'rect',
          //   //  symbolSize:10,
          //   lineStyle: {
          //     normal: {
          //       color: "#29f0f1",
          //       width: 3,
          //     },
          //   },
          //   data: [
          //     28888, 3444, 6666, 4888, 3444, 2333, 1200, 900, 2000, 666, 44444,
          //     55555,
          //   ],
          //   markPoint: {
          //     show: true,
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#ffffff",
          //       borderColor: "#29f0f1", //拐点边框颜色

          //       lineStyle: {
          //         color: "#29f0f1", //折线颜色
          //       },
          //       label: { show: false, color: "#ffffff" },
          //     },
          //   },
          // },
        ],
      };

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

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