修改图表

investment/investHome.html

@@ -12,7 +12,7 @@
   <!-- 引入js -->
   <script src="./libs/vue@2.7.10.js"></script>
   <script src="./libs/datav.min.js"></script>
-  <script src="./libs/echarts.min.js"></script>
+  <script src="./libs/echarts.min2.js"></script>
   <script src="./libs/echarts-gl.min.js"></script>
   <script src="./libs/element-ui@2.15.9.js"></script>
   <script src="./libs/axios.min.js"></script>
@@ -35,11 +35,11 @@
             <div class="my-panel">
               <div class="panel-title">
                 <span class="text">投资关键指标</span>
-                <span class="right-date">
+                <!-- <span class="right-date">
                   <el-date-picker v-model="year" prefix-icon="el-icon-date" size="small" type="year"
                     popper-class="date-popper" :clearable="false" :editable="false" placeholder="选择年">
                   </el-date-picker>
-                </span>
+                </span> -->
               </div>
               <div class="content">
                 <div class="boxs">

investment/js/investHome.js

@@ -1046,498 +1046,529 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartL1() {
-      let myChart = echarts.init(this.$refs['echartR1'])
-      function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-
-        // 计算
-        let midRatio = (startRatio + endRatio) / 2;
+    // initChartL1() {
+    //   let myChart = echarts.init(this.$refs['echartR1'])
+    //   // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    //   function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
+    //     // 计算
+    //     let midRatio = (startRatio + endRatio) / 2;
 
-        let startRadian = startRatio * Math.PI * 2;
-        let endRadian = endRatio * Math.PI * 2;
-        let midRadian = midRatio * Math.PI * 2;
+    //     let startRadian = startRatio * Math.PI * 2;
+    //     let endRadian = endRatio * Math.PI * 2;
+    //     let midRadian = midRatio * Math.PI * 2;
 
-        // 如果只有一个扇形，则不实现选中效果。
-        if (startRatio === 0 && endRatio === 1) {
-          isSelected = false;
-        }
+    //     // 如果只有一个扇形，则不实现选中效果。
+    //     if (startRatio === 0 && endRatio === 1) {
+    //         isSelected = false;
+    //     }
 
-        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-        k = typeof k !== 'undefined' ? k : 1 / 3;
+    //     // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //     k = typeof k !== 'undefined' ? k : 1 / 3;
 
-        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //     // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //     let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //     let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
 
-        // 计算高亮效果的放大比例（未高亮，则比例为 1）
-        let hoverRate = isHovered ? 1.15 : 1;
+    //     // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //     let hoverRate = isHovered ? 1.07 : 1;
 
-        // 返回曲面参数方程
-        return {
+    //     // 返回曲面参数方程
+    //     return {
+    //         u: {
+    //             min: -Math.PI,
+    //             max: Math.PI * 3,
+    //             step: Math.PI / 32,
+    //         },
 
-          u: {
-            min: -Math.PI,
-            max: Math.PI * 3,
-            step: Math.PI / 32
-          },
+    //         v: {
+    //             min: 0,
+    //             max: Math.PI * 2,
+    //             step: Math.PI / 20,
+    //         },
 
-          v: {
-            min: 0,
-            max: Math.PI * 2,
-            step: Math.PI / 20
-          },
+    //         x: function (u, v) {
+    //             if (u < startRadian) {
+    //                 return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+    //             }
+    //             if (u > endRadian) {
+    //                 return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+    //             }
+    //             return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //         },
 
-          x: function (u, v) {
-            if (u < startRadian) {
-              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            if (u > endRadian) {
-              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-          },
+    //         y: function (u, v) {
+    //             if (u < startRadian) {
+    //                 return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+    //             }
+    //             if (u > endRadian) {
+    //                 return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+    //             }
+    //             return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //         },
 
-          y: function (u, v) {
-            if (u < startRadian) {
-              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            if (u > endRadian) {
-              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-          },
+    //         z: function (u, v) {
+    //             if (u < -Math.PI * 0.5) {
+    //                 return Math.sin(u);
+    //             }
+    //             if (u > Math.PI * 2.5) {
+    //                 return Math.sin(u);
+    //             }
+    //             return Math.sin(v) > 0 ? 1 : -1;
+    //         },
+    //     };
+    //   }
 
-          z: function (u, v) {
-            if (u < -Math.PI * 0.5) {
-              return Math.sin(u);
-            }
-            if (u > Math.PI * 2.5) {
-              return Math.sin(u) * h * .1;
-            }
-            return Math.sin(v) > 0 ? 1 * h * .1 : -1;
-          }
-        };
-      }
+    //   // 生成模拟 3D 饼图的配置项
+    //   function getPie3D(pieData, internalDiameterRatio) {
+    //     let series = [];
+    //     let sumValue = 0;
+    //     let startValue = 0;
+    //     let endValue = 0;
+    //     let legendData = [];
+    //     let k =
+    //         typeof internalDiameterRatio !== 'undefined'
+    //             ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+    //             : 1 / 3;
 
-      // 生成模拟 3D 饼图的配置项
-      function getPie3D(pieData, internalDiameterRatio) {
+    //     // 新增标签 series @20210613
+    //     let labelSeries = {
+    //         id: 'labelSeries',
+    //         type: 'bar3D',
+    //         //zlevel:-9,
+    //         barSize: [0.1, 0.1],
+    //         data: [],
+    //         label: {
+    //             show: true,
+    //             formatter: function (params) {
+    //                 return `${params.name}\n${params.value[3]}`;
+    //             },
+    //             backgroundColor: '#fff',
+    //         },
+    //     };
 
-        let series = [];
-        let sumValue = 0;
-        let startValue = 0;
-        let endValue = 0;
-        let legendData = [];
-        let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
+    //     // 为每一个饼图数据，生成一个 series-surface 配置
+    //     for (let i = 0; i < pieData.length; i++) {
+    //         sumValue += pieData[i].value;
 
-        // 为每一个饼图数据，生成一个 series-surface 配置
-        for (let i = 0; i < pieData.length; i++) {
+    //         let seriesItem = {
+    //             name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+    //             type: 'surface',
+    //             parametric: true,
+    //             wireframe: {
+    //                 show: false,
+    //             },
+    //             pieData: pieData[i],
+    //             pieStatus: {
+    //                 selected: false,
+    //                 hovered: false,
+    //                 k: k,
+    //             },
+    //         };
 
-          sumValue += pieData[i].value;
+    //         if (typeof pieData[i].itemStyle != 'undefined') {
+    //             let itemStyle = {};
 
-          let seriesItem = {
-            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
-            type: 'surface',
-            parametric: true,
-            wireframe: {
-              show: false
-            },
-            pieData: pieData[i],
-            pieStatus: {
-              selected: false,
-              hovered: false,
-              k: k
-            },
-            labelLine: {
-              color: "#f00",
-              emphasis: {
-                show: true
-              }
-            },
-          };
+    //             typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
+    //             typeof pieData[i].itemStyle.opacity != 'undefined'
+    //                 ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //                 : null;
 
-          if (typeof pieData[i].itemStyle != 'undefined') {
+    //             seriesItem.itemStyle = itemStyle;
+    //         }
+    //         series.push(seriesItem);
+    //     }
 
-            let itemStyle = {};
+    //     // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //     // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //     for (let i = 0; i < series.length; i++) {
+    //         endValue = startValue + series[i].pieData.value;
 
-            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
-            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
-            pieData[i].normal = {
-              borderColor: 'rgba(1,31,6,0.7)',
-              borderWidth: 4
-            }
-            seriesItem.itemStyle = itemStyle;
-          }
-          series.push(seriesItem);
+    //         series[i].pieData.startRatio = startValue / sumValue;
+    //         series[i].pieData.endRatio = endValue / sumValue;
+    //         series[i].parametricEquation = getParametricEquation(
+    //             series[i].pieData.startRatio,
+    //             series[i].pieData.endRatio,
+    //             false,
+    //             false,
+    //             k
+    //         );
 
-        }
+    //         startValue = endValue;
 
-        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-        for (let i = 0; i < series.length; i++) {
-          endValue = startValue + series[i].pieData.value;
-          series[i].pieData.startRatio = startValue / sumValue;
-          series[i].pieData.endRatio = endValue / sumValue;
-          series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
+    //         legendData.push(series[i].name);
 
-          startValue = endValue;
+    //         // 判断增加 label 效果 @20210613
+    //         if (pieData[i].label && pieData[i].label.show) {
+    //             labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
+    //             labelSeries.data.push({
+    //                 name: series[i].name,
+    //                 value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
+    //                 itemStyle: {
+    //                     opacity: 1,
+    //                 },
+    //             });
+    //         }
+    //     }
 
-          legendData.push(series[i].name);
-        }
+    //     // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+    //     series.push({
+    //         name: 'mouseoutSeries',
+    //         type: 'surface',
+    //         parametric: true,
+    //         wireframe: {
+    //             show: false,
+    //         },
+    //         itemStyle: {
+    //             opacity: 0,
+    //         },
+    //         parametricEquation: {
+    //             u: {
+    //                 min: 0,
+    //                 max: Math.PI * 2,
+    //                 step: Math.PI / 20,
+    //             },
+    //             v: {
+    //                 min: 0,
+    //                 max: Math.PI,
+    //                 step: Math.PI / 20,
+    //             },
+    //             x: function (u, v) {
+    //                 return Math.sin(v) * Math.sin(u) + Math.sin(u);
+    //             },
+    //             y: function (u, v) {
+    //                 return Math.sin(v) * Math.cos(u) + Math.cos(u);
+    //             },
+    //             z: function (u, v) {
+    //                 return Math.cos(v) > 0 ? 0.1 : -0.1;
+    //             },
+    //         },
+    //     });
 
-        // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
-        series.push({
-          name: 'mouseoutSeries',
-          type: 'surface',
-          parametric: true,
-          wireframe: {
-            show: false
-          },
-          itemStyle: {
-            opacity: 0
-          },
-          parametricEquation: {
-            u: {
-              min: 0,
-              max: Math.PI * 2,
-              step: Math.PI / 20
-            },
-            v: {
-              min: 0,
-              max: Math.PI,
-              step: Math.PI / 20
-            },
-            x: function (u, v) {
-              return Math.sin(v) * Math.sin(u) + Math.sin(u);
-            },
-            y: function (u, v) {
-              return Math.sin(v) * Math.cos(u) + Math.cos(u);
-            },
-            z: function (u, v) {
-              return Math.cos(v) > 0 ? 0.1 : -0.1;
-            }
-          }
-        });
-        //console.log(pieData)  线条配置
-        // series.push({
-        //   name: 'pied',
-        //   type: 'pie',
-        //   label: {
-        //     opacity: 1,
-        //     fontSize: 13,
-        //     lineHeight: 20,
-        //     textStyle: {
-        //       fontSize: 16,
-        //     },
-        //     // normal: {
-        //     //   formatter: function (params) {
-        //     //     console.log('par', params)
-        //     //     return params.name
-        //     //     //return `<span style="color:${params.itemStyle.color};">${params.name}:${params.value}</span>`;
-        //     //   },
-        //     // }
-        //   },
-        //   labelLine: {
-        //     length: 30,
-        //     length2: 18,
-        //   },
-        //   startAngle: -30, //起始角度，支持范围[0, 360]。
-        //   clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-        //   radius: ['20%', '50%'],
-        //   center: ['50%', '50%'],
-        //   data: pieData,
-        //   itemStyle: {
-        //     opacity: 0,
-        //   },
-        // });
+    //     // 将 labelSeries 添加进去 @20210613
+    //     series.push(labelSeries);
 
-        // 准备待返回的配置项，把准备好的 legendData、series 传入。
-        let option = {
-          //animation: false,
-          legend: {
-            data: legendData,
-            top: '5%',
-            //orient: 'vertical',
-            textStyle: {
-              color: '#fff',
-            },
-          },
-          tooltip: {
-            formatter: params => {
-              if (params.seriesName !== 'mouseoutSeries') {
-                return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;
-              }
-            }
-          },
-          xAxis3D: {
-            min: -1,
-            max: 1
-          },
-          yAxis3D: {
-            min: -1,
-            max: 1
-          },
-          zAxis3D: {
-            min: -1,
-            max: 1
-          },
-          grid3D: {
-            show: false,
-            boxHeight: 0.4,
-            viewControl: {//3d效果可以放大、旋转等，请自己去查看官方配置
-              alpha: 40,
-              // beta: 40,
-              rotateSensitivity: 0,
-              zoomSensitivity: 0,
-              panSensitivity: 1,
-              autoRotate: true
-            },
-            //后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
-            postEffect: {//配置这项会出现锯齿，请自己去查看官方配置有办法解决 
-              enable: true,
-              bloom: {
-                enable: true,
-                bloomIntensity: 0.2
-              },
-              SSAO: {
-                enable: true,
-                quality: 'medium',
-                radius: 1
-              }
-            }
-          },
-          series: series
-        };
-        return option;
-      }
+    //     // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //     let option = {
+    //         //animation: false,
+    //         legend: {
+    //           data: legendData,
+    //           op: '5%',
+    //           //orient: 'vertical',
+    //           textStyle: {
+    //            color: '#fff',
+    //           },
+    //         },
+    //         tooltip: {
+    //             formatter: (params) => {
+    //                 if (params.seriesName !== 'mouseoutSeries') {
+    //                     return `${
+    //                         params.seriesName
+    //                     }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+    //                         params.color
+    //                     };"></span>${option.series[params.seriesIndex].pieData.value}`;
+    //                 }
+    //             },
+    //         },
+    //         // 增加渐变色尝试（手动通过 seriesIndex 指定系列） @20211228
+            
+    //         xAxis3D: {
+    //             min: -1,
+    //             max: 1,
+    //         },
+    //         yAxis3D: {
+    //             min: -1,
+    //             max: 1,
+    //         },
+    //         zAxis3D: {
+    //             min: -1,
+    //             max: 1,
+    //         },
+    //         grid3D: {
+    //             show: false,
+    //             boxHeight: 10,
+    //             //top: '30%',
+    //             bottom: '50%',
+    //             viewControl: {
+    //               //3d效果可以放大、旋转等，请自己去查看官方配置
+    //               alpha: 30, //角度
+    //               distance: 150, //调整视角到主体的距离，类似调整zoom
+    //               rotateSensitivity: 0, //设置为0无法旋转
+    //               zoomSensitivity: 0, //设置为0无法缩放
+    //               panSensitivity: 0, //设置为0无法平移
+    //               autoRotate: false, //自动旋转
+    //             },
+    //         },
+    //         series: series,
+    //     };
+    //     return option;
+    //   }
 
-      // 传入数据生成 option
-      option = getPie3D([{
-        name: '传统产业投资',
-        value: 405.29,
-        itemStyle: {
-          color: '#f77b66'
-        }
-      }, {
-        name: '战略新兴产业投资',
-        value: 196.44,
-        itemStyle: {
-          color: '#3edce0'
-        }
-      }, {
-        name: '基础产业投资',
-        value: 722.34,
-        itemStyle: {
-          color: '#f94e76'
-        }
-      }], 0.39);
+    //   // 传入数据生成 option
+    //   option = getPie3D([
+    //     {
+    //         name: '传统产业投资',
+    //         value: 405.29,
+    //         itemStyle: {
+    //           color: '#6682f5'
+    //         }
+    //       }, {
+    //         name: '战略新兴产业投资',
+    //         value: 196.44,
+    //         itemStyle: {
+    //           color: '#69c0ff'
+    //         }
+    //       }, {
+    //         name: '基础产业投资',
+    //         value: 722.34,
+    //         itemStyle: {
+    //           color: '#43ede3'
+    //         }
+    //       }
+    //   ]);
+    //   myChart.setOption(option);
+    //   // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    //   let selectedIndex = '';
+    //   let hoveredIndex = '';
+    //   let that = this
+    //   // 监听点击事件，实现选中效果（单选）
+    //   myChart.on('click', function (param) {
+    //     console.log(param)
+    //     if (param.seriesName == '战略新兴产业投资') {
+    //         that.tipTitle2 = param.seriesName
+    //         that.showTip2 = true
+    //     }
 
-      myChart.setOption(option);
-      // tools.loopShowTooltip(myChart, option, {
-      //   nterval: 2000,
-      //   loopSeries: true,
-      // })
-      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
-      let selectedIndex = '';
-      let hoveredIndex = '';
+    //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+    //     // let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
+    //     // let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
+    //     // let k = option.series[params.seriesIndex].pieStatus.k;
+    //     // let startRatio = option.series[params.seriesIndex].pieData.startRatio;
+    //     // let endRatio = option.series[params.seriesIndex].pieData.endRatio;
 
-      // 监听点击事件，实现选中效果（单选）
-      let that = this
-      myChart.on('click', function (params) {
-        if (option.series[params.seriesIndex].name == '战略新兴产业投资') {
+    //     // // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+    //     // if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+    //     //     option.series[selectedIndex].parametricEquation = getParametricEquation(
+    //     //         option.series[selectedIndex].pieData.startRatio,
+    //     //         option.series[selectedIndex].pieData.endRatio,
+    //     //         false,
+    //     //         false,
+    //     //         k
+    //     //     );
+    //     //     option.series[selectedIndex].pieStatus.selected = false;
+    //     // }
 
-          that.tipTitle2 = option.series[params.seriesIndex].name
-          that.showTip2 = true
-        }
-        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
-        // let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
-        // let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
-        // let k = option.series[params.seriesIndex].pieStatus.k;
-        // let startRatio = option.series[params.seriesIndex].pieData.startRatio;
-        // let endRatio = option.series[params.seriesIndex].pieData.endRatio;
+    //     // // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+    //     // option.series[params.seriesIndex].parametricEquation = getParametricEquation(
+    //     //     startRatio,
+    //     //     endRatio,
+    //     //     isSelected,
+    //     //     isHovered,
+    //     //     k
+    //     // );
+    //     // option.series[params.seriesIndex].pieStatus.selected = isSelected;
 
+    //     // // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+    //     // isSelected ? (selectedIndex = params.seriesIndex) : null;
 
-        // // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
-        // if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
-        //   option.series[selectedIndex].parametricEquation = getParametricEquation(option.series[selectedIndex].pieData.startRatio, option.series[selectedIndex].pieData.endRatio, false, false, k, option.series[selectedIndex].pieData.value);
-        //   option.series[selectedIndex].pieStatus.selected = false;
-        // }
+    //     // // 使用更新后的 option，渲染图表
+    //     // myChart.setOption(option);
+    //   });
 
-        // // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
-        // option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[selectedIndex].pieData.value);
-        // option.series[params.seriesIndex].pieStatus.selected = isSelected;
+    //   // 监听 mouseover，近似实现高亮（放大）效果
+    //   myChart.on('mouseover', function (params) {
+    //     // 准备重新渲染扇形所需的参数
+    //     let isSelected;
+    //     let isHovered;
+    //     let startRatio;
+    //     let endRatio;
+    //     let k;
 
-        // // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
-        // isSelected ? selectedIndex = params.seriesIndex : null;
+    //     // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+    //     if (hoveredIndex === params.seriesIndex) {
+    //         return;
 
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(option);
-      });
+    //         // 否则进行高亮及必要的取消高亮操作
+    //     } else {
+    //         // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+    //         if (hoveredIndex !== '') {
+    //             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+    //             isSelected = option.series[hoveredIndex].pieStatus.selected;
+    //             isHovered = false;
+    //             startRatio = option.series[hoveredIndex].pieData.startRatio;
+    //             endRatio = option.series[hoveredIndex].pieData.endRatio;
+    //             k = option.series[hoveredIndex].pieStatus.k;
 
-      // 监听 mouseover，近似实现高亮（放大）效果
-      myChart.on('mouseover', function (params) {
+    //             // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+    //             option.series[hoveredIndex].parametricEquation = getParametricEquation(
+    //                 startRatio,
+    //                 endRatio,
+    //                 isSelected,
+    //                 isHovered,
+    //                 k
+    //             );
+    //             option.series[hoveredIndex].pieStatus.hovered = isHovered;
 
-        // 准备重新渲染扇形所需的参数
-        let isSelected;
-        let isHovered;
-        let startRatio;
-        let endRatio;
-        let k;
+    //             // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+    //             hoveredIndex = '';
+    //         }
 
-        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-        if (hoveredIndex === params.seriesIndex) {
-          return;
+    //         // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+    //         if (params.seriesName !== 'mouseoutSeries') {
+    //             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+    //             isSelected = option.series[params.seriesIndex].pieStatus.selected;
+    //             isHovered = true;
+    //             startRatio = option.series[params.seriesIndex].pieData.startRatio;
+    //             endRatio = option.series[params.seriesIndex].pieData.endRatio;
+    //             k = option.series[params.seriesIndex].pieStatus.k;
 
-          // 否则进行高亮及必要的取消高亮操作
-        } else {
+    //             // 对当前点击的扇形，执行高亮操作（对 option 更新）
+    //             option.series[params.seriesIndex].parametricEquation = getParametricEquation(
+    //                 startRatio,
+    //                 endRatio,
+    //                 isSelected,
+    //                 isHovered,
+    //                 k
+    //             );
+    //             option.series[params.seriesIndex].pieStatus.hovered = isHovered;
 
-          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-          if (hoveredIndex !== '') {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-            isSelected = option.series[hoveredIndex].pieStatus.selected;
-            isHovered = false;
-            startRatio = option.series[hoveredIndex].pieData.startRatio;
-            endRatio = option.series[hoveredIndex].pieData.endRatio;
-            k = option.series[hoveredIndex].pieStatus.k;
+    //             // 记录上次高亮的扇形对应的系列号 seriesIndex
+    //             hoveredIndex = params.seriesIndex;
+    //         }
 
-            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-            option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[hoveredIndex].pieData.value);
-            option.series[hoveredIndex].pieStatus.hovered = isHovered;
-
-            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-            hoveredIndex = '';
-          }
-
-          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-          if (params.seriesName !== 'mouseoutSeries') {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-            isSelected = option.series[params.seriesIndex].pieStatus.selected;
-            isHovered = true;
-            startRatio = option.series[params.seriesIndex].pieData.startRatio;
-            endRatio = option.series[params.seriesIndex].pieData.endRatio;
-            k = option.series[params.seriesIndex].pieStatus.k;
+    //         // 使用更新后的 option，渲染图表
+    //         myChart.setOption(option);
+    //     }
+    //   });
 
-            // 对当前点击的扇形，执行高亮操作（对 option 更新）
-            option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[params.seriesIndex].pieData.value + 5);
-            option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+    //   // 修正取消高亮失败的 bug
+    //   myChart.on('globalout', function () {
+    //     if (hoveredIndex !== '') {
+    //         // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+    //         isSelected = option.series[hoveredIndex].pieStatus.selected;
+    //         isHovered = false;
+    //         k = option.series[hoveredIndex].pieStatus.k;
+    //         startRatio = option.series[hoveredIndex].pieData.startRatio;
+    //         endRatio = option.series[hoveredIndex].pieData.endRatio;
 
-            // 记录上次高亮的扇形对应的系列号 seriesIndex
-            hoveredIndex = params.seriesIndex;
-          }
+    //         // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+    //         option.series[hoveredIndex].parametricEquation = getParametricEquation(
+    //             startRatio,
+    //             endRatio,
+    //             isSelected,
+    //             isHovered,
+    //             k
+    //         );
+    //         option.series[hoveredIndex].pieStatus.hovered = isHovered;
 
-          // 使用更新后的 option，渲染图表
+    //         // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+    //         hoveredIndex = '';
+    //     }
 
-          myChart.setOption(option);
-        }
-      });
+    //     // 使用更新后的 option，渲染图表
+    //     myChart.setOption(option);
+    //   });
 
-      // 修正取消高亮失败的 bug
-      myChart.on('globalout', function () {
-        if (hoveredIndex !== '') {
-          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-          isSelected = option.series[hoveredIndex].pieStatus.selected;
-          isHovered = false;
-          k = option.series[hoveredIndex].pieStatus.k;
-          startRatio = option.series[hoveredIndex].pieData.startRatio;
-          endRatio = option.series[hoveredIndex].pieData.endRatio;
+    //   // 新增监听图例事件，同步显示隐藏对应 label @20210613
+    //   myChart.on('legendselectchanged', function (params) {
+    //     let seriesLength = option.series.length;
+    //     console.log(option.series[seriesLength - 1].data);
+    //     for (let i = 0; i < option.series[seriesLength - 1].data.length; i++) {
+    //         console.log(option.series[seriesLength - 1].data[i]);
+    //         if (option.series[seriesLength - 1].data[i].name == params.name) {
+    //             console.log(option.series[seriesLength - 1].data[i]);
+    //             params.selected[params.name]
+    //                 ? (option.series[seriesLength - 1].data[i].itemStyle.opacity = 1)
+    //                 : (option.series[seriesLength - 1].data[i].itemStyle.opacity = 0);
+    //         }
+    //     }
+    //     myChart.setOption(option);
+    //   });
 
-          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-          option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[hoveredIndex].pieData.value);
-          option.series[hoveredIndex].pieStatus.hovered = isHovered;
+    //   console.log('66', myChart);
+    // },
+    initChartL1 () {
+      let myChart = echarts.init(this.$refs['echartR1'])
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          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.percent}%`
+          },  //+ '<br/>'+ '{a1}：{c1}' + '%',
+          axisPointer: {
+            type: 'cross',
+          },
+        },
+        color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
+        legend: {
+          top: '2%',
+          //orient: 'vertical',
+          //right: '2%',
+          textStyle: {
+            color: '#9DB9EB',
+          },
+        },
+        series: [
 
-          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-          hoveredIndex = '';
+          // {
+          //   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%", "57%"],
+            itemStyle: {
+              normal: {
+                borderColor: 'rgba(1,31,64,0.7)',
+                borderWidth: 6
+              }
+            },
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  width: 1,
+                },
+              },
+            },
+            data: industryList,
+          },
+        ],
+      }
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        if (param.name == '战略新兴产业投资') {
+          that.tipTitle2 = param.name
+          that.showTip2 = true
         }
 
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(option);
-
-      });
-      //var zrender = myChart.getZrender();
-      //var elements = zrender.storage._elements;
-      console.log('66', myChart);
+      })
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
     },
-    // initChartL1 () {
-    //   let myChart = echarts.init(this.$refs['echartR1'])
-    //   let option = {
-    //     tooltip: {
-    //       trigger: 'item',
-    //       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.percent}%`
-    //       },  //+ '<br/>'+ '{a1}：{c1}' + '%',
-    //       axisPointer: {
-    //         type: 'cross',
-    //       },
-    //     },
-    //     color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
-    //     legend: {
-    //       top: 'center',
-    //       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: ['55%', '80%'],
-    //         itemStyle: {
-    //           normal: {
-    //             borderColor: 'rgba(1,31,64,0.7)',
-    //             borderWidth: 6
-    //           }
-    //         },
-    //         labelLine: {
-    //           normal: {
-    //             lineStyle: {
-    //               width: 1,
-    //             },
-    //           },
-    //         },
-    //         data: industryList,
-    //       },
-    //     ],
-    //   }
-    //   let that = this
-    //   myChart.on('click', function (param) {
-    //     console.log(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'])
       let option = {
@@ -1774,17 +1805,17 @@ let app = new Vue({
     initProjectList() {
       let dataList = []
       projectList.map(item => {
-        dataList.push([item.name, item.office, item.value + '亿', item.status])
+        dataList.push([item.name, item.office, item.value + '亿'])
       })
       this.storageRecordConfig = {
-        header: ['项目名称', '企业集团', '投资金额', '项目进度'],
+        header: ['项目名称', '企业集团', '投资金额'],
         headerBGC: '#05507b33',
         oddRowBGC: '#05507b33',
         evenRowBGC: '',
         headerHeight: '40',
         rowNum: 5,
-        //columnWidth: [150],
-        align: ['center', 'center', 'center', 'center'],
+        columnWidth: [350],
+        align: ['center', 'center', 'center'],
         data: dataList,
       }
     }