$(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);



})