<template>
  <div class="flex" style="width: 100%;height: 100%">

    <div class="col-sm-12 auto" style="height: 30%;padding:1em">
      <div class="row auto col-sm-12" style="padding-left: 4%">
        <div class="col-sm-6">
          <span class="font-title">热线</span>
        </div>

      </div>
      <div class="col-sm-12 auto" style="padding: 1em">
        <div class="col-sm-6 ">
          <span class="normal-font" >当年呼入量</span><span id="huru">1314434</span>
        </div>
        <div class="col-sm-6 ">
          <span class="normal-font" >人工接听量</span><span id="jieting">1206259</span>
        </div>
        <div class="col-sm-6 ">
          <span class="normal-font" >报修工单量</span><span id="baoxiu">296043</span>
        </div>
        <div class="col-sm-6 ">
          <span class="normal-font" >多媒体工单</span><span id="weixiu">117</span>
        </div>
      </div>
    </div>
    <div id="barchart-line" style="height: 70%;width:100%">
    </div>
  </div>
</template>

<script>
  export default {
    title: '收费',
    data() {
    },
    methods: {
      init() {
        var xData = ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
          yData1 = [157595, 168477, 154318, 135130, 137892, 134554, 149184, 190880, 86404],
          yData2 = [148245, 157585, 144000, 126401, 128889, 124933, 137133, 165645, 73428],
          yData3 = [33357, 14893, 32526, 32559, 37335, 36626, 39419, 47411, 21917],
          borderData = [],
          legend = ['呼入量', '人工接听量', '报修工单量'],
          colorArr = [{
            start: 'rgba(242,153,97)',
            mid: 'rgba(242,153,97,0.7)',
            end: 'rgba(0, 0, 0,0.5)'
          },
            {
              end: 'rgba(0, 0, 0,0.5)',
              mid: 'rgba(111,217,208,0.7)',
              start: 'rgba(111,217,208)'
            },
            {
              color: '#e5925e'
            }
          ]
        let normalColor = 'rgba(8,115,142)'
        let seriesData = []
        var borderHeight = 4
        xData.forEach(element => {
          borderData.push(borderHeight)
        });
        [yData1, yData2, yData3].forEach((item, index) => {
          var obj1 = {}
          if (index < 2) {
            obj1 = {
              name: legend[index],
              type: 'bar',
              stack: legend[index],
              data: item,
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: [30, 30, 30, 30],
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: colorArr[index].start
                    },
                      {
                        offset: 0.5,
                        color: colorArr[index].mid
                      },
                      {
                        offset: 1,
                        color: colorArr[index].end
                      }
                    ],
                    globalCoord: false
                  }
                }
              }
            }
            seriesData.push(obj1)
          } else {
            var obj3 = {
              data: item,
              type: 'line',
              smooth: true,
              name: legend[index],
              symbol: 'circle',
              symbolSize: 10,
              lineStyle: {
                color: colorArr[index].color,
                width: 1,
                shadowColor: 'rgba(0, 0, 0, 0.3)', //设置折线阴影
                shadowBlur: 15,
                shadowOffsetY: 20,
              }
            }
            seriesData.push(obj3)
          }
        })
        console.log(seriesData)
        // 更改柱状图位置
        let option = {
          backgroundColor: '#ffffff00',
          grid: {
            left: '2%',
            right: '10%',
            bottom: '20%',
            containLabel: true
          },
          legend: {
            show: true,
            itemWidth: 30,
            itemHeight: 20,
            bottom: '5%',
            textStyle: {
              color: '#fff'
            },
            data: legend
          },
          tooltip: {
            position: function (pos, params, dom, rect, size) {
              let yPos = '20%'
              let xPos = 0
              if (pos[0] < size.viewSize[0] / 2) {
                xPos = pos[0] + 10
              } else {
                xPos = pos[0] - dom.offsetWidth - 10
              }
              return [xPos, yPos]
            },
            trigger: 'axis',
            extraCssText: 'width:15%;height:30%;',
            formatter: function (params) {
              var str = ''
              for (var i = 0; i < params.length; i++) {
                if (params[i].seriesName !== '') {
                  str += `<span>${params[i].name}月${params[i].seriesName}</span><span style="color:gold">${params[i].value}</span> <br />`
                }
              }
              return str
            }
          },
          xAxis: [{
            name: '月份',
            type: 'category',
            data: xData,
            interval: 0,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              textStyle: {
                color: normalColor,
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: normalColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }],
          yAxis: [{
            type: 'value',
            nameTextStyle: {
              color: normalColor,
              fontSize: 12
            },
            // 'min': 0,
            // 'max': 50,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: normalColor,
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: normalColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: normalColor
              }
            }
          }],
          series: seriesData
        }
        console.log(option)
        let barchart = this.$echarts.init(document.getElementById('barchart-line'))
        console.log(option)
        barchart.setOption(option)
        var index = 0
        // var mTime = setInterval(function () {
        //   barchart.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   index++
        //   if (index > xData.length) {
        //     index = 0
        //   }
        // }, 1000)
      }
    },
    ready() {
      this.init()
    },
    props: {}
  }
</script>
<style scoped>

  #huru {
    font-family: PingFang-SC-Bold;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #35ffff;
  }

  #jieting {
    font-family: PingFang-SC-Bold;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #e5925e;
  }

  #baoxiu {
    font-family: PingFang-SC-Bold;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #f27c79;
  }

  #weixiu {
    font-family: PingFang-SC-Bold;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: #2490d9;
  }
</style>

