$(function () {
  var dom = document.getElementById('container');
  var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  var app = {};

  var option;

  option = {
    // axisPointer: [{
    //   animationDurationUpdate: 8000,
    
    // }],

    series: [{
      // name: 'Area Mode',
      type: 'pie',
      // radius: [20, 140],
      startAngle: 110,
      center: ['50%', '50%'],
      roseType: 'area',
      labelLine: {
        show: false
      },
      animationDuration: 2000,
     
      data: [{
          value: 36,
          // name: 'rose 1',
        },
        {
          value: 32,
          // name: 'rose 2',
      
        },
        {
          value: 40,
          // name: 'rose 3',
         
        }
      ],
      color: [
        new echarts.graphic.LinearGradient(0, 0.5, 1, 0.7, [{
          offset: 1,
          color: "#e35a45",
        } ]),
        new echarts.graphic.LinearGradient(0.1, 0, 0.1, 1, [{
          offset: 1,
          color: "#ee715d",
        } ]),
        new echarts.graphic.LinearGradient(0.3, 1, 0.8, 0.1, [{
          offset: 1,
          color: "#e84127",
        } ]),
      ],
    }, ]
  };

  var isInit=false;

  // $('.map .logo').click(function () {
    $(window).scroll(function () {
      var logo = $(".map .logo").outerHeight();
      var LTop= $(".map .logo").offset().top;
      var top = $(document).scrollTop();
      
      
      if($(window).width() > 1004){
        if((LTop - logo) < top){
          if (option && typeof option == 'object'&&!isInit) {
            isInit=true;
            myChart.setOption(option);
          };
          window.setTimeout(function () {
            $('.map .research').css({
              "visibility": "visible", 
              "animation-duration": "1s",
              "animation-name": "fadeInUp"
            })
          }, 1000);
          window.setTimeout(function () {
            $('.map .intelligent3').css({
              "visibility": "visible",
              "animation-duration": "1s",
              "animation-name": "fadeInUp"
            })
          }, 1200);
          window.setTimeout(function () {
            $('.map .serve').css({
              "visibility": "visible",
              "animation-duration": "1s",
              "animation-name": "fadeInUp"
            })
          }, 1400);
          $('.map .logo').css({"animation-play-state":"paused",})
          window.setTimeout(function () {
            $('.map .research1').css({
              "visibility": "visible",
              "animation-duration": "1s",
              "animation-name": "fadeInUp"
            })
          }, 1000);
          window.setTimeout(function () {
            $('.map .intelligent1').css({
              "visibility": "visible",
              "animation-duration": "1s",
              "animation-name": "fadeInUp"
            })
          }, 1200);
          window.setTimeout(function () {
            $('.map .serve1').css({
              "visibility": "visible",
              "animation-duration": "1s",
              "animation-name": "fadeInUp"
            })
          }, 1400);
        }
        
        
      }else{
        if((LTop - logo * 2) < top){
          if (option && typeof option == 'object'&&!isInit) {
            isInit=true;
            myChart.setOption(option);
          };
          window.setTimeout(function () {
            $('.map .research').css({
              "visibility": "visible", 
              "animation-duration": "1s",
              "animation-name": "fadeInUp"
            })
          }, 1000);
          window.setTimeout(function () {
            $('.map .intelligent3').css({
              "visibility": "visible",
              "animation-duration": "1s",
              "animation-name": "fadeInUp"
            })
          }, 1200);
          window.setTimeout(function () {
            $('.map .serve').css({
              "visibility": "visible",
              "animation-duration": "1s",
              "animation-name": "fadeInUp"
            })
          }, 1400);
          $('.map .logo').css({"animation-play-state":"paused",})
  
        }
      }
    })

    
  // })

  


  window.addEventListener('resize', myChart.resize);



})