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

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

export default {
  props:{
    meansTimeData:{
      type:Object,
      default:null,
    },
    boxId:{
      type:String,
      default:'1',
    },
  },
  data() {
    return {};
  },
  watch:{
    meansTimeData:{
      handler( nval , oval ) {
        if(JSON.parse(JSON.stringify(nval))!== JSON.parse(JSON.stringify(oval))){
          this.getOptions()
        }
      },
      deep:true
    }
  },
  mounted() {
    this.getOptions();
  },
  beforeDestroy() {
    meansBox.clear()
  },
  methods: {
    getOptions() {
      meansBox && echarts.dispose(meansBox)
      meansBox = echarts.init(document.getElementById("meansBox"+this.boxId));
      meansBox.setOption({
        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: ["上周", "昨日", "今日"],
          pageIconColor: "#407BF2",
          pageIconInactiveColor: "#407BF2",
          pageIcons: {
            horizontal: [
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAASCAYAAAHK/gXCAAAABGdBTUEAALGPC/xhBQAAAZ1JREFUOBGNU81OAkEM7sCChIs31ihXo28Az4IXzx5NFAgxcjBmjRdfwEQTfBZ9CC8qiQl3A+outd+wHWd/iE6y22n79Zt22iHy19aAj1p9Zt+W22fcrQEfOH844A/xxjBU8GNmI1xNMjSBnlmCHlnD9pibShpgE8+tPcG/MrsyRuRUvioMmSXH38FbWOGQO7ykp7qh3Wlknh0o7POjVNfVCAVAtyABPAigpwDINAdrckwK2Blz+3tOr6IbBRZACkattS/aVD0jkZveX+B7pMxzYhqjLUgYvlWyaZkeOJEcbHCAdsgdND0nbdRoT/VK0LBKptmfMZ0pwFVhu8y/PdQyFeikHDlBB9EXZ8xvMBUCesvb/9QRKHfUQ7B/gstzHQNaFC8okllEX1d4Q/ezyBxqTIHEnjaUAKZIQG0FOpkjgN2SlJ7morxNCQG8AR6hpHttn46HL9kmdaKLEntaY+oJR9ylhG6EsFMGFlsic7WPl+L7C3eiTozxckGnMjonuSwLRGtJlExlLssM0b9JlAwSWSZzOm5U6fbl0rz/AAM3uJDrWJPhAAAAAElFTkSuQmCC",
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAASCAYAAAHK/gXCAAAABGdBTUEAALGPC/xhBQAAAZRJREFUOBGNVL1OAkEQ/gbQAL1cjGDlO2h8CSsrSSy1tOOIhWeiEfUlJBEKX0R9AWNiexqhFxKiGWeW22WPO8Qt2G9mvvnmZwHAO6S41mKuVrDu+eehUrARcd0F1BO0+NE6Cgn4YWDHOhG0edsZFhixxHAN2KDVARF6w2v5FPrERvWepoR8J2C/WMbaR0Qjn+BICmpCBOPQEQjRsEPnartaq8CFIyhgRJJ4oNCUq4e8NWG8iR0POtgkIpnTO7U2H3lmPtTBRfYsLzrthdA1tXW5c6szfWhman2EkV2Bm0Za7toS8mzV7zG+9KlmBEbTEpI7/uxg1xB0VHEWkwCvVNCQd2joyCV1yh5eTZDQlE32EuL00uwg5PuU0zP8bb7I4z6UygjfI4o9zlLoVpE8i7Zj+41l+nBwhX7mieZknYj6c4QsnaXL/qIuUyJLhKyg3qkuMyLKyHxv1ZlzpLtnLmAvI/KXgCSNJOG2UMaN/+tJieQJaDVZ9cngkp5ymjEuJ2IFFlVbJOD8InAcnPLs78RF/gd+AWkEoXJX5PZqAAAAAElFTkSuQmCC"
            ]
          },
          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.meansTimeData.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 + ','
                    })
                  })
                  txt.push(value);
                }
                return txt;
              }
            },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: "上周",
            symbol: "none",
            smooth: true,
            data:this.meansTimeData.lastWeekValue,
            type: "line",
              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.meansTimeData.yesterdayValue,
            type: "line",
             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.meansTimeData.todayValue,
            type: "line",
             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(meansBox){meansBox.resize() }
      },400)
    }
  }
};

</script>

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