<template>
  <div :id="'orderBox'+boxId" class="orderBox"></div>
</template>

<script>
import * as echarts from 'echarts';
let orderBox = null

export default {
  data(){
    return { }
  },
  props:{
    orderTimeData:{
      type:Object,
      default:null,
    },
    boxId:{
      type:String,
      default:'1',
    },
  },
  watch:{
    orderTimeData:{
      handler( nval , oval ) {
        if(JSON.parse(JSON.stringify(nval))!== JSON.parse(JSON.stringify(oval))){
          this.getOptions()
        }
      },
      deep:true
    },
    
  },
  mounted() {
    this.getOptions();
  },
  beforeDestroy() {
    orderBox.clear()
  },
  methods: {
    getOptions() {
      orderBox && echarts.dispose(orderBox)
      orderBox = echarts.init(document.getElementById("orderBox"+this.boxId))
      orderBox.setOption({
        width: 'auto',
        height: 'auto',
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            borderColor: "#407BF2",
            height:24, //组件高度
            // bottom: 10,
            handleStyle: {
              color: "#407BF2"
            },
            fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                //给第一个设置0，第四个设置1，就是垂直渐变
                offset: 0,
                color: "rgba(64,123,242,0.3)"
              },
              {
                offset: 1,
                color: "rgba(64,123,242,0.3)"
              }
            ]),
            backgroundColor: "rgba(37, 46, 100, 0.45)", //两边未选中的滑动条区域的颜色
            showDataShadow: true //是否显示数据阴影 默认auto
          },

          {
            type: "inside",
            realtime: true,
            zoomLock: true,
            preventDefaultMouseMove:true,
            start:0,
            end: 100
          }
        ],
        color: ["#52C8F9", "#5AD8A6", "#FE4F4F"],
        tooltip: {
          trigger: "axis",
          backgroundColor:'rgba(0,0,0,0.88)',//通过设置rgba调节背景颜色与透明度
          borderWidth:'0',
          textStyle : {
            color: '#fff',
            fontSize:14,
           },
          formatter:(params) => {
            let ul='<ul style="padding: 0;margin:0;">'
            let li = '<li style="list-style: none;display:flex;justify-content:space-between;margin:5px;"><span style="margin-right:10px">时间</span><span>'+params[0].axisValue+'</span> </li>'
            ul+=li
            for(let i=0;i<params.length;i++){
              ul+='<li style="list-style: none;display:flex;justify-content: space-between;margin:5px;"><span style="margin-right:10px">'+params[i].seriesName+'</span><span>'+params[i].value+'</span></li>';
            }
            ul+='</ul>'
            return ul
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            crossStyle: { color: '#468DF0' } 
          }
        },
        legend: {
          type: "scroll",
          data: ["上周", "昨日", "今日"],
          pageTextStyle: {
            color: "#407BF2"
          },
          textStyle: {
            fontSize: "12",
            color: "#fff"
          },

        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisTick:{
            alignWithLabel:false
          },
          axisLabel:{
            textStyle: {
              fontSize: "12",
              color: "#fff"
            },
            interval: 11,
            formatter: (item) => {
                return Number(item.split(':')[0])
            }
          },
          data:this.orderTimeData.time,
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false
            },
            nameTextStyle: {
              fontSize: 14,
              color: "#fff"
            },
            axisLabel: {
              textStyle: {
                fontSize: "12",
                color: "#fff"
              },
              formatter:function(value){
                var txt=[];
                if(value>=100000){
                  txt.push((value/100000)*10+'万');
                }else{
                  value = value.toString().replace(/\d+/, function(n) { // 先提取整数部分
                    return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
                      return $1 + ','
                    })
                  })
                  // value = this.numFormat(value)
                  txt.push(value);
                }
                return txt;
              }
            },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: "上周",
            symbol: "none",
            smooth: true,
            data:this.orderTimeData.lastWeekValue,
            type: "line",
            // itemStyle: {
            //     normal: {
            //         lineStyle:{
            //             width:0.5//设置线条粗细
            //         }
            //     }
            // },
            lineStyle: {
              color: "#52C8F9"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#41BEF2"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            }
          },
          {
            name: "昨日",
            smooth: true,
            symbol: "none",
            data:this.orderTimeData.yesterdayValue,
            type: "line",
            // itemStyle: {
            //     normal: {
            //         lineStyle:{
            //             width:0.5//设置线条粗细
            //         }
            //     }
            // },
            lineStyle: {
              color: "#5AD8A6"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#5AD8A6"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
          },
          {
            name: "今日",
            smooth: true,
            symbol: "none",
            data:this.orderTimeData.todayValue,
            type: "line",
            // itemStyle: {
            //     normal: {
            //         lineStyle:{
            //             width:0.5//设置线条粗细
            //         }
            //     }
            // },
            lineStyle: {
              color: "#FE4F4F"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FF744D"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
          }
        ]
      });
    },
    init(){
      setTimeout(function(){
        if(orderBox){ orderBox.resize()}
      },400)
    }
  }
};

</script>

<style scoped>
.orderBox{
  width: 100%;
  height: 85%;
}
</style>
