
<template>
  <div>
    <div class="text-1">
      <div id="charts"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "lineChart",

    /*
      折线图
     1.必须要传的参数:xdata,sdata,legendData

     2.规范值
     传入参数 例
          xdata:[1,2,3,4]
          sdata:[
            [2,4,6,8],
            [1,3,5,7]
          ]
          legendData:['第一个','第二个']
          legendData的长度等于sdata的长度
          sdata的每一个数组的长度要和  xdata的长度相等

    3.参数含义
    xdata   :  x轴数据
    sdata   :  展示的数据
    legendData : 展示那些显示那些不显示
    title   :  标题
    yname   :  y轴名称
    xname   :  y轴名称
    settime   :  tooltip 轮播的时间 默认 1500
    showtooltip : 是否展示 提示框 默认展示
    smooth : 曲线 平滑线 默认曲线
    showtitle : 标题是否展示
    showyname: y轴名称是否显示
     */
    props: [
      'xdata',
      'sdata',
      'legendData',
      'title',
      'yname',
      'settime',
      'showtooltip',
      'smooth',
      'showtitle',
      'showyname',
      'showxname',
      'xname'
    ],
    data() {
      return {

        xc: '',
        timer: '',
        time:1500,  // 轮播提示的时间 默认 1500
        showtTip:true,   // 轮播提示框 默认展示
        csmooth:false,  // 线的类型  true 为平滑线 反之曲线
        cshowtitle:true, //标题 默认展示
        cshowyname:true , //y轴名称 默认展示
        cshowxname:true , //x轴名称 默认展示
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar() {
        console.log('进入画图~~~~~~~~~~~~~~~~~~~')
        console.log(this.legendData)
        const  width=document.getElementById('canvas').offsetWidth
        let fontSize=0
        if(width<600){
          fontSize=14
        }else if(width<1200) {
          fontSize=18
        }else{
          fontSize=22
        }
        this.xc = this.$echarts.init(document.getElementById('charts'))
        if(this.settime!==undefined){
          this.time=this.settime
        }
        if(this.showtooltip!==undefined){ // 判断提示框
          this.showtTip=this.showtooltip
        }
        if(this.csmooth!==undefined){ // 判断平滑线 折线
          this.csmooth=this.smooth
        }
        if(this.showtitle!==undefined){ // 判断标题
          this.cshowtitle=this.showtitle
        }
        if(this.showyname!==undefined){ // 判断是否展示y轴名称
          this.cshowyname=this.showyname
        }
        if(this.showxname!==undefined){ // 判断是否展示x轴名称
          this.cshowxname=this.showxname
        }
        if(this.cyname!==undefined){ // 判断平滑线 折线
          this.cyname=this.yname
        }
        var serieData = []
        var legendData = this.legendData
        for (let i = 0; i < legendData.length; i++) {
          var series= {
            name: legendData[i],
            type: 'line',
            stack: legendData[i],
            smooth: this.csmooth,
            data: this.sdata[i]
          }
          serieData.push(series)
        }
        this.xc.setOption({
          title: {
            text: this.title,
            left:'center',
            textStyle:{
              fontSize:fontSize
            },
            show:this.cshowtitle
          },
          tooltip: {
            show:this.showtTip,
            alwaysShowContent: true,
            backgroundColor: 'rgba(2, 59, 63, 0.45)',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth: 0,
            hideDelay: 100,
            textStyle: {
              fontSize: fontSize
            },
            confine: false,
            formatter: function (params) {
              var result = ''
              params.forEach(function (item) {
                result += item.marker + " " + item.seriesName + " &nbsp;&nbsp;&nbsp; <sapn style='color:#e1e52a;font-weight: bolder'>" + item.value + "</sapn></br>";
              });
              return "<div style='text-align: center;height: 1px;font-weight: normal'>" + params[0].axisValue + '</div><br/>' + result
            },
            trigger: 'axis',
            axisPointer: {type: 'line', lineStyle: {width: 0}},
            extraCssText: 'width: auto;height: auto;'
          },
          legend: {
            // padding:[50,40,0,200], // 上右下左
            data: this.legendData,
            textStyle:{
              fontSize:fontSize
            },
            left:'20%',
            top:'10%'
          },
          grid: {
            left: '6%',
            right: '15%',
            bottom: '4%',
            top:'20%',
            containLabel: true
          },
          xAxis: [
            {
              name:this.cshowxname===true?this.xname:'',
              type: 'category',
              boundaryGap: true,

              axisTick:{
                show:false
              },
              axisLabel:{
                fontSize:fontSize
              },
              nameTextStyle:{
                fontSize:fontSize,
                padding:[0,100,15,-12], // 上右下左
              },
              data:this.xdata
            }

          ],
          yAxis: [
            {
              name:this.cshowyname===true?this.yname:'',
              type: 'value',
              nameTextStyle:{
                fontSize:fontSize,
                padding:[0,0,15,60], // 上右下左
              },
              axisLabel:{
                fontSize:fontSize,
                formatter: function (params) {
                  if (params > 9999) {
                    return params / 10000 + "万"
                  }
                  else
                    return params
                }
              },
              axisTick:{
                show:false
              },
            }
          ],
          series: serieData
        })
        let idx = -1;
        var dataLen = this.sdata[0].length
        this.timer = setInterval(() => {
          idx = (idx + 1) % dataLen;
          this.xc.dispatchAction({
            type: 'showTip',
            seriesIndex: 1,
            dataIndex: idx
          });

        }, this.time)


      },

    },
    watch: {
        'sdata'(){
          //清除定时器
          clearInterval(this.timer);
        }
    },
    ready() {
      this.setBar()

    }
  }
</script>

<style scoped>

</style>
