还原图表

src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js

@@ -1,86 +0,0 @@
-import * as echarts from 'echarts'
-export function lineOption () {
-
-  return {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
-      }
-    },
-    xAxis: {
-      type: 'category',
-      // boundaryGap: false,
-      axisLabel: {
-        color: '#8ec7dc',
-        fontSize: 16
-      },
-      axisTick: {
-        show: false
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#0c4b59'
-        }
-      }
-    },
-    yAxis: {
-      nameTextStyle: {
-        color: '#8ec7dc',
-        fontSize: 18
-      },
-      splitNumber: 4,
-      minInterval: 1,
-      show: true,
-      type: 'value',
-      axisLabel: {
-        color: '#8ec7dc',
-        fontSize: 18
-      },
-      axisTick: {
-        show: false
-      },
-      splitLine: {
-        lineStyle: {
-          color: ['#145968'],
-          type: 'dotted'
-        }
-      },
-      axisLine: {
-        show: true,
-        symbol: ['none', 'arrow'],
-        symbolOffset: [0, 15],
-        lineStyle: {
-          color: '#0c4b59'
-        }
-      }
-    },
-    series: [
-      {
-        name: '项目数',
-        type: 'line',
-        smooth: true,
-        barWidth: 15,
-        areaStyle: {},
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(
-            0, 1, 0, 0,
-            [
-              { offset: 0, color: 'rgba(121, 55, 255, 0)' },
-              { offset: 1, color: '#6339FF' }
-            ]
-          )
-        }
-      },
-      // {
-      //   data: [820, 932, 901, 934, 1290, 1330, 1320],
-      //   type: 'line',
-      //   areaStyle: {}
-      // }
-    ]
-
-  }
-}

src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js

@@ -1,183 +0,0 @@
-
-export function pieOption (_charts) {
-const center= ['50%', '170px']
-  return {
-    title: {
-      text: '0',
-      top: 140,
-      left: 'center',
-      textStyle: {
-        width: '100%',
-        fontSize: 32,
-        color: '#FFFFFF',
-        fontWeight: 400
-      },
-      itemGap: 5,
-      subtext: '总数',
-      subtextStyle: {
-        fontSize: 20,
-        color: '#fff',
-        fontWeight: 400
-      }
-    },
-    tooltip: {
-      show: false
-    },
-    // legend: {
-      // top: 350,
-      // bottom: 0,
-      // itemWidth: 20,
-      // itemHeight: 10,
-      // textStyle: {
-      //   color: '#D2E7FF',
-      //   fontSize: 16,
-      //   lineHeight: 20,
-      // },
-    
-    // },
-    series: [
-      // 外侧圆环
-      {
-        type: 'pie',
-        // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
-        startAngle: 0,
-        hoverAnimation: false,
-        // tooltip: {
-        // },
-        center: center,
-        radius: ['58%', '58.3%'],
-        label: {
-          normal: {
-            show: false
-          }
-        },
-        labelLine: {
-          normal: {
-            show: false
-          }
-        },
-        data: [{
-          value: 360,
-          itemStyle: {
-            normal: {
-              color: 'rgba(40, 101, 250, 0)',
-              width:0,
-              borderColor: 'rgba(40, 101, 250, 0.5)',
-              borderWidth: 1,
-              borderType: 'dotted'
-            }
-          }
-        }
-        ]
-      },
-
-      // 突出的
-      {
-        hoverAnimation: false,
-        // name: 'Access From',
-        type: 'pie',
-        center: center,
-        radius: ['35%', '48%'],
-        avoidLabelOverlap: false,
-        // top: top + '%',
-        // height: '80%',
-        selectedMode: 'single',
-        left: 'center',
-        width: 400,
-        label: {
-          // show: false,
-          position: 'outside',
-          alignTo: 'edge',
-          // formatter: '{a|{c}}\n\n{name|{b}}',
-          formatter: '{a|{c}%}\n{r|}\n{name|{b}}',
-          minMargin: 5,
-          edgeDistance: 1,
-          lineHeight: 15,
-          color: '#fff',
-          fontSize: 12,
-          // distanceToLabelLine: -60,
-          rich: {
-            name: {
-              padding: [0, 6, 0, 6]
-            },
-            a: {
-              fontSize: 30,
-              color: '#fff',
-              padding: [0, 6, 6, 6]
-            },
-            r: {
-              backgroundColor: 'auto',
-              borderRadius: 6,
-              width: 6,
-              height: 6,
-              // padding: [3, 3, 0, -12]
-            }
-          }
-        },
-        labelLine: {
-          show: false,
-          smooth: 0.2,
-          length: 30,
-          length2: 0,
-          maxSurfaceAngle: 80
-        },
-        labelLayout: function (params) {
-          
-          const isLeft = params.labelRect.x < _charts.getWidth() / 2;
-          const points = params.labelLinePoints;
-          // Update the end point.
-          if (points) {
-            points[2][0] = isLeft
-            ? params.labelRect.x
-            : params.labelRect.x + params.labelRect.width;
-          }
-          
-          return {
-            labelLinePoints: points
-          };
-        },
-        itemStyle: {
-           color:function(params) {
-          //自定义颜色
-          var colorList = [ '#FAC126', '#3DDA83'];
-            return colorList[params.dataIndex]
-          }
-        },
-        data: [],
-
-      },
-         // 中间圆环
-         {
-          type: 'pie',
-          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
-          startAngle: 0,
-          hoverAnimation: false,
-          center: center,
-          // tooltip: {
-          // },
-          radius: ['0%', '25%'],
-          label: {
-          
-              show: false
-           
-          },
-          labelLine: {
-           
-              show: false
-          
-          },
-          data: [{
-            value: 360,
-            itemStyle: {
-              normal: {
-                color: 'rgba(8, 37, 134, 1)',
-            
-              }
-            }
-          }
-          ]
-        },
-    ]
-
-  }
-}

src/views/modules/visual/communityGovern/shijianchuli/pieOption.js

@@ -1,183 +1,184 @@
 
 export function pieOption (_charts) {
-const center= ['50%', '170px']
-  return {
-    title: {
-      text: '0',
-      top: 140,
-      left: 'center',
-      textStyle: {
-        width: '100%',
-        fontSize: 32,
-        color: '#FFFFFF',
-        fontWeight: 400
-      },
-      itemGap: 5,
-      subtext: '总数',
-      subtextStyle: {
-        fontSize: 20,
-        color: '#fff',
-        fontWeight: 400
-      }
-    },
-    tooltip: {
-      show: false
-    },
-    // legend: {
-      // top: 350,
-      // bottom: 0,
-      // itemWidth: 20,
-      // itemHeight: 10,
-      // textStyle: {
-      //   color: '#D2E7FF',
-      //   fontSize: 16,
-      //   lineHeight: 20,
-      // },
-    
-    // },
-    series: [
-      // 外侧圆环
-      {
-        type: 'pie',
-        // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
-        startAngle: 0,
-        hoverAnimation: false,
-        // tooltip: {
-        // },
-        center: center,
-        radius: ['58%', '58.3%'],
-        label: {
-          normal: {
-            show: false
-          }
-        },
-        labelLine: {
-          normal: {
-            show: false
-          }
+  const center= ['50%', '170px']
+    return {
+      title: {
+        text: '0',
+        top: 140,
+        left: 'center',
+        textStyle: {
+          width: '100%',
+          fontSize: 32,
+          color: '#FFFFFF',
+          fontWeight: 400
         },
-        data: [{
-          value: 360,
-          itemStyle: {
-            normal: {
-              color: 'rgba(40, 101, 250, 0)',
-              width:0,
-              borderColor: 'rgba(40, 101, 250, 0.5)',
-              borderWidth: 1,
-              borderType: 'dotted'
-            }
-          }
+        itemGap: 5,
+        subtext: '总数',
+        subtextStyle: {
+          fontSize: 20,
+          color: '#fff',
+          fontWeight: 400
         }
-        ]
       },
-
-      // 突出的
-      {
-        hoverAnimation: false,
-        // name: 'Access From',
-        type: 'pie',
-        center: center,
-        radius: ['35%', '48%'],
-        avoidLabelOverlap: false,
-        // top: top + '%',
-        // height: '80%',
-        selectedMode: 'single',
-        left: 'center',
-        width: 400,
-        label: {
-          // show: false,
-          position: 'outside',
-          alignTo: 'edge',
-          // formatter: '{a|{c}}\n\n{name|{b}}',
-          formatter: '{a|{c}%}\n{r|}\n{name|{b}}',
-          minMargin: 5,
-          edgeDistance: 1,
-          lineHeight: 15,
-          color: '#fff',
-          fontSize: 12,
-          // distanceToLabelLine: -60,
-          rich: {
-            name: {
-              padding: [0, 6, 0, 6]
-            },
-            a: {
-              fontSize: 30,
-              color: '#fff',
-              padding: [0, 6, 6, 6]
-            },
-            r: {
-              backgroundColor: 'auto',
-              borderRadius: 6,
-              width: 6,
-              height: 6,
-              // padding: [3, 3, 0, -12]
-            }
-          }
-        },
-        labelLine: {
-          show: false,
-          smooth: 0.2,
-          length: 30,
-          length2: 0,
-          maxSurfaceAngle: 80
-        },
-        labelLayout: function (params) {
-          
-          const isLeft = params.labelRect.x < _charts.getWidth() / 2;
-          const points = params.labelLinePoints;
-          // Update the end point.
-          if (points) {
-            points[2][0] = isLeft
-            ? params.labelRect.x
-            : params.labelRect.x + params.labelRect.width;
-          }
-          
-          return {
-            labelLinePoints: points
-          };
-        },
-        itemStyle: {
-           color:function(params) {
-          //自定义颜色
-          var colorList = [ '#FAC126', '#3DDA83'];
-            return colorList[params.dataIndex]
-          }
-        },
-        data: [],
-
+      tooltip: {
+        show: false
       },
-         // 中间圆环
-         {
+      // legend: {
+        // top: 350,
+        // bottom: 0,
+        // itemWidth: 20,
+        // itemHeight: 10,
+        // textStyle: {
+        //   color: '#D2E7FF',
+        //   fontSize: 16,
+        //   lineHeight: 20,
+        // },
+      
+      // },
+      series: [
+        // 外侧圆环
+        {
           type: 'pie',
           // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
           startAngle: 0,
           hoverAnimation: false,
-          center: center,
           // tooltip: {
           // },
-          radius: ['0%', '25%'],
+          center: center,
+          radius: ['58%', '58.3%'],
           label: {
-          
+            normal: {
               show: false
-           
+            }
           },
           labelLine: {
-           
+            normal: {
               show: false
-          
+            }
           },
           data: [{
             value: 360,
             itemStyle: {
               normal: {
-                color: 'rgba(8, 37, 134, 1)',
-            
+                color: 'rgba(40, 101, 250, 0)',
+                width:0,
+                borderColor: 'rgba(40, 101, 250, 0.5)',
+                borderWidth: 1,
+                borderType: 'dotted'
               }
             }
           }
           ]
         },
-    ]
-
+  
+        // 突出的
+        {
+          hoverAnimation: false,
+          // name: 'Access From',
+          type: 'pie',
+          center: center,
+          radius: ['35%', '48%'],
+          avoidLabelOverlap: false,
+          // top: top + '%',
+          // height: '80%',
+          selectedMode: 'single',
+          left: 'center',
+          width: 400,
+          label: {
+            // show: false,
+            position: 'outside',
+            alignTo: 'edge',
+            // formatter: '{a|{c}}\n\n{name|{b}}',
+            formatter: '{a|{c}%}\n{r|}\n{name|{b}}',
+            minMargin: 5,
+            edgeDistance: 1,
+            lineHeight: 15,
+            color: '#fff',
+            fontSize: 12,
+            // distanceToLabelLine: -60,
+            rich: {
+              name: {
+                padding: [0, 6, 0, 6]
+              },
+              a: {
+                fontSize: 30,
+                color: '#fff',
+                padding: [0, 6, 6, 6]
+              },
+              r: {
+                backgroundColor: 'auto',
+                borderRadius: 6,
+                width: 6,
+                height: 6,
+                // padding: [3, 3, 0, -12]
+              }
+            }
+          },
+          labelLine: {
+            show: false,
+            smooth: 0.2,
+            length: 30,
+            length2: 0,
+            maxSurfaceAngle: 80
+          },
+          labelLayout: function (params) {
+            
+            const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+            const points = params.labelLinePoints;
+            // Update the end point.
+            if (points) {
+              points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+            }
+            
+            return {
+              labelLinePoints: points
+            };
+          },
+          itemStyle: {
+             color:function(params) {
+            //自定义颜色
+            var colorList = [ '#FAC126', '#3DDA83'];
+              return colorList[params.dataIndex]
+            }
+          },
+          data: [],
+  
+        },
+           // 中间圆环
+           {
+            type: 'pie',
+            // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+            startAngle: 0,
+            hoverAnimation: false,
+            center: center,
+            // tooltip: {
+            // },
+            radius: ['0%', '25%'],
+            label: {
+            
+                show: false
+             
+            },
+            labelLine: {
+             
+                show: false
+            
+            },
+            data: [{
+              value: 360,
+              itemStyle: {
+                normal: {
+                  color: 'rgba(8, 37, 134, 1)',
+              
+                }
+              }
+            }
+            ]
+          },
+      ]
+  
+    }
   }
-}
+  

src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue

@@ -23,7 +23,7 @@
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
-                       @click.native="handleChangeDate(item.value,true)">
+                       @click.native="handleChangeDate(item.value)">
             </el-option>
           </el-select>
         </div>
@@ -47,32 +47,26 @@
     </div>
     <div class="g-cpt-resi">
       <div class="g-l">
-        <div class="bottom_label"
-             style="margin-top:20px">事件总览</div>
         <div class="l_top">
 
           <div v-if="!pieNoData && !dataLoading"
                class="g-pie">
-            <div class="chart-container">
-              <div class="chart"
-                   id="cityGreenLand"
-                   ref="chart"></div>
-              <!-- <screen-echarts-frame class="echart-wr"
+            <screen-echarts-frame class="echart-wr"
                                   @myChartMethod="pieInitOk"
-                                  ref="pieChart"></screen-echarts-frame> -->
-              <!-- 底座背景 -->
-              <div class="bg"></div>
-            </div>
+                                  ref="pieChart"></screen-echarts-frame>
 
-            <!-- <div class="pie-legend">
+            <div class="pie-legend">
               <div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
                    v-for="(item,index) in legendArray"
                    :key="index">
                 <div class="item_name">{{item.name}}</div>
                 <img :src="item.url" />
-               
+                <!-- <div class="item_num">
+                  <span class="item_count">{{item.count}}</span>
+                  <span class="item_percent">{{item.percent}}</span>
+                </div> -->
               </div>
-            </div> -->
+            </div>
 
           </div>
           <screen-nodata class="nodata"
@@ -146,11 +140,6 @@ import { lineOption } from './lineOption.js'
 import nextTick from 'dai-js/tools/nextTick'
 import dateFormat from "dai-js/tools/dateFormat";
 
-import * as echarts from 'echarts';
-import 'echarts-gl';
-import { getPie3D, getParametricEquation } from './chart.js' //工具类js，页面路径自己修改
-
-const color = ['#005aff', '#f8b551']
 
 export default {
   name: "shijianchulifenxi",
@@ -180,18 +169,6 @@ export default {
 
 
       pieData: [],
-      optionData: [
-        {
-          name: '处理中',
-          value: 28
-        },
-        {
-          name: '已完成',
-          value: 72
-        }
-      ],
-      statusChart: null,
-      option: {},
 
       legendArray: [
         {
@@ -315,23 +292,21 @@ export default {
     //初始化时间、各组件
     this.initData()
     await this.getAgencylist()//获取组织级别
-    this.handleChangeDate(this.dataType, false)
+    this.handleChangeDate(this.dataType)
     //获取服务器数据
-
     await this.getProjectTotal()
     await this.getLineChart()
-    await this.getTable()
 
     this.dataLoading = false
 
 
-    this.assignData()
+    // this.assignData()
 
   },
 
   methods: {
     async getApiData () {
-      this.getTable()
+
       await this.getProjectTotal()
       await this.getLineChart()
 
@@ -339,7 +314,7 @@ export default {
 
     },
 
-    async handleChangeDate (index, isRefresh) {
+    async handleChangeDate (index) {
       let end = new Date();
       let start = new Date();
       if (index === '1') {//近一年
@@ -358,7 +333,7 @@ export default {
         this.queryStartTime = dateFormat(start, 'yyyy-MM-dd') + " 00:00:00"
         this.queryEndTime = dateFormat(end, 'yyyy-MM-dd') + " 23:59:59"
       }
-      if (index !== '0' && isRefresh) {
+      if (index !== '0') {
         await this.getApiData()
         // this.assignPieChart()
       }
@@ -367,8 +342,8 @@ export default {
     },
 
     assignData () {
-      this.initChart()
-      // this.getPie()
+
+      this.getPie()
       this.getLine()
     },
 
@@ -409,10 +384,10 @@ export default {
 
     //加载项目
     async getProjectTotal () {
-      // if (this.$refs.pieChart) {
-      //   this.$refs.pieChart.showLoading()
-      //   this.$refs.pieChart.clear()
-      // }
+      if (this.$refs.pieChart) {
+        this.$refs.pieChart.showLoading()
+        this.$refs.pieChart.clear()
+      }
 
       const url = "/gov/project/icEvent/processAnalysis/processStatusRatio";
       //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/processStatusRatio";
@@ -424,9 +399,9 @@ export default {
       };
 
       const { data, code, msg } = await requestPost(url, params);
-      // if (this.$refs.pieChart) {
-      //   this.$refs.pieChart.hideLoading()
-      // }
+      if (this.$refs.pieChart) {
+        this.$refs.pieChart.hideLoading()
+      }
       if (code === 0) {
         this.projectTotal = parseInt(data.processingCount) + parseInt(data.closedCount);
 
@@ -445,7 +420,7 @@ export default {
           }
         ]
 
-        this.optionData = [
+        this.pieData = [
 
           {
             name: "已完成",
@@ -456,7 +431,6 @@ export default {
             value: Math.floor(data.processingRatio * 10000) / 100
           },
         ]
-        this.setLabel()
 
       } else {
         this.$message.error(msg);
@@ -590,7 +564,6 @@ export default {
         xAxis: { data: this.lineXaxis },
         series: [
           { data: this.lineSeriesData },
-          { data: this.lineSeriesData },
 
         ]
       }, true)
@@ -682,6 +655,8 @@ export default {
         }
       });
 
+
+
       this.pieOption.series[1].data = this.pieData
       this.demand.pageNo = 1
       this.getTable()
@@ -690,256 +665,6 @@ export default {
       this.$refs.pieChart.setOption(this.pieOption)
     },
 
-    setLabel () {
-      this.optionData.forEach((item, index) => {
-
-        item.itemStyle = {
-          color: color[index]
-        }
-        item.label = {
-          normal: {
-            show: true,
-            color: color[index],
-            formatter: [
-              '{d|{d}%}',
-              '{b|{b}}'
-
-
-            ].join('\n'), // 用\n来换行
-            rich: {
-              b: {
-                color: '#fff',
-                lineHeight: 25,
-                align: 'left',
-                fontSize: 13,
-                marginTop: 20
-              },
-              c: {
-                fontSize: 22,
-                color: '#fff',
-                textShadowColor: '#1c90a6',
-                textShadowOffsetX: 0,
-                textShadowOffsetY: 2,
-                textShadowBlur: 5
-              },
-              d: {
-                color: color[index],
-                fontSize: 22,
-                align: 'left'
-              }
-            }
-          }
-        }
-        item.labelLine = {
-          normal: {
-            length: 30,
-            length2: 80,
-            lineStyle: {
-              width: 1,
-              color: 'rgba(255,255,255,0.7)'
-            }
-          }
-        }
-        item.labelLayout = function (params) {
-          const isLeft = params.labelRect.x < myChart.getWidth() / 2;
-          const points = params.labelLinePoints;
-          // Update the end point.
-          points[2][0] = isLeft
-            ? params.labelRect.x
-            : params.labelRect.x + params.labelRect.width;
-          return {
-            labelLinePoints: points
-          };
-        }
-      })
-    },
-
-    // 图表初始化
-    initChart () {
-      this.$nextTick(() => {
-        // let statusChart = echarts.init(document.getElementById('cityGreenLand-charts'));
-        this.statusChart = echarts.init(document.getElementById('cityGreenLand'));
-        // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
-        this.option = getPie3D(this.optionData, 0.8, 300, 28, 22, 0.4)
-        this.statusChart.setOption(this.option)
-        // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
-        this.option.series.push({
-          name: '', //自己根据场景修改
-          backgroundColor: 'transparent',
-          type: 'pie',
-          label: {
-            opacity: 1,
-            fontSize: 13,
-            lineHeight: 20
-          },
-          startAngle: 40, // 起始角度，支持范围[0, 360]。
-          clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-          radius: ['30%', '35%'],
-          center: ['50%', '50%'],
-          data: this.optionData,
-          itemStyle: {
-            opacity: 0  //这里必须是0，不然2d的图会覆盖在表面
-          }
-        })
-        this.statusChart.setOption(this.option)
-        this.bindListen(this.statusChart)
-      })
-
-    },
-    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
-    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
-    bindListen (myChart, optionName = 'option') {
-      let selectedIndex = ''
-      let hoveredIndex = ''
-      // 监听点击事件，实现选中效果（单选）
-      myChart.on('click', (params) => {
-        debugger
-        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
-        const isSelected = !this[optionName].series[params.seriesIndex].pieStatus
-          .selected
-        const isHovered =
-          this[optionName].series[params.seriesIndex].pieStatus.hovered
-        const k = this[optionName].series[params.seriesIndex].pieStatus.k
-        const startRatio =
-          this[optionName].series[params.seriesIndex].pieData.startRatio
-        const endRatio =
-          this[optionName].series[params.seriesIndex].pieData.endRatio
-        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
-        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
-          this[optionName].series[
-            selectedIndex
-          ].parametricEquation = getParametricEquation(
-            this[optionName].series[selectedIndex].pieData.startRatio,
-            this[optionName].series[selectedIndex].pieData.endRatio,
-            false,
-            false,
-            k,
-            this[optionName].series[selectedIndex].pieData.value
-          )
-          this[optionName].series[selectedIndex].pieStatus.selected = false
-        }
-        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
-        this[optionName].series[
-          params.seriesIndex
-        ].parametricEquation = getParametricEquation(
-          startRatio,
-          endRatio,
-          isSelected,
-          isHovered,
-          k,
-          this[optionName].series[params.seriesIndex].pieData.value
-        )
-        this[optionName].series[params.seriesIndex].pieStatus.selected = isSelected
-        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
-        selectedIndex = isSelected ? params.seriesIndex : null
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(this[optionName])
-      })
-      // 监听 mouseover，近似实现高亮（放大）效果
-      myChart.on('mouseover', (params) => {
-        // 准备重新渲染扇形所需的参数
-        let isSelected
-        let isHovered
-        let startRatio
-        let endRatio
-        let k
-        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-        if (hoveredIndex === params.seriesIndex) {
-          // 否则进行高亮及必要的取消高亮操作
-        } else {
-          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-          if (hoveredIndex !== '') {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-            isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
-            isHovered = false
-            startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
-            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
-            k = this[optionName].series[hoveredIndex].pieStatus.k
-            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-            this[optionName].series[
-              hoveredIndex
-            ].parametricEquation = getParametricEquation(
-              startRatio,
-              endRatio,
-              isSelected,
-              isHovered,
-              k,
-              this[optionName].series[hoveredIndex].pieData.value
-            )
-            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
-            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-            hoveredIndex = ''
-          }
-          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-          if (
-            params.seriesName !== 'mouseoutSeries' &&
-            params.seriesName !== 'pie2d'
-          ) {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-            isSelected =
-              this[optionName].series[params.seriesIndex].pieStatus.selected
-            isHovered = true
-            startRatio =
-              this[optionName].series[params.seriesIndex].pieData.startRatio
-            endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio
-            k = this[optionName].series[params.seriesIndex].pieStatus.k
-            // 对当前点击的扇形，执行高亮操作（对 option 更新）
-            this[optionName].series[
-              params.seriesIndex
-            ].parametricEquation = getParametricEquation(
-              startRatio,
-              endRatio,
-              isSelected,
-              isHovered,
-              k,
-              this[optionName].series[params.seriesIndex].pieData.value + 60
-            )
-            this[optionName].series[
-              params.seriesIndex
-            ].pieStatus.hovered = isHovered
-            // 记录上次高亮的扇形对应的系列号 seriesIndex
-            hoveredIndex = params.seriesIndex
-          }
-          // 使用更新后的 option，渲染图表
-          myChart.setOption(this[optionName])
-        }
-      })
-      // 修正取消高亮失败的 bug
-      myChart.on('globalout', () => {
-        // 准备重新渲染扇形所需的参数
-        let isSelected
-        let isHovered
-        let startRatio
-        let endRatio
-        let k
-        if (hoveredIndex !== '') {
-          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
-          isHovered = false
-          k = this[optionName].series[hoveredIndex].pieStatus.k
-          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
-          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
-          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-          this[optionName].series[
-            hoveredIndex
-          ].parametricEquation = getParametricEquation(
-            startRatio,
-            endRatio,
-            isSelected,
-            isHovered,
-            k,
-            this[optionName].series[hoveredIndex].pieData.value
-          )
-          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
-          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-          hoveredIndex = ''
-        }
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(this[optionName])
-      })
-
-    },
-
     handleChangeAgency () {
       let obj = this.$refs["myCascader"].getCheckedNodes()[0].data
       if (obj) {
@@ -994,7 +719,7 @@ export default {
       this.userId = id;
     },
     userId () {
-
+      // this.getApiData();
       window.scrollTo(0, 0);
     },
   },
@@ -1012,33 +737,4 @@ export default {
   scoped
 ></style>
 
-<style lang='scss' scoped>
-.chart-container {
-  position: relative;
-  width: 600px;
-  height: 500px;
-  margin-top: 0;
-
-  .chart,
-  .bg {
-    width: 600px;
-    height: 500px;
-    z-index: 2;
-  }
-
-  .bg {
-    position: absolute;
-    bottom: 155px;
-    left: 50%;
-    z-index: 1;
-    width: 250px;
-    height: 140px;
-    background: no-repeat center;
-    background-image: url("../../../../../assets/img/shuju/3d-pid-bg.png");
-    background-size: 100% 100%;
-    transform: translateX(-50%);
-  }
-}
-</style>
-