<template>
  <div class="interaction">
    <triangle>
      <slot>
        <div class="common-title">
          <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
          <span class="title">{{title}}</span>
          <img class="bg" src="/images/screen/title02_bg.png" alt="">
        </div>
        <div id="tends" @click="echartsClick"></div>
      </slot>
    </triangle>
  </div>
</template>

<script>
import triangle from '../components/slot/triangle'

export default {
  name: 'interaction',
  data() {
    return {
      title:'展板点播趋势图'
    }
  },
  components:{triangle},
  mounted() {
    setTimeout(()=>{
      this.init()
    },100)
  },
  methods: {
    init(){
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top:20,
          left: '2%',
          right: 20,
          bottom: '15%',
          containLabel: true
        },
        // dataZoom: [{
        //   type: "slider",
        //   show: true,
        //   bottom: '20',
        //   start: 0,
        //   end: 100,
        //   height: 18,
        //   handleStyle: {
        //     color: "#d3dee5",
        //   },
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: "10px"
        //   },
        // }
        // ],
        xAxis: {
          type: 'category',
          boundaryGap: false,//坐标轴两边留白
           data: [
             '2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08','2021/01/09', '2021/01/10',
             '2021/01/11', '2021/01/12', '2021/01/13', '2021/01/14', '2021/01/15', '2021/01/16', '2021/01/17', '2021/01/18','2021/01/19', '2021/01/20',
             '2021/01/21', '2021/01/22', '2021/01/23', '2021/01/24', '2021/01/25', '2021/01/26', '2021/01/27', '2021/01/28','2021/01/29', '2021/01/30','2021/01/31'],
            axisLabel: { //坐标轴刻度标签的相关设置。
            textStyle: {
              color: '#FFFFFF',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 14,
            },
          },
          axisTick:{//坐标轴刻度相关设置。
            show: false,
          },
          axisLine:{//坐标轴轴线相关设置
            lineStyle:{
              color:'rgba(98,186,255,0.6)',
              type:'solid'
            }
          },
          splitLine: { //坐标轴在 grid 区域中的分隔线。
            show: false,
          }
        },
        yAxis: [
          {
            type: 'value',
            splitNumber: 5,
            max:100,
            axisLabel: {
              textStyle: {
                color: '#FFFFFFFF',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              },
              interval:'auto'
            },
            axisLine:{
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(98,186,255,0.6)',
                type:'dashed'
              }
            }

          }
        ],
        series: [
          {
            type: 'line',
            smooth:true,
            itemStyle: {
              normal: {
                color:'rgba(255,74,83,1)',
                lineStyle: {
                  color: "rgba(78,255,253,1)",
                  width:1
                },
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(255,74,83,0.4)'
                  }, {
                    offset: 1,
                    color: 'rgba(78,255,253,0.4)'
                  }]),
                }
              }
            },
            data: [ 18, 19, 22, 23, 25, 26, 28, 30, 36, 38,
                    40, 42, 45, 44, 46, 47, 49,  52, 56, 59,
                    63, 66, 68, 69, 73, 75, 78,  80,  83, 85,90
            ]
          }
        ]
      };
      let echartsDiv = this.$echarts.init(document.getElementById('tends'))
      echartsDiv.setOption(option)
    },
    // 点击事件
    echartsClick(){
      this.$emit('itemClick',{type:2,title:this.title})
    }
  }
}
</script>

<style  lang="scss">
#tends{
  width: 100%;
  height: calc(100% - 0.6rem);
  margin-top: 0.6rem;
}
</style>
