<template>
  <div class="container8" @click="fn(gyfajqktjUrl)">
    <div ref="line1" class="line1"></div>
  </div>
</template>
    
<script>
// import '@/utils/echa.js'
import {getGyfajqktj} from '@/api/ddzhxt.js'
export default {
  data() {
    return{
      data:[],
      text:[],
      number:[],
      gyfajqktjUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-report-case-gyfajqk.html',

    }
  },
  methods: {
    fn(url) {
      layer.open({
        type: 2,
        content: url, 
        area: ['80%', '80%'],
        title:'' ,
      });
    },
    gr() {
      let myChart = this.$echarts.init(this.$refs.line1);
      // 用于清除定时器
      var tootipTimer = null;
      let option = {
        grid: {
          left: "3%",
          right: "7%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data:this.text,
          // axisTick: {

          //         },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
            rotate: 30,
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: "#fff",
            }, // x轴刻度的颜色
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            }, // x轴坐标轴颜色
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        tooltip: {
          show: true,
          borderWidth: 0,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        series: [
          {
            data: this.number,
            type: "line",
            label: {
              normal: {
                show: true,
                formatter: "{c}" + "件",
                color: "#fff",
                position: "top",
              },
            },
            areaStyle: {
              color: "#fa0e0e",
            },
            itemStyle: {
              normal: {
                color: "red", //图例的颜色
                lineStyle: {
                  color: "red", //线的颜色
                },
              },
            },
            symbolSize: 5,
          },
        ],
      };
      myChart.setOption(option);

      //   window.addEventListener("resize", () => {
      //     myChart.resize();
      //   });
      //   window.onresize = function () {
      //     myChart.resize();
      //   };
      // window.onresize = myChart.resize
      let sizeFun = function () {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);
      tootipTimer && tootipTimer.clearLoop();
      tootipTimer = null;
      // 调用轮播的方法
      tootipTimer = window.loopShowTooltip(myChart, option, {
        interval: 2000, // 轮播间隔时间
        loopSeries: true, // 是否开启轮播循环
      });
    },
    async getGyfajqktj () {
      try {
        const res = await getGyfajqktj()
        //  console.log(res);
         this.data = res.data.list
        //  console.log(this.data);
          this.data.forEach(item =>{
            this.text.push(item.name)
            this.number.push(item.value)
            
          })
          this.$nextTick(()=>{
            this.gr();
           })
      } catch (error) {
        console.log('数据获取失败');
      }
    }
  },
  created(){
    this.getGyfajqktj()
  },
  mounted() {
    // setTimeout(() => {
    // this.gr();
      
    // }, 300);
  },
};
</script>
    
<style scoped lang="scss">
.container8 {
  /* border: 1px solid #00ffff;    */
  width: 40vw;
  height: 21.3592vh;
  text-align-last: left;
  .line1 {
  width: 40vw;
  height: 21.3592vh;
}
}


</style>