更新数据

src/views/index.vue

@@ -197,7 +197,8 @@ export default {
   mounted() {
 
     this.getStat();
-    this.getHomeBarData();
+    this.btgetdata();
+    this.getPieData();
     this.getInfoDatas();
     this.getGcgNumDatas();
     
@@ -237,7 +238,6 @@ export default {
       homeApi.allTygGroupTimeNum({granularity:rqtp}).then(res => {
         const tmpdata = res.data.data.allTimeData
         const dkeys = res.data.data.dkeys
-        const groupsData = res.data.data.groupsData
 
         let datas = []
         Object.values(tmpdata).forEach((value) => {
@@ -247,16 +247,6 @@ export default {
         that.klqsDatas = datas;
         that.klqsXDatas = dkeys;
 
-        that.proportionData = [];that.groupNameData=[];that.dataP=[];
-        groupsData.forEach((item) => {
-          that.proportionData.push(item.proportion);
-          that.groupNameData.push(item.groupName);
-          that.dataP.push({
-            name:item.groupName,
-            value:item.proportion.split('%')[0]
-          })
-        })
-
         this.home_bar();
       });
     },
@@ -265,7 +255,6 @@ export default {
     selitem(type) {
       // console.log(type);
       this.klselt = type;
-      // this.getHomeBarData();
       this.btgetdata();
       this.autoTimer0();
     },
@@ -499,7 +488,7 @@ export default {
           ]
         });
       }
-      clearInterval(this.timer1);//这个定时器看似多余，但是注释会影响效果，先保留
+      clearInterval(that.timer1);//这个定时器看似多余，但是注释会影响效果，先保留
       that.timer1 = setInterval(function () {
         myChart.clear();
         option && myChart.setOption(option);
@@ -772,25 +761,15 @@ export default {
       });
     },
 
-    getHomeBarData() {
+    getPieData() {
       let that = this;
       homeApi.homeBarData().then(res => {
         // /pass.passcc/allGroupTimeNum&granularity=daily
         // get allTimeData
-        const tmpdata = res.data.data.allTimeData
+        const pieData = res.data.data.groupsData;
-        const dkeys = res.data.data.dkeys
-        const groupsData = res.data.data.groupsData
-
-        let datas = []
-        Object.values(tmpdata).forEach((value) => {
-          datas.push(value.num);
-        });
-
-        that.klqsDatas = datas;
-        that.klqsXDatas = dkeys;
 
         that.proportionData = [];that.groupNameData=[];that.dataP=[];
-        groupsData.forEach((item) => {
+        pieData.forEach((item) => {
           that.proportionData.push(item.proportion);
           that.groupNameData.push(item.groupName);
           that.dataP.push({
@@ -866,7 +845,7 @@ export default {
       //   {name: '博物馆',value: 12,},
       //   // {name: '',value: 13,}
       // ];
-      var dataP = that.dataP;
+      
       function hexToRgba(hex, opacity) {
         return (
             'rgba(' +
@@ -880,122 +859,116 @@ export default {
             ')'
         );
       }
-      let color = ['#ff9acc', '#6666ff', '#ff6600', '#02ff00','#00ffff', '#fdff00'];
+      
-      let color1=[], color2=[], color3=[];
+      function run(myChart){
-      // 设置每层圆环颜色和添加间隔的透明色
+        var dataP = that.dataP;
-      color.forEach((item) => {
+        // 获取新数据-处理
-          color1.push(item, 'transparent');
+        let color = ['#ff9acc', '#6666ff', '#ff6600', '#02ff00','#00ffff', '#fdff00'];
-          color2.push(hexToRgba(item, 0.4), 'transparent');
+        let color1=[], color2=[], color3=[];
-          color3.push(hexToRgba(item, 1), 'transparent');
+        // 设置每层圆环颜色和添加间隔的透明色
-      });
+        color.forEach((item) => {
-      let data1 = [];
+            color1.push(item, 'transparent');
-      let sum = 0;
+            color2.push(hexToRgba(item, 0.4), 'transparent');
-      // 根据总值设置间隔值大小
+            color3.push(hexToRgba(item, 1), 'transparent');
-      dataP.forEach((item) => {
+        });
-          sum += Number(item.value);
+        let data1 = [];
-      });
+        let sum = 0;
-      // 给每个数据后添加特定的透明的数据形成间隔
+        // 根据总值设置间隔值大小
-      dataP.forEach((item, index) => {
+        dataP.forEach((item) => {
-          if (item.value !== 0) {
+            sum += Number(item.value);
-              data1.push(item, {
+        });
-                  name: '',
+        // 给每个数据后添加特定的透明的数据形成间隔
-                  value: sum / 70,
+        dataP.forEach((item, index) => {
-                  labelLine: {
+            if (item.value !== 0) {
-                      show: false,
+                data1.push(item, {
-                      lineStyle: {
+                    name: '',
-                          color: 'transparent',
+                    value: sum / 70,
-                      },
+                    labelLine: {
-                  },
+                        show: false,
-                  itemStyle: {
+                        lineStyle: {
-                      color: 'transparent',
+                            color: 'transparent',
-                  },
-              });
-          }
-      });
-      var option = {
-        tooltip: {
-            formatter: (params) => {
-                if (params.name !== '') {
-                    return params.name + ' : ' + params.value + '\n' + '%';
-                }
-            },
-        },
-        grid: {
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            containLabel: true,
-        },
-        series: [
-            {
-                type: 'pie',
-                radius: ['90%', '80%'],
-                center: ['50%', '50%'],
-                hoverAnimation: false,
-                startAngle: 90,
-                selectedMode: 'single',
-                selectedOffset: 0,
-                itemStyle: {
-                    normal: {
-                        color: (params) => {
-                            // console.log('params', params)
-                            return color2[params.dataIndex];
                         },
                     },
-                },
+                    itemStyle: {
-                label: {
+                        color: 'transparent',
-                    show: false,
-                    formatter: '{b}' + ' ' + '{c}',
-                },
-                data: data1,
-                z: 666,
-            },
-            {
-                type: 'pie',
-                radius: ['90%', '100%'],
-                center: ['50%', '50%'],
-                hoverAnimation: false,
-                startAngle: 90,
-                selectedMode: 'single',
-                selectedOffset: 0,
-                itemStyle: {
-                    normal: {
-                        color: (params) => {
-                            return color3[params.dataIndex];
-                        },
                     },
-                },
+                });
-                label: {
-                    show: false,
-                    formatter: '{b}' + ' ' + '{c}',
-                },
-                data: data1,
-                z: 666,
-            },
-        ],
-      }
-
-      function run(myChart){
-        // 获取新数据-处理
-        myChart.setOption({
-          series: [{
-              data: data1,
-            },
-            {
-              data: data1,
             }
-          ]
         });
+        var option = {
+          tooltip: {
+              formatter: (params) => {
+                  if (params.name !== '') {
+                      return params.name + ' : ' + params.value + '\n' + '%';
+                  }
+              },
+          },
+          grid: {
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              containLabel: true,
+          },
+          series: [
+              {
+                  type: 'pie',
+                  radius: ['90%', '80%'],
+                  center: ['50%', '50%'],
+                  hoverAnimation: false,
+                  startAngle: 90,
+                  selectedMode: 'single',
+                  selectedOffset: 0,
+                  itemStyle: {
+                      normal: {
+                          color: (params) => {
+                              // console.log('params', params)
+                              return color2[params.dataIndex];
+                          },
+                      },
+                  },
+                  label: {
+                      show: false,
+                      formatter: '{b}' + ' ' + '{c}',
+                  },
+                  data: data1,
+                  z: 666,
+              },
+              {
+                  type: 'pie',
+                  radius: ['90%', '100%'],
+                  center: ['50%', '50%'],
+                  hoverAnimation: false,
+                  startAngle: 90,
+                  selectedMode: 'single',
+                  selectedOffset: 0,
+                  itemStyle: {
+                      normal: {
+                          color: (params) => {
+                              return color3[params.dataIndex];
+                          },
+                      },
+                  },
+                  label: {
+                      show: false,
+                      formatter: '{b}' + ' ' + '{c}',
+                  },
+                  data: data1,
+                  z: 666,
+              },
+          ],
+        }
+        option && myChart.setOption(option);
       }
+      
       // 加延时器使图像绘制获取元素宽高最新的值
       setTimeout(()=>{
         var pieDom1 = document.getElementById("indexPie1");
         var myChart = echarts.init(pieDom1);
-        option && myChart.setOption(option);
+        run(myChart);
         setInterval(function () {
           myChart.clear();
-          option && myChart.setOption(option);
+          that.getPieData();
           run(myChart);
         }, 4000);
       }, 200)