diff --git a/module/report/css/annualdata.css b/module/report/css/annualdata.css
index b941fa7a93..4d3bac9a58 100644
--- a/module/report/css/annualdata.css
+++ b/module/report/css/annualdata.css
@@ -83,72 +83,22 @@ section.active {border: 1px solid rgb(0, 166, 255);}
 .dataYearStat .canvas.left {width: 450px;}
 .dataYearStat .canvas.right {width: 810px; float: right;}
 
-#timeline {
-  display: inline-block;
-  width: 310px;
-  padding-top: 20px;
-  list-style: none;
-  text-align: center;
-  margin-left: 25px;
- }
- .scroll-shell {
-   position: relative;
- }
- #stopPlaying {
-  font-size: 18px;
-  position: absolute;
-  left: 0;
-  top: 8px;
+ #stopPlaying {font-size: 18px; position: absolute; left: 0; top: 8px;
  }
 
- #timeline li {
-  display: inline-block;
-  cursor: pointer;
-  color: #444;
-  padding: 0 5px;
-  margin: 0;
-  position: relative;
+ #timeline li {display: inline-block; cursor: pointer; color: #444;  padding: 0 5px; margin: 0; position: relative;
  }
 
- 
- #timeline li::before{
-   content: '';
-   display: inline-block;
-   width: 8px;
-   height: 8px;
-   border-radius: 4px;
-   background: #fff;
-   position: absolute;
-   left: 20px;
-   top: -8px;
-   z-index: 2;
+ #timeline li::before{ content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: #fff; position: absolute; left: 20px; top: -8px; z-index: 2;
  }
  #timeline li::after{content: ''; display: block; width: 100%; height: 2px; border-radius: 1px; background: #fff; position: absolute; left: -20px; top: -5px;}
 
- .class1 {
-  background-size: 60px 24px;
- }
+ .class1 {background-size: 60px 24px;}
 
- #timeline .selecteded {
-   color: #1a77a5;
-  /* background: url('img/tuoyuan2.png') 0 15px no-repeat;
-  background-size: 20px 20px; */
- }
- #timeline .selecteded::before {
-   background: #1a77a5;
- }
+ #timeline .selecteded {color: #1a77a5;}
+ #timeline .selecteded::before {background: #1a77a5;}
 
- .scroll-shell {
-  width: 100px;
-  height: 96%;
-  margin-top: 1.5%;
-  float: left;
-  overflow: hidden;
+ .scroll-shell { width: 330px; height: 96%; margin-top: 1.5%; overflow: hidden; position: relative;
  }
-.scroll-shell {width: 330px;}
-.scroll {
-  width: 330px;
-  height: 103%;
-  overflow: auto;
-  overflow-x: hidden;
+ #timeline { padding-top: 20px; list-style: none; text-align: center; margin-left: 25px; width: 310px; height: 89%; overflow: auto; overflow-x: hidden;
 }
\ No newline at end of file
diff --git a/module/report/js/annualdata.js b/module/report/js/annualdata.js
index 31d654ce20..67fa201cc7 100644
--- a/module/report/js/annualdata.js
+++ b/module/report/js/annualdata.js
@@ -52,7 +52,6 @@ function drawStatusPieChart(id, title, data, callback)
             itemHeight: legendItemHeight,
             textStyle: legendTextStyle,
         },
-        saveAsImage: {},
         series: [
             {
                 name: title,
@@ -187,7 +186,6 @@ function exportAnnualImage(sucessCallback, errorCallback)
             if(sucessCallback) sucessCallback(imageUrl);
             afterFinish(canvas);
         });
-        console.log(imageUrl);
     });
 }
 
diff --git a/module/report/view/annualdata.html.php b/module/report/view/annualdata.html.php
index aa80a2a51c..c0a4deef46 100644
--- a/module/report/view/annualdata.html.php
+++ b/module/report/view/annualdata.html.php
@@ -5,7 +5,8 @@
 <?php $annualDataLang   = $lang->report->annualData;?>
 <?php $annualDataConfig = $config->report->annualData;?>
 <?php $soFar = sprintf($annualDataLang->soFar, $year);?>
-<?php js::set('totalYears', (array)($years)); ?>
+<?php js::set('totalYears', (array)$years); ?>
+<?php js::set('contributionGroups', $contributionGroups); ?>
 <div id='container' style='background-image: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_data_bg.png'?>)'>
   <main id='main' style='background: url(<?php echo $config->webRoot . 'theme/default/images/main/annual_layout_header.png'?>) top no-repeat'>
     <header id='header'>
@@ -122,7 +123,8 @@
     <section id='radar'>
       <header><h2 class='text-holder'><?php echo $annualDataLang->radar . $soFar;?></h2></header>
       <div id='radarCanvas' style="display: none;"></div>
-      <canvas id="canvas" width="330" height="280" style="margin-top:-30px"></canvas>
+      <canvas id="canvas" width="330" height="280" style="margin-top:-30px;"></canvas>
+      <!-- <img src="blob:http://wzm.oop.cc/4390c26b-15b8-4a97-b509-f1f0b11d4d71" alt=""> -->
         <div class="scroll-shell">
             <i class="icon icon-play" id="stopPlaying"></i>
             <ul id="timeline" ref="timeline" onclick="timeline($event)" class="scroll"></ul>
@@ -243,6 +245,7 @@
 <script>
 $(function()
 {
+    console.log(contributionGroups);
     var radarChart  = echarts.init(document.getElementById('radarCanvas'));
     var radarOption = {
       tooltip: {},
@@ -270,10 +273,10 @@ $(function()
           data: [{value: <?php echo json_encode(array_values($radarData));?>}]
       }]
     };
-    console.log(totalYears);
-
-    radarChart && radarChart.setOption(radarOption);
+    console.log(' <?php echo json_encode(array_values($radarData));?>');
 
+    radarChart.setOption(radarOption);
+   
     function exportImg () 
     {
         var radarCanvasArr = echarts.getInstanceByDom(document.getElementById('radarCanvas'));
@@ -340,17 +343,16 @@ $(function()
 
     };
     animationCanvas();
-    var years = [];
-    for(var key in totalYears){
-        years.push(totalYears[key]);
-    }
-    var radarCanvasDom = document.getElementById('radarCanvas');
-    if(years.length > 1) {
-        radarCanvasDom.style.display = 'none';
-    }
+    // var years = [];
+    // for(var key in totalYears){
+    //     years.push(totalYears[key]);
+    // }
+    // var radarCanvasDom = document.getElementById('radarCanvas');
+    // if(years.length > 1) {
+    //     radarCanvasDom.style.display = 'none';
+    // }
     
-    
-    // var years = [2016, 2017, 2018, 2019, 2020, 2021, 2022]
+    var years = [2016, 2017, 2018, 2019, 2020, 2021, 2022]
     var index = 0
     var timer=null
     //创建时间轴对应的li