修改饼图

investment/investHome2.html

@@ -20,7 +20,9 @@
   <script src="./libs/echarts-liquidfill.min.js"></script>
   <script src="./libs/echarts-tooltip-carousel.js"></script>
   <script src="./js/data2.js"></script>
-
+     <!-- highchair -->
+  <script src="./libs/highcharts.js"></script>
+  <script src="./libs/highcharts3d.js"></script> 
   <!-- 轮播 -->
   <!-- <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css" />
   <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
@@ -63,7 +65,7 @@
                 </div>
                 <div class="content-left-bottom">
                   <div class="item2">
-                    <div class="item2-title" style="color: #DD9CFF;">621.62<span>亿</span></div>
+                    <div class="item2-title" style="color: #DD9CFF;">423.91<span>亿</span></div>
                     <div class="item2-img">
                       <img style="width: 100%; height: 100%;" src="./images/icon-5-home2.png" alt="">
                     </div>
@@ -86,7 +88,7 @@
                 </div> -->
               </div>
               <div class="content-right" style="position:relative">
-                <div class="total">总额度<span style="font-size: 25px;">1,323.85亿</span></div>
+                <div class="total">总额度<span style="font-size: 25px;">1,123.85亿</span></div>
                 <div ref="echartL2" style="width: 100%; height: 100%;"></div>
               </div>
             </div>
@@ -124,7 +126,7 @@
               <div class="content-left">
                 <div class="content-left-l">
                   <div class="item3">
-                    <div class="item3-title">1,363.88<span>亿</span></div>
+                    <div class="item3-title">1,163.88<span>亿</span></div>
                     <div class="item3-img">
                       <img style="width: 100%; height: 100%;" src="./images/icon-8-home2.png" alt="">
                     </div>
@@ -141,7 +143,7 @@
                       <div class="item4-con">
                         <div class="item">
                           <div class="text" style="margin-top: 10px;">投资金额</div>
-                          <div class="title">1,198.19<span>亿</span></div>
+                          <div class="title">644.83<span>亿</span></div>
                         </div>
                         <div class="item">
                           <div class="text" style="margin-top: 10px;">项目数量</div>
@@ -156,7 +158,7 @@
                       <div class="item4-con">
                         <div class="item">
                           <div class="text" style="margin-top: 10px;">投资金额</div>
-                          <div class="title">165.69<span>亿</span></div>
+                          <div class="title">95.69<span>亿</span></div>
                         </div>
                         <div class="item">
                           <div class="text" style="margin-top: 10px;">项目数量</div>
@@ -169,10 +171,10 @@
               </div>
               <div class="content-right">
                 <div class="content-right-l">
-                  <div ref="echartR1" style="width: 100%; height: 100%;"></div>
+                  <div id="echartR1" ref="echartR1" style="width: 100%; height: 100%;"></div>
                 </div>
                 <div class="content-right-r">
-                  <div ref="echartR2" style="width: 100%; height: 100%;"></div>
+                  <div id="echartR2" ref="echartR2" style="width: 100%; height: 100%;"></div>
                 </div>
               </div>
             </div>
@@ -184,16 +186,16 @@
             <div class="content">
               <div class="fourPie">
                 <div class="content-con">
-                  <div ref="echartL4" style="width: 100%; height: 100%;"></div>
+                  <div id="echartL4" ref="echartL4" style="width: 100%; height: 100%;"></div>
                 </div>
                 <div class="content-con">
-                  <div ref="echartL5" style="width: 100%; height: 100%;"></div>
+                  <div id="echartL5" ref="echartL5" style="width: 100%; height: 100%;"></div>
                 </div>
                 <div class="content-con">
-                  <div ref="echartL6" style="width: 100%; height: 100%;"></div>
+                  <div id="echartL6" ref="echartL6" style="width: 100%; height: 100%;"></div>
                 </div>
                 <div class="content-con">
-                  <div ref="echartL7" style="width: 100%; height: 100%;"></div>
+                  <div id="echartL7" ref="echartL7" style="width: 100%; height: 100%;"></div>
                 </div>
               </div>
             </div>
@@ -254,11 +256,11 @@
               </div>
               <div>
                 <span>已用额度</span>
-                <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">46.02</span>亿元</span>
+                <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">30</span>亿元</span>
               </div>
               <div>
                 <span>剩余额度</span>
-                <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">354.47</span>亿元</span>
+                <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">370.49</span>亿元</span>
               </div>
             </div>
           </div>
@@ -272,11 +274,11 @@
       <div class="tip" v-show="showTip3">
         <div class="tip-down" @click="showTip3 = false">×</div>
         <div class="tip1">{{ echartTitle }}</div>
-        <div class="pie" ref="echartT1" style="width: 100%; height: 100%;"></div>
+        <div class="pie" id="echartT1" ref="echartT1" style="width: 100%; height: 100%;"></div>
       </div>
     </dv-full-screen-container>
   </div>
-  <script src="./js/investHome2.js"></script>
+  <script src="./js/copyHome2.js"></script>
 </body>
 
 </html>

investment/js/copyHome2.js

@@ -1175,35 +1175,35 @@ let app = new Vue({
             {
                 name: '煤炭',
                 y: 294.61,
-                x: 95,
+                num: 95,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '火电',
                 y: 39.24,
-                x: 1,
+                num: 1,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '冶金',
                 y: 38.85,
-                x: 6,
+                num: 6,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '焦化',
                 y: 16.49,
-                x: 4,
+                num: 4,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '其他传统产业',
                 y: 14.19,
-                x: 5,
+                num: 5,
                 sliced: false,
                 selected: false,
             }
@@ -1294,7 +1294,7 @@ let app = new Vue({
                 },
                 formatter: function(e){
                     //console.log(this)
-                    let num = chartData[this.colorIndex].x
+                    let num = chartData[this.colorIndex].num
                     this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
                     return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
                 },
@@ -1497,54 +1497,92 @@ let app = new Vue({
         //   { value: [100.09, 79], name: '新能源' },
         //   { value: [15.48, 32], name: '节能环保' },
         //   { value: [3.00, 3], name: '相关服务业' },
+      //   var chartData = [
+      //     {
+      //         name: '新一代信息技术',
+      //         y: 29.26,
+      //         x: 75,
+      //         sliced: false,
+      //         selected: false,
+      //     },
+      //     {
+      //       name: '高端装备制造',
+      //       y: 100.41,
+      //       x: 28,
+      //       sliced: false,
+      //       selected: false,
+      //     },
+      //     {
+      //         name: '新材料',
+      //         y: 6.72,
+      //         x: 4,
+      //         sliced: false,
+      //         selected: false,
+      //     },
+      //     {
+      //         name: '生物',
+      //         y: 3.60,
+      //         x: 58,
+      //         sliced: false,
+      //         selected: false,
+      //     },
+      //     {
+      //         name: '新能源',
+      //         y: 170.03,
+      //         x: 58,
+      //         sliced: false,
+      //         selected: false,
+      //     }
+      // ]
 
         var chartData = [
             {
                 name: '新一代信息技术',
-                y: 49.70,
-                x: 75,
+                y: 29.26,
+                num: 75,
+                //x: 75,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '高端装备制造',
                 y: 100.41,
-                x: 28,
+                num: 28,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '新材料',
                 y: 6.72,
-                x: 4,
+                num: 4,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '生物',
                 y: 3.60,
-                x: 58,
+                num: 58,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '新能源',
                 y: 170.03,
-                x: 58,
+                num: 58,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '节能环保',
                 y: 26.30,
-                x: 24,
+                num: 24,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '相关服务业',
                 y: 5.10,
-                x: 2,
+                num: 2,
                 sliced: false,
                 selected: false,
             }
@@ -1555,192 +1593,192 @@ let app = new Vue({
         let that = this     
 
         var option = {
-            colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39'],
-            chart: {
-                type: 'pie',
-                backgroundColor: 'rgba(0,0,0,0)',
-                options3d: {
-                    enabled: true,
-                    alpha: 45,
-                    //beta: 0
-                },
-                events: {
-                    // load，图表加载完成时触发
-                    load: function () {
-                        var chart = this;
-            
-                        var points = chart.series[0].points;
-                        var len = points.length;
-                        
-                        timer && clearInterval(timer);
-                        timer = setInterval(function () {
-                            autoTooltip(points[i]);
-                            chartData.forEach((item,index) => {
-                            item.sliced = false
-                            item.selected = false
-                            if(index == i){
-                                item.sliced = true
-                                item.selected = true
-                            }
-                            })
-                            chart.update({
-                            series:[{
-                                type: 'pie',
-                                name: '占比',
-                                point: {
-                                events:{
-                                    click:function(e){
-                                        that.showTip3 = true
-                                        that.echartTitle = '战略性新兴产业'
-                                        setTimeout(() => {
-                                            that.initChartT1(chartData)
-                                        })
-                                    }
-                                }
-                                },
-                                data: chartData
-                            }]
-                            })
-                            i++;
-                            if (i === len) {
-                                i = 0;
-                            }
-                        }, 2000);
-                    },
-                    legendItemClick : function(event) {
-                        console.log(event);
-                        return true;
-                    }
-                }
-            },
-            credits: {
-                enabled: false  //去掉hightchats水印
-            },
-            title: {
-                text: '战略性新兴产业',
-                style:{
-                    color: 'rgba(255,255,255,0.6)',
-                    fontSize:12,
-                }
-            },
-            tooltip: {
-                crosshairs: true,
-                backgroundColor: 'rgba(0,0,0,0.5)',
-                // positioner: function(e){
-                //   console.log(e, this)
-                // },
-                useHTML: true, //开启html模式
-                style: {
-                    color:'#fff',
-                },
-                formatter: function(e){
-                    //console.log(this)
-                    let num = chartData[this.colorIndex].x
-                    this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
-                    return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
-                },
-            //pointFormat: 
-            },
-            plotOptions: {
-                pie: {
-                    allowPointSelect: true,
-                    showInLegend:  false, // 图例
-                    cursor: 'pointer',
-                    size: 160,
-                    innerSize : 100, //环形图中间空白，0为饼图
-                    depth: 25, //立体高度
-                    slicedOffset: 21, //动画距离
-                    dataLabels: {
-                    enabled: false,  // 是否展示指示线
-                    format: '{point.name}: {point.percentage}'
-                    }
-                },
-            },
-            series: [{
-                type: 'pie',
-                name: '占比',
-                //center: ['35%','50%'],
-                point: {
-                    events:{
-                        click:function(e){ //点击事件
-                            that.showTip3 = true
-                            that.echartTitle = '战略性新兴产业'
-                            setTimeout(() => {
-                                that.initChartT1(chartData)
-                            })
-                        },
-                        mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
-                            //console.log(e) 
-                            chartData.forEach((item,index) => {
-                                item.sliced = false
-                                item.selected = false
-                            })
-                                chartData[e.target.index].sliced = true
-                                chartData[e.target.index].selected = true
-                            chart.update({
-                                series:[{
-                                    type: 'pie',
-                                    name: '占比',
-                                    point: {
-                                        events:{
-                                            click:function(e){
-                                                that.showTip3 = true
-                                                that.echartTitle = '战略性新兴产业'
-                                                setTimeout(() => {
-                                                    that.initChartT1(chartData)
-                                                })
-                                            }
-                                        }
-                                    },
-                                    data: chartData
-                                }]
-                            })
-                            timer && clearInterval(timer);
-                        },
-                        mouseOut: function(){ // 鼠标移出后需要继续执行轮播
-                            var points = chart.series[0].points;
-                            var len = points.length;
-                        
-                            timer && clearInterval(timer);
-                            timer = setInterval(function () {
-                                autoTooltip(points[i]);
-                                chartData.forEach((item,index) => {
-                                item.sliced = false
-                                item.selected = false
-                                if(index == i){
-                                    item.sliced = true
-                                    item.selected = true
-                                }
-                                })
-                                chart.update({
-                                series:[{
-                                    type: 'pie',
-                                    name: '占比',
-                                    point: {
-                                    events:{
-                                        click:function(e){
-                                            that.showTip3 = true
-                                            that.echartTitle = '战略性新兴产业'
-                                            setTimeout(() => {
-                                                that.initChartT1(chartData)
-                                            })
-                                        }
-                                    }
-                                    },
-                                    data: chartData
-                                }]
-                                })
-                                i++;
-                                if (i === len) {
-                                    i = 0;
-                                }
-                            }, 2000);                
-                        }
-                    }
-                },
-                data: chartData
-            }]
-        }
+          colors: ['#5783ab', '#1a5389', '#a79c57', '#cc8c29', '#91a65f', '#383062', '#034a39','#5783ab'],
+          chart: {
+              type: 'pie',
+              backgroundColor: 'rgba(0,0,0,0)',
+              options3d: {
+                  enabled: true,
+                  alpha: 45,
+                  //beta: 0
+              },
+              events: {
+                  // load，图表加载完成时触发
+                  load: function () {
+                      var chart = this;
+          
+                      var points = chart.series[0].points;
+                      var len = points.length;
+                      
+                      timer && clearInterval(timer);
+                      timer = setInterval(function () {
+                          autoTooltip(points[i]);
+                          chartData.forEach((item,index) => {
+                          item.sliced = false
+                          item.selected = false
+                          if(index == i){
+                              item.sliced = true
+                              item.selected = true
+                          }
+                          })
+                          chart.update({
+                          series:[{
+                              type: 'pie',
+                              name: '占比',
+                              point: {
+                              events:{
+                                  click:function(e){
+                                      that.showTip3 = true
+                                      that.echartTitle = '战略性新兴产业'
+                                      setTimeout(() => {
+                                          that.initChartT1(chartData)
+                                      })
+                                  }
+                              }
+                              },
+                              data: chartData
+                          }]
+                          })
+                          i++;
+                          if (i === len) {
+                              i = 0;
+                          }
+                      }, 2000);
+                  },
+                  legendItemClick : function(event) {
+                      console.log(event);
+                      return true;
+                  }
+              }
+          },
+          credits: {
+              enabled: false  //去掉hightchats水印
+          },
+          title: {
+              text: '战略性新兴产业',
+              style:{
+                  color: 'rgba(255,255,255,0.6)',
+                  fontSize:12,
+              }
+          },
+          tooltip: {
+              crosshairs: true,
+              backgroundColor: 'rgba(0,0,0,0.5)',
+              // positioner: function(e){
+              //   console.log(e, this)
+              // },
+              useHTML: true, //开启html模式
+              style: {
+                  color:'#fff',
+              },
+              formatter: function(e){
+                  //console.log(this)
+                  let num = chartData[this.colorIndex].num
+                  this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
+                  return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
+              },
+          //pointFormat: 
+          },
+          plotOptions: {
+              pie: {
+                  allowPointSelect: true,
+                  showInLegend:  false, // 图例
+                  cursor: 'pointer',
+                  size: 160,
+                  innerSize : 100, //环形图中间空白，0为饼图
+                  depth: 25, //立体高度
+                  slicedOffset: 21, //动画距离
+                  dataLabels: {
+                  enabled: false,  // 是否展示指示线
+                  format: '{point.name}: {point.percentage}'
+                  }
+              },
+          },
+          series: [{
+              type: 'pie',
+              name: '占比',
+              //center: ['35%','50%'],
+              point: {
+                  events:{
+                      click:function(e){ //点击事件
+                          that.showTip3 = true
+                          that.echartTitle = '战略性新兴产业'
+                          setTimeout(() => {
+                              that.initChartT1(chartData)
+                          })
+                      },
+                      mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
+                          //console.log(e) 
+                          chartData.forEach((item,index) => {
+                              item.sliced = false
+                              item.selected = false
+                          })
+                              chartData[e.target.index].sliced = true
+                              chartData[e.target.index].selected = true
+                          chart.update({
+                              series:[{
+                                  type: 'pie',
+                                  name: '占比',
+                                  point: {
+                                      events:{
+                                          click:function(e){
+                                              that.showTip3 = true
+                                              that.echartTitle = '战略性新兴产业'
+                                              setTimeout(() => {
+                                                  that.initChartT1(chartData)
+                                              })
+                                          }
+                                      }
+                                  },
+                                  data: chartData
+                              }]
+                          })
+                          timer && clearInterval(timer);
+                      },
+                      mouseOut: function(){ // 鼠标移出后需要继续执行轮播
+                          var points = chart.series[0].points;
+                          var len = points.length;
+                      
+                          timer && clearInterval(timer);
+                          timer = setInterval(function () {
+                              autoTooltip(points[i]);
+                              chartData.forEach((item,index) => {
+                              item.sliced = false
+                              item.selected = false
+                              if(index == i){
+                                  item.sliced = true
+                                  item.selected = true
+                              }
+                              })
+                              chart.update({
+                              series:[{
+                                  type: 'pie',
+                                  name: '占比',
+                                  point: {
+                                  events:{
+                                      click:function(e){
+                                          that.showTip3 = true
+                                          that.echartTitle = '战略性新兴产业'
+                                          setTimeout(() => {
+                                              that.initChartT1(chartData)
+                                          })
+                                      }
+                                  }
+                                  },
+                                  data: chartData
+                              }]
+                              })
+                              i++;
+                              if (i === len) {
+                                  i = 0;
+                              }
+                          }, 2000);                
+                      }
+                  }
+              },
+              data: chartData
+          }]
+      }
 
         var chart = Highcharts.chart('echartL5', option);
         
@@ -1844,49 +1882,49 @@ let app = new Vue({
             {
                 name: '化工',
                 y: 43.86,
-                x: 32,
+                num: 32,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '煤层气',
                 y: 29.49,
-                x: 16,
+                num: 16,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '文旅康养',
                 y: 0.07,
-                x: 1,
+                num: 1,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '体育',
                 y: 2.57,
-                x: 5,
+                num: 5,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '酿造',
                 y: 15.83,
-                x: 4,
+                num: 4,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '建筑房地产',
                 y: 120.81,
-                x: 96,
+                num: 96,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '农业',
                 y: 15.47,
-                x: 10,
+                num: 10,
                 sliced: false,
                 selected: false,
             }
@@ -1977,7 +2015,7 @@ let app = new Vue({
                 },
                 formatter: function(e){
                     //console.log(this)
-                    let num = chartData[this.colorIndex].x
+                    let num = chartData[this.colorIndex].num
                     this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
                     return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
                 },
@@ -2180,35 +2218,35 @@ let app = new Vue({
             {
                 name: '交通运输业',
                 y: 264.70,
-                x: 38,
+                num: 38,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '煤气层管网',
                 y: 14.39,
-                x: 14,
+                num: 14,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '物流贸易',
                 y: 18.07,
-                x: 18,
+                num: 18,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '水务',
                 y: 69.73,
-                x: 34,
+                num: 34,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '其他',
                 y: 3.64,
-                x: 5,
+                num: 5,
                 sliced: false,
                 selected: false,
             }
@@ -2299,7 +2337,7 @@ let app = new Vue({
                 },
                 formatter: function(e){
                     //console.log(this)
-                    let num = chartData[this.colorIndex].x
+                    let num = chartData[this.colorIndex].num
                     this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
                     return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
                 },
@@ -2656,14 +2694,14 @@ let app = new Vue({
             {
                 name: '辅业',
                 y: 76.38,
-                x: 84,
+                num: 84,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '主业',
                 y: 1287.50,
-                x: 713,
+                num: 713,
                 sliced: false,
                 selected: false,
             }
@@ -2772,7 +2810,7 @@ let app = new Vue({
                 },
                 formatter: function(e){
                     //console.log(this)
-                    let num = chartData[this.colorIndex].x
+                    let num = chartData[this.colorIndex].num
                     this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
                     return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
                 },
@@ -2989,14 +3027,14 @@ let app = new Vue({
             {
                 name: '特别监管类',
                 y: 635.84,
-                x: 168,
+                num: 168,
                 sliced: false,
                 selected: false,
             },
             {
                 name: '备案类',
                 y: 728.04,
-                x: 465,
+                num: 465,
                 sliced: false,
                 selected: false,
             }
@@ -3109,7 +3147,7 @@ let app = new Vue({
                 },
                 formatter: function(e){
                     //console.log(this)
-                    let num = chartData[this.colorIndex].x
+                    let num = chartData[this.colorIndex].num
                     this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage)
                     return `${this.key}：<b>${this.percentage}%</b><br/><b>${this.y}</b>亿，<b>${num}个</b>`
                 },

investment/js/investHome.js

@@ -1520,291 +1520,301 @@ let app = new Vue({
     // },
     //这个是2d环图
     initChartL1 () {
-    // var chartData = []
-    // var timer = null;
-    // var timer2 = null;
-    // var i = 0;
-    // industryList.forEach((item,index) => {
-    //   let obj = {
-    //     name: item.name,
-    //     y: item.value,
-    //     sliced: false,
-    //     selected: false,
-    //     color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
-    //   }
-    //   chartData.push(obj)
-    // })
-    // let that = this
-    // var chart = Highcharts.chart('echartR1', {
-    //   chart: {
-    //     type: 'pie',
-    //     backgroundColor: 'rgba(0,0,0,0)',
-    //     options3d: {
-    //       enabled: true,
-    //       alpha: 45,
-    //       //beta: 0
-    //     },
-    //     events: {
-    //       // load，图表加载完成时触发
-    //       load: function () {
-    //         var chart = this;
+    var chartData = []
+    var timer = null;
+    var timer2 = null;
+    var i = 0;
+    industryList.forEach((item,index) => {
+      let obj = {
+        name: item.name,
+        y: item.value,
+        sliced: false,
+        selected: false,
+        color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
+      }
+      chartData.push(obj)
+    })
+    let that = this
+    var chart = Highcharts.chart('echartR1', {
+      chart: {
+        type: 'pie',
+        backgroundColor: 'rgba(0,0,0,0)',
+        options3d: {
+          enabled: true,
+          alpha: 45,
+          //beta: 0
+        },
+        events: {
+          // load，图表加载完成时触发
+          load: function () {
+            var chart = this;
 
-    //         var points = chart.series[0].points;
-    //         var len = points.length;
+            var points = chart.series[0].points;
+            var len = points.length;
            
-    //         timer && clearInterval(timer);
-    //         timer = setInterval(function () {
-    //           autoTooltip(points[i]);
-    //           chartData.forEach((item,index) => {
-    //             item.sliced = false
-    //             item.selected = false
-    //             if(index == i){
-    //               item.sliced = true
-    //               item.selected = true
-    //             }
-    //           })
-    //           chart.update({
-    //             series:[{
-    //               type: 'pie',
-    //               name: '占比',
-    //               point: {
-    //                 events:{
-    //                   click:function(e){
-    //                       console.log(e)
-    //                   }
-    //                 }
-    //               },
-    //               data: chartData
-    //             }]
-    //           })
-    //           i++;
-    //           if (i === len) {
-    //             i = 0;
-    //           }
-    //         }, 2000);
-    //       },
-    //       legendItemClick : function(event) {
-    //         console.log(event);
-    //         return true;
-    //       }
-    //     }
-    //   },
-    //   credits: {
-    //     enabled: false  //去掉hightchats水印
-    //   },
-    //   title: {
-    //     text: null
-    //   },
-    //   tooltip: {
-    //     crosshairs: true,
-    //     backgroundColor: 'rgba(0,0,0,0.5)',
-    //     useHTML: true, //开启html模式
-    //     style: {
-    //       color:'#fff',
-    //     },
-    //     formatter: function(e){
-    //       //console.log(this, e)
-    //       this.percentage = Math.round(this.percentage)
-    //       // e.options.backgroundColor = 'rgba(0,0,0,0.5)'
-    //       // e.options.style.color = '#fff'
-    //       return `${this.key}：<b>${this.percentage}%</b><br/>金额：<b>${this.y}</b>亿`
-    //     },
-    //     //pointFormat: 
-    //   },
-    //   legend: {
-    //     layout: 'vertical',  
-    //     align: 'left',
-    //     verticalAlign: 'bottom',
-    //     itemStyle:{
-    //       color: '#fff'
-    //     }
-    //   },
-    //   plotOptions: {
-    //     pie: {
-    //       allowPointSelect: true,
-    //       showInLegend:  true, // 图例
-    //       cursor: 'pointer',
-    //       size: 180,
-    //       innerSize : 110, //环形图中间空白，0为饼图
-    //       depth: 28, //立体高度
-    //       slicedOffset: 23, //动画距离
-    //       dataLabels: {
-    //         enabled: false,  // 是否展示指示线
-    //         format: '{point.name}: {point.percentage}'
-    //       }
-    //     },
-    //   },
-    //   series: [{
-    //     type: 'pie',
-    //     name: '占比',
-    //     center: ['35%','50%'],
-    //     point: {
-    //         events:{
-    //             click:function(e){ //点击事件
-    //                 //console.log(e)
-    //                 if (e.point.name == '战略新兴产业') {
-    //                     that.tipTitle2 = e.point.name
-    //                     that.showTip2 = true
-    //                 }
-    //             },
-    //             mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
-    //               //console.log(e) 
-    //               chartData.forEach((item,index) => {
-    //                 item.sliced = false
-    //                 item.selected = false
-    //              })
-    //               chartData[e.target.index].sliced = true
-    //               chartData[e.target.index].selected = true
-    //               chart.update({
-    //                 series:[{
-    //                   type: 'pie',
-    //                   name: '占比',
-    //                   point: {
-    //                     events:{
-    //                       click:function(e){
-    //                           console.log(e)
-    //                       }
-    //                     }
-    //                   },
-    //                   data: chartData
-    //                 }]
-    //               })
-    //               timer && clearInterval(timer);
-    //             },
-    //             mouseOut: function(){ // 鼠标移出后需要继续执行轮播
-    //             var points = chart.series[0].points;
-    //             var len = points.length;
-           
-    //             timer && clearInterval(timer);
-    //             timer = setInterval(function () {
-    //               autoTooltip(points[i]);
-    //               chartData.forEach((item,index) => {
-    //                 item.sliced = false
-    //                 item.selected = false
-    //                 if(index == i){
-    //                   item.sliced = true
-    //                   item.selected = true
-    //                 }
-    //               })
-    //               chart.update({
-    //                 series:[{
-    //                   type: 'pie',
-    //                   name: '占比',
-    //                   point: {
-    //                     events:{
-    //                       click:function(e){
-    //                           console.log(e)
-    //                       }
-    //                     }
-    //                   },
-    //                   data: chartData
-    //                 }]
-    //               })
-    //               i++;
-    //               if (i === len) {
-    //                 i = 0;
-    //               }
-    //             }, 2000);                
-    //            }
-    //         }
-    //     },
-    //     data: chartData
-    //   }]
-    // });
-    
-    // function autoTooltip(point) {
-    //   chart.tooltip.refresh(point);
-    // }
-      let myChart = echarts.init(this.$refs['echartR1'])
-      let option = {
-        tooltip: {
-          trigger: 'item',
-          //position: ['65%', '42%'],
-          position: (point,params,dom,rect,size) => {
-            if(params.name == '传统产业'){
-              return ['55%','25%']
-            } else if (params.name == '战略新兴产业') {
-              return ['55%','65%']
-            } else if (params.name == '基础产业') {
-              return ['18%','35%']
-            }
-    },
-          formatter: params => {
-            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.percent}% <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 金额：${params.value}亿`
-          },  //+ '<br/>'+ '{a1}：{c1}' + '%',
-          axisPointer: {
-            type: 'cross',
+            timer && clearInterval(timer);
+            timer = setInterval(function () {
+              autoTooltip(points[i]);
+              chartData.forEach((item,index) => {
+                item.sliced = false
+                item.selected = false
+                if(index == i){
+                  item.sliced = true
+                  item.selected = true
+                }
+              })
+              chart.update({
+                series:[{
+                  type: 'pie',
+                  name: '占比',
+                  point: {
+                    events:{
+                      click:function(e){
+                          if (e.point.name == '战略新兴产业') {
+                              that.tipTitle2 = e.point.name
+                              that.showTip2 = true
+                          }
+                      }
+                    }
+                  },
+                  data: chartData
+                }]
+              })
+              i++;
+              if (i === len) {
+                i = 0;
+              }
+            }, 2000);
           },
+          legendItemClick : function(event) {
+            console.log(event);
+            return true;
+          }
+        }
+      },
+      credits: {
+        enabled: false  //去掉hightchats水印
+      },
+      title: {
+        text: null
+      },
+      tooltip: {
+        crosshairs: true,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        useHTML: true, //开启html模式
+        style: {
+          color:'#fff',
         },
-        color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
-        legend: {
-          left: '2%',
-          bottom: '2%',
-          orient: 'vertical',
-          //right: '2%',
-          textStyle: {
-            color: '#9DB9EB',
-          },
+        formatter: function(e){
+          //console.log(this, e)
+          this.percentage = Math.round(this.percentage)
+          // e.options.backgroundColor = 'rgba(0,0,0,0.5)'
+          // e.options.style.color = '#fff'
+          return `${this.key}：<b>${this.percentage}%</b><br/>金额：<b>${this.y}</b>亿`
         },
-        series: [
-
-          // {
-          //   hoverOffset: 0,
-          //   startAngle: 90,
-          //   type: "pie",
-          //   radius: [48, 55],
-          //   center: ["50%", "50%"],
-          //   itemStyle: {
-          //     normal: {
-          //         borderColor: 'rgba(1,31,6,0.7)',
-          //         borderWidth: 4
-          //     }
-          //   },
-          //   tooltip: {
-          //     show: false
-          //   },
-          //   labelLine: {
-          //     show: false
-          //   },
-          //   label: {
-          //     show: false
-          //   },
-          //   data: industryList
-          // },
-          {
-            name: '',
-            type: 'pie',
-            radius: ['50%', '75%'],
-            center: ["50%", "50%"],
-            label:{
-              show: false,
-            },
-            itemStyle: {
-              normal: {
-                borderColor: 'rgba(1,31,64,0.7)',
-                borderWidth: 6
-              }
-            },
-            labelLine: {
-              show: false,
-            },
-            data: industryList,
-          },
-        ],
-      }
-      let that = this
-      myChart.on('click', function (param) {
-        if (param.name == '战略新兴产业') {
-          that.tipTitle2 = param.name
-          that.showTip2 = true
+        //pointFormat: 
+      },
+      legend: {
+        layout: 'vertical',  
+        align: 'left',
+        verticalAlign: 'bottom',
+        itemStyle:{
+          color: '#fff'
         }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: true,
+          showInLegend:  true, // 图例
+          cursor: 'pointer',
+          size: 180,
+          innerSize : 110, //环形图中间空白，0为饼图
+          depth: 28, //立体高度
+          slicedOffset: 23, //动画距离
+          dataLabels: {
+            enabled: false,  // 是否展示指示线
+            format: '{point.name}: {point.percentage}'
+          }
+        },
+      },
+      series: [{
+        type: 'pie',
+        name: '占比',
+        center: ['35%','50%'],
+        point: {
+            events:{
+                click:function(e){ //点击事件
+                    //console.log(e)
+                    if (e.point.name == '战略新兴产业') {
+                        that.tipTitle2 = e.point.name
+                        that.showTip2 = true
+                    }
+                },
+                mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
+                  //console.log(e) 
+                  chartData.forEach((item,index) => {
+                    item.sliced = false
+                    item.selected = false
+                 })
+                  chartData[e.target.index].sliced = true
+                  chartData[e.target.index].selected = true
+                  chart.update({
+                    series:[{
+                      type: 'pie',
+                      name: '占比',
+                      point: {
+                        events:{
+                          click:function(e){
+                              if (e.point.name == '战略新兴产业') {
+                                  that.tipTitle2 = e.point.name
+                                  that.showTip2 = true
+                              }
+                          }
+                        }
+                      },
+                      data: chartData
+                    }]
+                  })
+                  timer && clearInterval(timer);
+                },
+                mouseOut: function(){ // 鼠标移出后需要继续执行轮播
+                var points = chart.series[0].points;
+                var len = points.length;
+           
+                timer && clearInterval(timer);
+                timer = setInterval(function () {
+                  autoTooltip(points[i]);
+                  chartData.forEach((item,index) => {
+                    item.sliced = false
+                    item.selected = false
+                    if(index == i){
+                      item.sliced = true
+                      item.selected = true
+                    }
+                  })
+                  chart.update({
+                    series:[{
+                      type: 'pie',
+                      name: '占比',
+                      point: {
+                        events:{
+                          click:function(e){
+                              if (e.point.name == '战略新兴产业') {
+                                  that.tipTitle2 = e.point.name
+                                  that.showTip2 = true
+                              }
+                          }
+                        }
+                      },
+                      data: chartData
+                    }]
+                  })
+                  i++;
+                  if (i === len) {
+                    i = 0;
+                  }
+                }, 2000);                
+               }
+            }
+        },
+        data: chartData
+      }]
+    });
+    
+    function autoTooltip(point) {
+      chart.tooltip.refresh(point);
+    }
 
-      })
-      myChart.setOption(option)
-      tools.loopShowTooltip(myChart, option, {
-        nterval: 2000,
-        loopSeries: true,
-      })
+  //     let myChart = echarts.init(this.$refs['echartR1'])
+  //     let option = {
+  //       tooltip: {
+  //         trigger: 'item',
+  //         //position: ['65%', '42%'],
+  //         position: (point,params,dom,rect,size) => {
+  //           if(params.name == '传统产业'){
+  //             return ['55%','25%']
+  //           } else if (params.name == '战略新兴产业') {
+  //             return ['55%','65%']
+  //           } else if (params.name == '基础产业') {
+  //             return ['18%','35%']
+  //           }
+  //   },
+  //         formatter: params => {
+  //           return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.percent}% <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 金额：${params.value}亿`
+  //         },  //+ '<br/>'+ '{a1}：{c1}' + '%',
+  //         axisPointer: {
+  //           type: 'cross',
+  //         },
+  //       },
+  //       color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
+  //       legend: {
+  //         left: '2%',
+  //         bottom: '2%',
+  //         orient: 'vertical',
+  //         //right: '2%',
+  //         textStyle: {
+  //           color: '#9DB9EB',
+  //         },
+  //       },
+  //       series: [
+
+  //         // {
+  //         //   hoverOffset: 0,
+  //         //   startAngle: 90,
+  //         //   type: "pie",
+  //         //   radius: [48, 55],
+  //         //   center: ["50%", "50%"],
+  //         //   itemStyle: {
+  //         //     normal: {
+  //         //         borderColor: 'rgba(1,31,6,0.7)',
+  //         //         borderWidth: 4
+  //         //     }
+  //         //   },
+  //         //   tooltip: {
+  //         //     show: false
+  //         //   },
+  //         //   labelLine: {
+  //         //     show: false
+  //         //   },
+  //         //   label: {
+  //         //     show: false
+  //         //   },
+  //         //   data: industryList
+  //         // },
+  //         {
+  //           name: '',
+  //           type: 'pie',
+  //           radius: ['50%', '75%'],
+  //           center: ["50%", "50%"],
+  //           label:{
+  //             show: false,
+  //           },
+  //           itemStyle: {
+  //             normal: {
+  //               borderColor: 'rgba(1,31,64,0.7)',
+  //               borderWidth: 6
+  //             }
+  //           },
+  //           labelLine: {
+  //             show: false,
+  //           },
+  //           data: industryList,
+  //         },
+  //       ],
+  //     }
+  //     let that = this
+  //     myChart.on('click', function (param) {
+  //       if (param.name == '战略新兴产业') {
+  //         that.tipTitle2 = param.name
+  //         that.showTip2 = true
+  //       }
+
+  //     })
+  //     myChart.setOption(option)
+  //     tools.loopShowTooltip(myChart, option, {
+  //       nterval: 2000,
+  //       loopSeries: true,
+  //     })
     },
     initChartL2() {
       let myChart = echarts.init(this.$refs['echartL2'])
@@ -2101,293 +2111,293 @@ let app = new Vue({
     },
 
     initChartR2() {
-    //   var chartData = []
-    //   var timer = null;
-    //   var timer2 = null;
-    //   var i = 0;
+      var chartData = []
+      var timer = null;
+      var timer2 = null;
+      var i = 0;
 
-    //   chartDateR2.forEach((item,index) => {
-    //     let obj = {
-    //       name: item.name,
-    //       y: item.value2,
-    //       x: item.value,
-    //       sliced: false,
-    //       selected: false,
-    //       color: index == 0 ? '#43ede3' : '#8ba2ff'
-    //     }
-    //     chartData.push(obj)
+      chartDateR2.forEach((item,index) => {
+        let obj = {
+          name: item.name,
+          y: item.value2,
+          num: item.value,
+          sliced: false,
+          selected: false,
+          color: index == 0 ? '#43ede3' : '#8ba2ff'
+        }
+        chartData.push(obj)
         
-    //   })
-    //   let that = this
-    // var chart = Highcharts.chart('echartR2', {
-    //   chart: {
-    //     type: 'pie',
-    //     backgroundColor: 'rgba(0,0,0,0)',
-    //     options3d: {
-    //       enabled: true,
-    //       alpha: 45,
-    //       //beta: 0
-    //     },
-    //     events: {
-    //       // load，图表加载完成时触发
-    //       load: function () {
-    //         var chart = this;
+      })
+      let that = this
+    var chart = Highcharts.chart('echartR2', {
+      chart: {
+        type: 'pie',
+        backgroundColor: 'rgba(0,0,0,0)',
+        options3d: {
+          enabled: true,
+          alpha: 45,
+          //beta: 0
+        },
+        events: {
+          // load，图表加载完成时触发
+          load: function () {
+            var chart = this;
 
-    //         var points = chart.series[0].points;
-    //         var len = points.length;
+            var points = chart.series[0].points;
+            var len = points.length;
            
-    //         timer && clearInterval(timer);
-    //         timer = setInterval(function () {
-    //           autoTooltip(points[i]);
-    //           chartData.forEach((item,index) => {
-    //             item.sliced = false
-    //             item.selected = false
-    //             if(index == i){
-    //               item.sliced = true
-    //               item.selected = true
-    //             }
-    //           })
-    //           chart.update({
-    //             series:[{
-    //               type: 'pie',
-    //               name: '占比',
-    //               point: {
-    //                 events:{
-    //                   click:function(e){
-    //                       console.log(e)
-    //                   }
-    //                 }
-    //               },
-    //               data: chartData
-    //             }]
-    //           })
-    //           i++;
-    //           if (i === len) {
-    //             i = 0;
-    //             chartData.forEach((item,index) => {
-    //               item.sliced = false
-    //               item.selected = false
-    //             })
-    //             chart.update({
-    //               series:[{
-    //                 type: 'pie',
-    //                 name: '占比',
-    //                 point: {
-    //                   events:{
-    //                     click:function(e){
-    //                         console.log(e)
-    //                     }
-    //                   }
-    //                 },
-    //                 data: chartData
-    //               }]
-    //             })
-    //           }
-    //         }, 2000);
-    //       },
-    //       legendItemClick : function(event) {
-    //         console.log(event);
-    //         return true;
-    //       }
-    //     }
-    //   },
-    //   credits: {
-    //     enabled: false  //去掉hightchats水印
-    //   },
-    //   title: {
-    //     text: null
-    //   },
-    //   tooltip: {
-    //     crosshairs: true,
-    //     backgroundColor: 'rgba(0,0,0,0.5)',
-    //     // positioner: function(e){
-    //     //   console.log(e, this)
-    //     // },
-    //     useHTML: true, //开启html模式
-    //     style: {
-    //       color:'#fff',
-    //     },
-    //     formatter: function(e){
-    //       //console.log(this)
-    //       let num = chartData[this.colorIndex].x
-    //       this.percentage = Math.round(this.percentage)
-    //       return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
-    //     },
-    //     //pointFormat: 
-    //   },
-    //   legend: {
-    //     layout: 'vertical',  
-    //     align: 'left',
-    //     verticalAlign: 'bottom',
-    //     itemStyle:{
-    //       color: '#fff'
-    //     }
-    //   },
-    //   plotOptions: {
-    //     pie: {
-    //       allowPointSelect: true,
-    //       showInLegend:  true, // 图例
-    //       cursor: 'pointer',
-    //       size: 180,
-    //       innerSize : 110, //环形图中间空白，0为饼图
-    //       depth: 28, //立体高度
-    //       slicedOffset: 23, //动画距离
-    //       dataLabels: {
-    //         enabled: false,  // 是否展示指示线
-    //         format: '{point.name}: {point.percentage}'
-    //       }
-    //     },
-    //   },
-    //   series: [{
-    //     type: 'pie',
-    //     name: '占比',
-    //     center: ['35%','50%'],
-    //     point: {
-    //         events:{
-    //             click:function(e){ //点击事件
-                    
-    //             },
-    //             mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
-    //               //console.log(e) 
-    //               chartData.forEach((item,index) => {
-    //                 item.sliced = false
-    //                 item.selected = false
-    //              })
-    //               chartData[e.target.index].sliced = true
-    //               chartData[e.target.index].selected = true
-    //               chart.update({
-    //                 series:[{
-    //                   type: 'pie',
-    //                   name: '占比',
-    //                   point: {
-    //                     events:{
-    //                       click:function(e){
-    //                           console.log(e)
-    //                       }
-    //                     }
-    //                   },
-    //                   data: chartData
-    //                 }]
-    //               })
-    //               timer && clearInterval(timer);
-    //             },
-    //             mouseOut: function(){ // 鼠标移出后需要继续执行轮播
-    //             var points = chart.series[0].points;
-    //             var len = points.length;
-           
-    //             timer && clearInterval(timer);
-    //             timer = setInterval(function () {
-    //               autoTooltip(points[i]);
-    //               chartData.forEach((item,index) => {
-    //                 item.sliced = false
-    //                 item.selected = false
-    //                 if(index == i){
-    //                   item.sliced = true
-    //                   item.selected = true
-    //                 }
-    //               })
-    //               chart.update({
-    //                 series:[{
-    //                   type: 'pie',
-    //                   name: '占比',
-    //                   point: {
-    //                     events:{
-    //                       click:function(e){
-    //                           console.log(e)
-    //                       }
-    //                     }
-    //                   },
-    //                   data: chartData
-    //                 }]
-    //               })
-    //               i++;
-    //               if (i === len) {
-    //                 i = 0;
-    //                 chartData.forEach((item,index) => {
-    //                   item.sliced = false
-    //                   item.selected = false
-    //                 })
-    //                 chart.update({
-    //                   series:[{
-    //                     type: 'pie',
-    //                     name: '占比',
-    //                     point: {
-    //                       events:{
-    //                         click:function(e){
-    //                             console.log(e)
-    //                         }
-    //                       }
-    //                     },
-    //                     data: chartData
-    //                   }]
-    //                 })
-    //               }
-    //             }, 2000);                
-    //            }
-    //         }
-    //     },
-    //     data: chartData
-    //   }]
-    // });
-    
-    // function autoTooltip(point) {
-    //   chart.tooltip.refresh(point);
-    // }
-      let myChart = echarts.init(this.$refs['echartR2'])
-      let option = {
-        tooltip: {
-          trigger: 'item',
-          position: (point,params,dom,rect,size) => {
-                  if(params.name == '新建'){
-                    return ['55%','45%']
-                  } else {
-                    return ['15%','40%']
-                  }
-          },
-          formatter: params => {
-            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value}个 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资完成额：${params.data.value2}亿`
-          },  //+ '<br/>'+ '{a1}：{c1}' + '%',
-          axisPointer: {
-            type: 'cross',
+            timer && clearInterval(timer);
+            timer = setInterval(function () {
+              autoTooltip(points[i]);
+              chartData.forEach((item,index) => {
+                item.sliced = false
+                item.selected = false
+                if(index == i){
+                  item.sliced = true
+                  item.selected = true
+                }
+              })
+              chart.update({
+                series:[{
+                  type: 'pie',
+                  name: '占比',
+                  point: {
+                    events:{
+                      click:function(e){
+                          console.log(e)
+                      }
+                    }
+                  },
+                  data: chartData
+                }]
+              })
+              i++;
+              if (i === len) {
+                i = 0;
+                chartData.forEach((item,index) => {
+                  item.sliced = false
+                  item.selected = false
+                })
+                chart.update({
+                  series:[{
+                    type: 'pie',
+                    name: '占比',
+                    point: {
+                      events:{
+                        click:function(e){
+                            console.log(e)
+                        }
+                      }
+                    },
+                    data: chartData
+                  }]
+                })
+              }
+            }, 2000);
           },
+          legendItemClick : function(event) {
+            console.log(event);
+            return true;
+          }
+        }
+      },
+      credits: {
+        enabled: false  //去掉hightchats水印
+      },
+      title: {
+        text: null
+      },
+      tooltip: {
+        crosshairs: true,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        // positioner: function(e){
+        //   console.log(e, this)
+        // },
+        useHTML: true, //开启html模式
+        style: {
+          color:'#fff',
         },
-        color: [ '#43ede3', '#8ba2ff'],
-        legend: {
-          left: '5%',
-          bottom: '2%',
-          orient: 'vertical',
-          //right: '2%',
-          textStyle: {
-            color: '#9DB9EB',
-          },
+        formatter: function(e){
+          //console.log(this)
+          let num = chartData[this.colorIndex].num
+          this.percentage = Math.round(this.percentage)
+          return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
         },
-        series: [
-          {
-            name: '',
-            type: 'pie',
-            radius: ['50%', '75%'],
-            center: ["50%", "50%"],
-            label:{
-              show: false,
-            },
-            itemStyle: {
-              normal: {
-                borderColor: 'rgba(1,31,64,0.7)',
-                borderWidth: 6
-              }
-            },
-            labelLine: {
-              show: false,
-            },
-            data: chartDateR2,
-          },
-        ],
-      }
-      myChart.setOption(option)
-      tools.loopShowTooltip(myChart, option, {
-        nterval: 10000,
-        loopSeries: true,
-      })
+        //pointFormat: 
+      },
+      legend: {
+        layout: 'vertical',  
+        align: 'left',
+        verticalAlign: 'bottom',
+        itemStyle:{
+          color: '#fff'
+        }
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: true,
+          showInLegend:  true, // 图例
+          cursor: 'pointer',
+          size: 180,
+          innerSize : 110, //环形图中间空白，0为饼图
+          depth: 28, //立体高度
+          slicedOffset: 23, //动画距离
+          dataLabels: {
+            enabled: false,  // 是否展示指示线
+            format: '{point.name}: {point.percentage}'
+          }
+        },
+      },
+      series: [{
+        type: 'pie',
+        name: '占比',
+        center: ['35%','50%'],
+        point: {
+            events:{
+                click:function(e){ //点击事件
+                },
+                mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
+                  //console.log(e) 
+                  chartData.forEach((item,index) => {
+                    item.sliced = false
+                    item.selected = false
+                 })
+                  chartData[e.target.index].sliced = true
+                  chartData[e.target.index].selected = true
+                  chart.update({
+                    series:[{
+                      type: 'pie',
+                      name: '占比',
+                      point: {
+                        events:{
+                          click:function(e){
+                              console.log(e)
+                          }
+                        }
+                      },
+                      data: chartData
+                    }]
+                  })
+                  timer && clearInterval(timer);
+                },
+                mouseOut: function(){ // 鼠标移出后需要继续执行轮播
+                var points = chart.series[0].points;
+                var len = points.length;
+           
+                timer && clearInterval(timer);
+                timer = setInterval(function () {
+                  autoTooltip(points[i]);
+                  chartData.forEach((item,index) => {
+                    item.sliced = false
+                    item.selected = false
+                    if(index == i){
+                      item.sliced = true
+                      item.selected = true
+                    }
+                  })
+                  chart.update({
+                    series:[{
+                      type: 'pie',
+                      name: '占比',
+                      point: {
+                        events:{
+                          click:function(e){
+                              console.log(e)
+                          }
+                        }
+                      },
+                      data: chartData
+                    }]
+                  })
+                  i++;
+                  if (i === len) {
+                    i = 0;
+                    chartData.forEach((item,index) => {
+                      item.sliced = false
+                      item.selected = false
+                    })
+                    chart.update({
+                      series:[{
+                        type: 'pie',
+                        name: '占比',
+                        point: {
+                          events:{
+                            click:function(e){
+                                console.log(e)
+                            }
+                          }
+                        },
+                        data: chartData
+                      }]
+                    })
+                  }
+                }, 2000);                
+               }
+            }
+        },
+        data: chartData
+      }]
+    });
+    
+    function autoTooltip(point) {
+      chart.tooltip.refresh(point);
+    }
+
+      // let myChart = echarts.init(this.$refs['echartR2'])
+      // let option = {
+      //   tooltip: {
+      //     trigger: 'item',
+      //     position: (point,params,dom,rect,size) => {
+      //             if(params.name == '新建'){
+      //               return ['55%','45%']
+      //             } else {
+      //               return ['15%','40%']
+      //             }
+      //     },
+      //     formatter: params => {
+      //       return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value}个 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资完成额：${params.data.value2}亿`
+      //     },  //+ '<br/>'+ '{a1}：{c1}' + '%',
+      //     axisPointer: {
+      //       type: 'cross',
+      //     },
+      //   },
+      //   color: [ '#43ede3', '#8ba2ff'],
+      //   legend: {
+      //     left: '5%',
+      //     bottom: '2%',
+      //     orient: 'vertical',
+      //     //right: '2%',
+      //     textStyle: {
+      //       color: '#9DB9EB',
+      //     },
+      //   },
+      //   series: [
+      //     {
+      //       name: '',
+      //       type: 'pie',
+      //       radius: ['50%', '75%'],
+      //       center: ["50%", "50%"],
+      //       label:{
+      //         show: false,
+      //       },
+      //       itemStyle: {
+      //         normal: {
+      //           borderColor: 'rgba(1,31,64,0.7)',
+      //           borderWidth: 6
+      //         }
+      //       },
+      //       labelLine: {
+      //         show: false,
+      //       },
+      //       data: chartDateR2,
+      //     },
+      //   ],
+      // }
+      // myChart.setOption(option)
+      // tools.loopShowTooltip(myChart, option, {
+      //   nterval: 10000,
+      //   loopSeries: true,
+      // })
     },
     initProjectList() {
       let dataList = []