<template>
  <div>
    <div class="label">每周话务员接入统计</div>
    <div id="Traffic" ></div>
  </div>
</template>

<script>
  export default {
    name: "TrafficStatistics",
    data() {
      return {
        xc: '',
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('Traffic'))
        var scale = 0.8
        var xAxisData = ['一', '二', '三', '四', '五', '六', '日', ''];
        var legendData = ['话务量'];
        var serieData = [];
        var metaDate = [100, 140, 100, 120, 300, 230, 130]
        var Auxiliarydata=[]
        var data0=0
        metaDate.forEach(function (s) {
          data0=data0+s
        })
        for (var i=0;i<metaDate.length;i++){
          Auxiliarydata.push(data0/60)
        }
        var rich={
          white:{
            color: "#f7cb32",
            padding:[0,0,-20,0]
          }
        }
        var yname = ' 星期'
        for (var v = 0; v < legendData.length; v++) {
          var serie = {
            name: legendData[0],
            type: "bar",
            stack: "总量",
            // barMaxWidth: 35,
            barGap: "20%",
            itemStyle: {
              normal: {
                color: "#013e48",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff"
                  },
                  position: "top",

                  formatter: function (p) {
                    var s=p.value > 0 ? (p.value) : ''
                    return '{white|'+s+'}'
                  },
                  rich:rich
                }
              }
            },
            data: metaDate,
          }
          var serie1 = {
            name:'ser',
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "#6fd9d0",
                barBorderRadius: 0,
                label: {
                  show: false,
                }
              }
            },
            data: Auxiliarydata
          }
          serieData.push(serie)
          serieData.push(serie1)
        }
        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
        this.xc.setOption({
          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},

          color: colors,
          grid: {left: '4%', top: "18%", bottom: "3%", right: "5%", containLabel: true},
          tooltip: {
            formatter: function (params) {
              if (params[0].axisValue== '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                if(item.seriesName!=='ser'){
                  result += item.seriesName + " : " + item.value + "</br>";
                }
              });

              return '星期'+params[0].axisValue + '<br/> ' + result
            },
            axisPointer: {type: 'line', lineStyle: {width: 0}},
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;'
          },
          xAxis: [
            {
              name: yname,
              type: 'category',
              nameTextStyle: {
                fontSize: 14 * scale,
                color: '#15dce2',
                padding: [48 * scale, 0, 0, -50 * scale],
              },
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
              axisTick: {show: false},
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              name: '话务量',
              nameTextStyle: {
                fontSize: 14 * scale,
                padding: [-10 * scale, 35 * scale, 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {interval: 0,textStyle: {color: '#15dce2', fontSize: 14 * scale}},
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        })
      },
    },
    ready() {
      this.setBar()
    }
  }
</script>

<style scoped>
  .label {
    margin-left: 6%;
    font-size: 0.85em;
    color: #fff;
    height: 8%;
  }

  #Traffic {
    height: 91%;
    width: 99%;
    padding: 1% 2% 3% 2%;

  }
</style>
