Browse Source

优化饼图无数据时提示暂无数据

liubei@c-top.com.cn 3 years ago
parent
commit
44a8c69011

+ 52 - 11
src/views/modules/stockWatch/modules/new-keepManage/account-newkeepManage.vue

@@ -220,20 +220,20 @@
 
 
                   <div style="display: flex;justify-content:space-around;margin-top: 20px;">
                   <div style="display: flex;justify-content:space-around;margin-top: 20px;">
                        
                        
-                            <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> <a-empty/></div>
+                            <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>
                        
                        
                         
                         
                    
                    
 
 
 
 
                    
                    
-                        <div id="accountIndexEchartTwoPie" ref="accountIndexEchartTwoPie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> <a-empty/></div>
+                        <div id="accountIndexEchartTwoPie" ref="accountIndexEchartTwoPie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>
                    
                    
                    
                    
 
 
 
 
                    
                    
-                        <div id="accountIndexEchartThreePie" ref="accountIndexEchartThreePie" style="width: 35%;height: 315px;">  <a-empty/></div>
+                        <div id="accountIndexEchartThreePie" ref="accountIndexEchartThreePie" style="width: 35%;height: 315px;"></div>
                    
                    
                     
                     
                     >
                     >
@@ -722,8 +722,9 @@
                             }
                             }
                            
                            
                                 this.initEchart('accountIndexEchartOnePie',this.initPieOneData(pieData,this.accountIndexEchartOnePieShow,center));
                                 this.initEchart('accountIndexEchartOnePie',this.initPieOneData(pieData,this.accountIndexEchartOnePieShow,center));
-                                this.initEchart('accountIndexEchartThreePie',this.initPieThreeData(pie3p,this.accountIndexEchartTwoPieShow,centerTwo));
-                                this.initEchart('accountIndexEchartTwoPie',this.initPieTwoData(pie2d,this.accountIndexEchartThreePieShow,centerthree));
+                                this.initEchart('accountIndexEchartTwoPie',this.initPieTwoData(pie2d, this.accountIndexEchartTwoPieShow,centerTwo));
+                                this.initEchart('accountIndexEchartThreePie',this.initPieThreeData(pie3p,this.accountIndexEchartThreePieShow,centerthree));
+                                
                             
                             
                             
                             
                   
                   
@@ -1209,6 +1210,7 @@
 
 
             // 第一个饼图
             // 第一个饼图
             initPieOneData(pieData,accountIndexEchartOnePieShow,center){
             initPieOneData(pieData,accountIndexEchartOnePieShow,center){
+                var iconNone = require('../../../../../assets/nodata.png');
              let  option = {
              let  option = {
                 tooltip: {
                 tooltip: {
                     trigger: 'item'
                     trigger: 'item'
@@ -1216,7 +1218,20 @@
                 title:{
                 title:{
                     x: center,
                     x: center,
                     y: center,
                     y: center,
-                    text:accountIndexEchartOnePieShow
+                    text:accountIndexEchartOnePieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartOnePieShow,
+                    show: true,
+                    textStyle:{
+                        rich: {
+                            a:{
+                            height: 200,
+                            width: 280,
+                            backgroundColor: {
+                                image: iconNone,
+                            }
+                            }
+                        }
+
+                    }
                 },
                 },
                 legend: {
                 legend: {
                     top: '10%',
                     top: '10%',
@@ -1250,6 +1265,7 @@
                 return option
                 return option
             },
             },
             initPieTwoData(pie2d,accountIndexEchartThreePieShow,centerthree){
             initPieTwoData(pie2d,accountIndexEchartThreePieShow,centerthree){
+                var iconNoneThree = require('../../../../../assets/nodata.png');
                 let  option = {
                 let  option = {
                 tooltip: {
                 tooltip: {
                     trigger: 'item'
                     trigger: 'item'
@@ -1257,7 +1273,19 @@
                 title:{
                 title:{
                     x:centerthree,
                     x:centerthree,
                     y:centerthree,
                     y:centerthree,
-                    text:accountIndexEchartThreePieShow
+                    text:accountIndexEchartThreePieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartThreePieShow,
+                    textStyle:{
+                        rich: {
+                            a:{
+                            height: 200,
+                            width: 280,
+                            backgroundColor: {
+                                image: iconNoneThree,
+                            }
+                            }
+                        }
+
+                    }
                 },
                 },
                 legend: {
                 legend: {
                     top: '10%',
                     top: '10%',
@@ -1291,15 +1319,28 @@
                 return option
                 return option
             },
             },
 
 
-            initPieThreeData(pie3p,accountIndexEchartTwoPieShow,center){
+            initPieThreeData(pie3p,accountIndexEchartTwoPieShow,centerTwo){
+                var iconNoneTwo = require('../../../../../assets/nodata.png');
                 let  option = {
                 let  option = {
                 tooltip: {
                 tooltip: {
                     trigger: 'item'
                     trigger: 'item'
                 },
                 },
                 title:{
                 title:{
-                    x:center,
-                    y:center,
-                    text:accountIndexEchartTwoPieShow
+                    x:centerTwo,
+                    y:centerTwo,
+                    text:accountIndexEchartTwoPieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartTwoPieShow,
+                    textStyle:{
+                        rich: {
+                            a:{
+                            height: 200,
+                            width: 280,
+                            backgroundColor: {
+                                image: iconNoneTwo,
+                            }
+                            }
+                        }
+
+                    }
                 },
                 },
                 legend: {
                 legend: {
                     top: '10%',
                     top: '10%',